Gostaria de personalizar um formulário de contato 7 com o plug-in Elementor's Essential Addons?

O Formulário de Contato 7 é um dos WordPress plugins dos construtores de formulários mais populares. É totalmente gratuito e você pode usá-lo para criar um formulário de contato no seu site WordPress.

Você também pode criar muitos tipos de formulários, como um formulário de reserva ou um formulário de upload de arquivo. Ele oferece 14 tipos de campos que você pode usar ao criar um formulário.

Veja também: Como usar widgets/modelos Elementor como blocos de Gutenberg

Um dos problemas comuns com o plug-in do formulário de contato 7 é o processo de personalização. Formulário de contato 7 usa o estilo padrão do seu tema WordPress de ativos. Você pode usar um estilo diferente, mas habilidades de CSS serão necessárias. Se você não possui nenhuma habilidade CSS, você pode usar o módulo Complementos essenciais para estilizar seu formulário.

Essential Addons é um complemento do Elementor que aprimora o processo de personalização de seus formulários de formulário de contato 7 com o Elementor. Elementor e Essential Addons são plugins freemium. Você pode usar as versões gratuitas de ambos para estilizar seus formulários Contact Form 7.

Como estilizar um formulário de contato 7 com complementos essenciais

Antes de começar a estilizar seus formulários, certifique-se de ter instalado Elementor et Complementos essenciais. Depois de instalado e ativado, crie uma nova página (Páginas – > Adicionar) e edite-o com Elementor.

personalize um formulário de contato 7 com o plug-in Elementor's Essential Addons

Antes de iniciar o processo de personalização, defina o layout da página clicando no ícone de engrenagem no canto inferior esquerdo. Defina o layout no menu suspenso.

personalize um formulário de contato 7 com o plug-in Elementor's Essential Addons

Adicione uma nova seção clicando no ícone de mais na caixa de edição e arrastando o widget Formulário de contato 7 da EA no painel esquerdo do editor.

personalize um formulário de contato 7 com o plug-in Elementor's Essential Addons

Vá para o painel esquerdo e selecione o formulário cujo estilo você deseja personalizar.

Depois de selecionar um formulário, navegue até a guia Style. Como você pode ver, você pode definir várias opções de estilo. Aqui estão as opções de estilo comuns que você pode definir.

  • Largura do formulário, alinhamento e plano de fundo

Sob o bloco FormContainer, clique no seletor de cores na seção Tipo de plano de fundo e defina a cor desejada para o fundo do formulário. Você pode usar uma cor sólida ou uma cor gradiente como plano de fundo.

Leia também: Elementor: Como importar ou exportar modelos

Para definir o alinhamento do formulário, basta selecionar sua opção de alinhamento preferida na seção Alinhamento de formulário.

Para definir a largura do formulário, defina o valor da largura máxima do formulário no campo Largura máxima do formulário.

personalize um formulário de contato 7 com o plug-in Elementor's Essential Addons
  • Campo de plano de fundo, largura e raio da borda

Para definir o fundo dos campos, a largura e o raio da borda, você pode abrir a seção Entrada e área de texto. Clique no seletor de cores do campo Cor de fundo para definir o plano de fundo.

Você também pode definir a cor de fundo dos campos no modo de depuração clicando na guia FOCUS.

Para definir a largura dos campos, você pode definir o valor nos campos Largura de entrada. Nesta seção, você também pode definir a largura do campo da caixa de texto em Largura da área de texto.

Para definir o raio da borda, basta editar o campo Raio da borda e defina o valor da borda de sua preferência. Você também pode definir a tipografia (família da fonte, tamanho da fonte, estilo da fonte) clicando no ícone de lápis no campo tipografia.

  • Rótulos

Os complementos essenciais também permitem que você personalize o estilo de seus rótulos de formulário. Você pode definir a cor do texto, bem como a tipografia. Para fazer isso, abra a opção Rótulos. Defina a cor do texto clicando no seletor de cores no campo Cor do texto.

Para definir a tipografia, clique no ícone de lápis no campo Tipografia.

personalize um formulário de contato 7 com o plug-in Elementor's Essential Addons
  • Botão de envio

Para personalizar o estilo do botão enviar, abra o bloco Submeter. A partir daqui, você pode definir o alinhamento do botão, largura, cor de fundo, cor do texto, raio da borda e tipografia.

  • Mensagem de erro

Para personalizar o estilo da mensagem de erro, você pode abrir o bloco erros. Você pode definir a cor do texto da mensagem de erro, tipografia, cor de fundo do erro de validação, cor do texto do erro de validação, etc….

Você pode definir várias outras opções de estilo. Você pode brincar com o painel esquerdo até ficar satisfeito com o estilo do seu formulário.

Você pode adicionar vários outros elementos à sua página usando os widgets disponíveis oferecidos por Elementor e Essential Addons. Quando terminar, clique no botão PUBLICAR na parte inferior do painel esquerdo para publicar sua página.

Integrando o formulário em uma página regular

Após clicar no botão PUBLICAR, sua página de contato foi basicamente publicada. A página em si é alimentada por Elementor. Se preferir adicionar o seu formulário de contato 7 para uma página normal (uma página criada com Gutenberg, o editor padrão do WordPress), você pode instalar o plugin Elementor Blocks para Gutenberg. Este plug-in converterá um modelo Elementor em um bloco Gutenberg.

Para registrar seu formulário de contato 7 como modelo Elementor, clique no botão de seta ao lado do botão PUBLICAR / ATUALIZAR no painel esquerdo e selecione Guardar como modelo.

Dê um nome ao seu modelo e clique no botão REGISTRO.

Crie uma nova página (Páginas – > Adicionar) e dê um nome como “fale conosco” “contato” ou qualquer outro nome de sua preferência.

Adicione um novo bloco e selecione Biblioteca Elementor e selecione o modelo de formulário de formulário de contato que você acabou de criar.

personalize um formulário de contato 7 com o plug-in Elementor's Essential Addons

E agora você acabou de personalizar seu formulário Contact Form 7.

Obtenha o Elementor Pro agora !!!

Conclusão

Aqui ! É isso para este artigo que mostra como personalizar um formulário de contato 7 com complementos essenciais. Se você tiver alguma dúvida sobre como chegar lá, informe-os no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...