Como personalizar seu formulário de contato 7 Estilo da maneira mais fácil

O formulário de contato é um elemento muito importante de cada site. Nós os usamos para coletar e compartilhar vários tipos de informações e, portanto, temos que cuidar para que fiquem tão bem quanto o resto do nosso site . Um formulário de contato muito simples, com um estilo que simplesmente parece não pertencer à página não pode incutir o sentimento de confiança em seus usuários, e seria uma pena perder seu público apenas quando eles quisessem tirar um passo adiante e deixe alguns de seus dados em seu formulário de contato.

Uma maneira muito popular de criar um formulário de contato é com um plugin Contact Form 7 , uma ferramenta prática e fácil de usar que geralmente é incluída gratuitamente em muitos temas do WordPress que permite criar facilmente todos os tipos de formulários de contato . Este plug-in abrange todos os aspectos técnicos da criação de um formulário de contato – para estilizá-lo, você precisará de habilidades adicionais ou outro plug-in.

Neste artigo, mostraremos com que facilidade você pode estilizar seus formulários de contato para combinar com o design do seu site com uma ferramenta gratuita .

Fique ligado para saber mais sobre:

• Usando Qi Addons para Elementor para estilizar seus formulários de contato
• Configurando o estilo do formulário de contato

Usando Qi Addons para Elementor para estilizar seus formulários de contato

O Qi Addons for Elementor é um plug-in gratuito e rico em recursos que vem com 60 widgets e inclui um widget Contact Form 7 criado especificamente para ajudá-lo a estilizar seus formulários. O plugin requer zero conhecimento de codificação e, literalmente, qualquer pessoa pode usá-lo confortavelmente. Ele não oferece a opção de criar formulário de contato, mas se você estiver usando o plug-in Contact Form 7, com Qi você poderá personalizar e redesenhar seus formulários de forma que combinem perfeitamente com o estilo do seu site.

Qi Addons for Elementor é fácil de instalar e configurar, e o procedimento é praticamente o mesmo de qualquer outro plugin.

Depois de instalá-lo, vá para a página onde está o formulário de contato que você deseja estilizar e opte por editá-lo no Elementor.

Em seguida, digite Contact Form 7 no campo de pesquisa no menu à esquerda para encontrar o widget Contact Form 7.

Agora, quando você o tiver, clique nele e passe o mouse sobre o local onde deseja que seu formulário de contato esteja .

O formulário que você está adicionando desta forma é o formulário que você criou com o plugin Contact Form 7, este widget é feito apenas para ajudá-lo a estilizar o formulário, você não pode criar um formulário com ele . Então, agora você tem seu formulário de contato colocado onde você queria que ele estivesse e você pode ver as configurações do widget Contact Form 7 no menu à esquerda.

A primeira aba do menu oferece a opção de escolher o tipo de formulário de contato que deseja ter na página . Podemos escolher entre três opções – Formulário de contato 1, Newsletter e Fale Conosco, você pode, claro, escolher qualquer um dos formulários que criou anteriormente para o seu site. Vamos agora mostrar como personalizamos o formulário Fale Conosco em nosso site.

Configurando o estilo do formulário de contato

Para abrir as opções de estilização do formulário, clique na guia Estilo .

A primeira opção refere-se à Tipografia da etiqueta , onde você pode definir a fonte, o tamanho da fonte, espaçamento entre palavras da etiqueta, estilo da fonte, espaçamento entre as letras nas palavras e o melhor é que você consegue ver todas as alterações viva imediatamente para não fazer nada às cegas .

Na imagem abaixo você pode ver exatamente como nossas escolhas refletiram na tipografia do rótulo.

A próxima opção refere-se à cor da etiqueta .

Você pode criar sua própria sombra, dependendo de suas necessidades. Escolhemos azul escuro para nosso rótulo, pois ele se encaixa bem com a cor de fundo da página.

