ElementsKit vem com o widget Contact Form 7 que se soma às funcionalidades do plugin construtor de formulários. Você pode personalizar os estilos do formulário de contato 7 com Elementor utilizando ao máximo a funcionalidade do construtor de páginas.

Leia esta documentação para aprender como criar e personalizar o formulário usando o Contact Form 7 com Elementor.

Pré-requisito: #

Este widget é um complemento para o Formulário de Contato 7.

Portanto você precisa ter Plug-in do Formulário de Contato 7 instalado no seu site WordPress.

Etapa 1: Crie um formulário com o Formulário de Contato 7 #

1. Vá para Contato > Adicionar novo.
2. Insira um nome de formulário.
3. Defina as configurações e atributos do formulário.
4. Clique no Salvar botão.

Etapa 2: Obtenha o formulário de contato 7 no Elementor #

Para obter o Contact Form 7 no Elementor, primeiro ative o widget ElementsKit Contact Form 7, em seguida, abra o editor Elementor e arraste e solte o widget na área de design.

Habilitar widget Formulário de contato 7 #

Para ativar o widget Content Ticker:

1. Navegar para ElementsKit > Widgets no painel do WordPress.
2. Encontre o Formulário de Contato 7 widget da lista e ativar o widget.
3. Clique no SALVAR ALTERAÇÕES.

Arraste e solte o widget #

Depois disso, arraste e solte o ElementsKit Formulário de Contato 7 widget no editor Elementor.

Etapa 3: selecione um formulário para editar com Elementor #

Nesta etapa, você pode selecionar qual formulário deseja editar. Para isso, você pode selecionar o formulário na lista suspensa.

Em Conteúdo > Formulário de Contato 7 > Estilo você encontrará uma lista de formulários criados com o Formulário de Contato 7. Selecione um formulário e prossiga para a próxima etapa.

Etapa 4: personalize o formulário de contato 7 com Elementor #

Agora você pode personalizar os estilos dos rótulos, campo de entrada e botão do Contact Form 7 com Elementor.

Rótulo #

1. Tipografia: Defina a tipografia do texto do rótulo.
2. Cor: Escolha uma cor de texto para o texto do rótulo.
3. Margem: Ajuste a margem do rótulo do campo do formulário.
4. Dica: Você também pode alterar a tipografia e a cor do espaço reservado.

Entrada #

1. Preenchimento: Ajuste o preenchimento do campo de entrada.
2. Largura: Você pode ajustar a largura do campo de entrada.
3. Altura: Você pode alterar a altura do campo de entrada.
4. Margem Inferior: Altere a margem na parte inferior do campo de entrada.

5. Altura da área de texto: Para o campo textarea longo, você pode alterar sua altura.
6. Preenchimento de área de texto: Você também pode alterar o preenchimento da área de texto.

7. Tipo de plano de fundo: Escolha um tipo de cor de fundo (cor clássica ou gradiente).
8. Cor: Escolha uma cor de fundo para o campo de entrada.
9. Raio da borda: Defina o raio da borda do campo de entrada.
10. Tipo de borda: Selecione o tipo de borda do campo de entrada.
11. Sombra da caixa: Você pode definir a sombra da caixa para o campo de entrada.

Você pode definir esses atributos individualmente para Normal, Flutuar, e Modos de foco.

12. Tipografia: Defina a tipografia do texto de entrada.
13. Cor do texto: Escolha uma cor para o texto de entrada.
14. Tamanho da fonte do espaço reservado: Ajuste o tamanho da fonte do espaço reservado.
15. Cor do espaço reservado: Escolha uma cor para o texto do espaço reservado.