Agora, quando você estiver configurado com o estilo do rótulo, as próximas configurações se referem ao estilo de entrada .

Você também terá opções semelhantes aqui – você pode escolher o estilo, tamanho e cor da fonte da tipografia de entrada . Você também pode definir a cor de fundo do campo de entrada se não quiser que seja branco, pois é por padrão. Você também encontrará configurações para ajustar o estilo da borda dos campos de entrada e pode escolher entre sólido, tracejado, ranhurado, pontilhado, duplo ou nenhum e para cada uma das opções você pode fazer ajustes adicionais.

Você também pode definir estilos diferentes quando os campos de entrada estiverem ativos . Todas as mesmas opções estão à sua disposição, mas serão aplicadas somente quando os campos de entrada estiverem ativos.

As próximas configurações referem-se ao estilo da caixa de seleção. Este pequeno elemento é muito importante em um formulário de contato e deve parecer limpo e de fácil acesso, pois esta é a etapa em que você oferece algum tipo de escolha aos usuários do seu site.

Com Qi, você facilmente fará com que esse elemento pareça perfeito. Você pode definir o tamanho de entrada da caixa de seleção , você pode deixar mais ou menos espaço entre duas caixas de seleção, bem como entre as caixas de seleção e outros campos de entrada . Você pode ver claramente na foto abaixo como nossas escolhas afetam o formulário de contato neste caso:

As próximas configurações que são importantes saber são as configurações de estilo de botão .

Você pode alterar a cor do fundo do botão, definir a borda ao redor do botão em cores e estilos diferentes (sólido, tracejado ou pontilhado). Você também pode alterar a cor do texto no botão escolhendo a cor desejada na opção Cor do botão. Todas as alterações são visíveis imediatamente para que você possa entender facilmente qual das configurações se refere a qual elemento do formulário de contato.

Se você quiser que o estilo do botão mude ao passar o mouse, clique na guia Ativo e ajuste as configurações - você pode ajustar a cor do botão, a cor do plano de fundo do botão, a cor da borda do botão etc.

Quando estiver satisfeito com a aparência do formulário de contato, você poderá ajustar o espaçamento abrindo as configurações na guia Estilo de Espaçamento . Você pode ajustar o espaçamento para cada elemento do formulário de contato aqui.

As configurações de estilo global referem-se ao estilo de alinhamento do formulário de contato. Você pode escolher entre alinhamento esquerdo, central e direito.

As configurações de estilo de erro permitem controlar o estilo da mensagem de erro exibida quando alguém não digita os dados corretos no formulário. Você pode definir a posição da mensagem de erro, tipografia e cor facilmente.

As configurações de estilo de resposta permitem ajustar os detalhes das respostas inseridas no formulário de contato. Você pode controlar a fonte, a cor da fonte, definir o preenchimento de resposta e a margem de resposta, bem como o tipo de borda.

É assim que nosso formulário fica depois que alguém enviou a mensagem:

E, assim, você tem um formulário de contato elegante em sua página, pronto para trabalhar para você.

Encerrando tudo

O melhor do Qi Addons for Elementor é que você pode ver todas as alterações feitas ao vivo, para poder percorrer rapidamente as diferentes opções e aprender a usá-las de forma intuitiva. Embora adicionar formulários de contato não seja uma tarefa particularmente criativa, este plugin permite que você seja criativo mesmo nesse caso. A aparência de seus formulários de contato pode impactar enormemente a maneira como seus usuários o percebem, e se você conseguir entregar o mesmo padrão neste departamento também, será uma grande vantagem para seu site, sua marca e seu negócio.

Esperamos que este artigo tenha sido útil. Se você gostou, fique à vontade para conferir alguns desses artigos também!

• Melhores plugins de botão do tipo WordPress que valem a pena
• 4 maneiras fáceis de criar botões do WordPress
• Dicas de design de botão: como ganhar cliques de seus visitantes