{"id":371707,"date":"2023-04-17T18:46:00","date_gmt":"2023-04-17T15:46:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371707"},"modified":"2023-04-17T18:48:02","modified_gmt":"2023-04-17T15:48:02","slug":"como-personalizar-o-estilo-do-seu-formulario-de-contato-7","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-personalizar-o-estilo-do-seu-formulario-de-contato-7\/","title":{"rendered":"Como personalizar o estilo do seu formul\u00e1rio de contato 7"},"content":{"rendered":"\n

O formul\u00e1rio de contato \u00e9 um elemento muito importante de cada site. N\u00f3s os usamos para coletar e compartilhar v\u00e1rios tipos de informa\u00e7\u00f5es e, portanto, temos que cuidar para que tenham uma apar\u00eancia t\u00e3o boa quanto o restante do nosso site<\/strong>. Um formul\u00e1rio de contato muito simples, com um estilo que simplesmente parece n\u00e3o pertencer \u00e0 p\u00e1gina n\u00e3o pode incutir o sentimento de confian\u00e7a em seus usu\u00e1rios, e seria uma pena perder seu p\u00fablico apenas quando eles quisessem tirar um passo adiante e deixe alguns de seus dados em seu formul\u00e1rio de contato.<\/p>\n

Uma maneira muito popular de criar um formul\u00e1rio de contato \u00e9 com um plugin Contact Form 7<\/a>, uma ferramenta pr\u00e1tica e f\u00e1cil de usar que geralmente \u00e9 inclu\u00edda gratuitamente em muitos temas do WordPress que permite criar facilmente todos os tipos de formul\u00e1rios de contato<\/strong>. Este plug-in abrange todos os aspectos t\u00e9cnicos da cria\u00e7\u00e3o de um formul\u00e1rio de contato \u2013 para estiliz\u00e1-lo, voc\u00ea precisar\u00e1 de habilidades adicionais ou outro plug-in.<\/p>\n

Neste artigo, mostraremos com que facilidade voc\u00ea pode estilizar seus formul\u00e1rios de contato para combinar com o design do seu site com uma ferramenta gratuita<\/strong>.<\/p>\n

Fique ligado para saber mais sobre:<\/p>\n

Usando Qi Addons para Elementor para estilizar seus formul\u00e1rios de contato<\/h2>\n

Qi Addons for Elementor<\/a> \u00e9 um plug-in rico em recursos que vem com 60 widgets gratuitos e mais de 40 premium e inclui um widget Contact Form 7<\/a><\/strong> criado especificamente para ajud\u00e1-lo a estilizar seus formul\u00e1rios e \u00e9 gratuito. O plugin requer zero conhecimento de codifica\u00e7\u00e3o<\/strong> e, literalmente, qualquer pessoa pode us\u00e1-lo confortavelmente. Ele n\u00e3o oferece a op\u00e7\u00e3o de criar formul\u00e1rio de contato, mas se voc\u00ea estiver usando o plug-in Contact Form 7, com Qi voc\u00ea poder\u00e1 personalizar e redesenhar seus formul\u00e1rios de forma que combinem perfeitamente com o estilo do seu site.<\/p>\n

Qi Addons for Elementor \u00e9 f\u00e1cil de instalar<\/a><\/strong> e configurar, e o procedimento \u00e9 praticamente o mesmo de qualquer outro plugin.<\/p>\n

Depois de instal\u00e1-lo, v\u00e1 para a p\u00e1gina onde est\u00e1 o formul\u00e1rio de contato que voc\u00ea deseja estilizar e opte por edit\u00e1-lo no Elementor.<\/p>\n

\"Como<\/a><\/p>\n

Em seguida, digite Contact Form 7 no campo de pesquisa<\/strong> no menu \u00e0 esquerda para encontrar o widget Contact Form 7.<\/p>\n

\"Como<\/a><\/p>\n

Agora, quando voc\u00ea o tiver, clique nele e passe o mouse sobre o local onde deseja que seu formul\u00e1rio de contato esteja<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

O formul\u00e1rio que voc\u00ea est\u00e1 adicionando desta forma \u00e9 o formul\u00e1rio que voc\u00ea criou com o plugin Contact Form 7, este widget \u00e9 feito apenas para ajud\u00e1-lo a estilizar o formul\u00e1rio, voc\u00ea n\u00e3o pode criar um formul\u00e1rio com ele<\/strong>. Ent\u00e3o, agora voc\u00ea tem seu formul\u00e1rio de contato colocado onde voc\u00ea queria que ele estivesse e voc\u00ea pode ver as configura\u00e7\u00f5es do widget Contact Form 7 no menu \u00e0 esquerda.<\/p>\n

\"Como<\/a><\/p>\n

A primeira aba do menu oferece a op\u00e7\u00e3o de escolher o tipo de formul\u00e1rio de contato que deseja ter na p\u00e1gina<\/strong>. Podemos escolher entre tr\u00eas op\u00e7\u00f5es \u2013 Formul\u00e1rio de contato 1, Newsletter e Fale conosco, voc\u00ea pode, claro, escolher qualquer um dos formul\u00e1rios que criou anteriormente para o seu site. Vamos agora mostrar como personalizamos o formul\u00e1rio Fale Conosco em nosso site.<\/p>\n

\"Como<\/a><\/p>\n

Configurando o estilo do formul\u00e1rio de contato<\/h2>\n

Para abrir as op\u00e7\u00f5es de estiliza\u00e7\u00e3o do formul\u00e1rio, clique na guia Estilo<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

A primeira op\u00e7\u00e3o refere-se \u00e0 Tipografia da etiqueta<\/strong>, onde voc\u00ea pode definir a fonte, o tamanho da fonte, espa\u00e7amento entre palavras da etiqueta, estilo da fonte, espa\u00e7amento entre as letras nas palavras e o melhor \u00e9 que voc\u00ea consegue ver todas as altera\u00e7\u00f5es viva imediatamente para n\u00e3o fazer nada \u00e0s cegas<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

Na imagem abaixo voc\u00ea pode ver exatamente como nossas escolhas refletiram na tipografia do r\u00f3tulo.<\/p>\n

\"Como<\/a><\/p>\n

A pr\u00f3xima op\u00e7\u00e3o refere-se \u00e0 cor da etiqueta<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

Voc\u00ea pode criar sua pr\u00f3pria sombra, dependendo de suas necessidades. Escolhemos azul escuro para nosso r\u00f3tulo, pois ele se encaixa bem com a cor de fundo da p\u00e1gina.<\/p>\n

\"Como<\/a><\/p>\n

Agora, quando voc\u00ea estiver configurado com o estilo do r\u00f3tulo, as pr\u00f3ximas configura\u00e7\u00f5es se referem ao estilo de entrada<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

Voc\u00ea tamb\u00e9m ter\u00e1 op\u00e7\u00f5es semelhantes aqui \u2013 voc\u00ea pode escolher o estilo, tamanho e cor da fonte da tipografia de entrada<\/strong>. Voc\u00ea tamb\u00e9m pode definir a cor de fundo do campo de entrada<\/strong> se n\u00e3o quiser que seja branco, pois \u00e9 por padr\u00e3o. Voc\u00ea tamb\u00e9m encontrar\u00e1 configura\u00e7\u00f5es para ajustar o estilo da borda dos campos de entrada<\/strong> e pode escolher entre s\u00f3lido, tracejado, ranhurado, pontilhado, duplo ou nenhum e para cada uma das op\u00e7\u00f5es voc\u00ea pode fazer ajustes adicionais.<\/p>\n

\"Como<\/a><\/p>\n

Voc\u00ea tamb\u00e9m pode definir estilos diferentes quando os campos de entrada estiverem ativos<\/strong>. Todas as mesmas op\u00e7\u00f5es est\u00e3o \u00e0 sua disposi\u00e7\u00e3o, mas ser\u00e3o aplicadas somente quando os campos de entrada estiverem ativos.<\/p>\n

\"Como<\/a><\/p>\n

As pr\u00f3ximas configura\u00e7\u00f5es referem-se ao estilo da caixa<\/strong> de sele\u00e7\u00e3o. Este pequeno elemento \u00e9 muito importante em um formul\u00e1rio de contato e deve parecer limpo e de f\u00e1cil acesso, pois esta \u00e9 a etapa em que voc\u00ea oferece algum tipo de escolha aos usu\u00e1rios do seu site.<\/p>\n

\"Como<\/a><\/p>\n

Com o Qi, voc\u00ea facilmente far\u00e1 com que esse elemento pare\u00e7a perfeito. Voc\u00ea pode definir o tamanho de entrada da caixa de sele\u00e7\u00e3o<\/strong>, voc\u00ea pode deixar mais ou menos espa\u00e7o entre duas caixas de sele\u00e7\u00e3o, bem como entre as caixas de sele\u00e7\u00e3o e outros campos de entrada<\/strong>. Voc\u00ea pode ver claramente na foto abaixo como nossas escolhas afetam o formul\u00e1rio de contato neste caso:<\/p>\n

\"Como<\/a><\/p>\n

As pr\u00f3ximas configura\u00e7\u00f5es que s\u00e3o importantes saber s\u00e3o as configura\u00e7\u00f5es de estilo de bot\u00e3o<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

Voc\u00ea pode alterar a cor do fundo do bot\u00e3o, definir a borda ao redor do bot\u00e3o<\/strong> em cores e estilos diferentes (s\u00f3lido, tracejado ou pontilhado). Voc\u00ea tamb\u00e9m pode alterar a cor do texto no bot\u00e3o<\/strong> escolhendo a cor desejada na op\u00e7\u00e3o Cor do bot\u00e3o. Todas as altera\u00e7\u00f5es s\u00e3o vis\u00edveis imediatamente para que voc\u00ea possa entender facilmente qual das configura\u00e7\u00f5es se refere a qual elemento do formul\u00e1rio de contato.<\/p>\n

Se voc\u00ea quiser que o estilo do bot\u00e3o mude ao passar o mouse, clique na guia Ativo e ajuste as configura\u00e7\u00f5es – voc\u00ea pode ajustar a cor do bot\u00e3o, a cor do plano de fundo do bot\u00e3o, a cor da borda do bot\u00e3o etc.<\/p>\n

\"Como<\/a><\/p>\n

Quando estiver satisfeito com a apar\u00eancia do formul\u00e1rio de contato, agora voc\u00ea pode ajustar o espa\u00e7amento abrindo as configura\u00e7\u00f5es na guia Estilo de Espa\u00e7amento<\/strong>. Voc\u00ea pode ajustar o espa\u00e7amento para cada elemento do formul\u00e1rio de contato aqui.<\/p>\n

\"Como<\/a><\/p>\n

As configura\u00e7\u00f5es de estilo global referem-se ao estilo de alinhamento do formul\u00e1rio de contato. Voc\u00ea pode escolher entre alinhamento esquerdo, central e direito.<\/p>\n

\"Como<\/a><\/p>\n

As configura\u00e7\u00f5es de estilo de erro<\/strong> permitem controlar o estilo da mensagem de erro exibida quando algu\u00e9m n\u00e3o digita os dados corretos no formul\u00e1rio. Voc\u00ea pode definir a posi\u00e7\u00e3o da mensagem de erro, tipografia e cor facilmente.<\/p>\n

\"Como<\/a><\/p>\n

As configura\u00e7\u00f5es de estilo de resposta<\/strong> permitem ajustar os detalhes das respostas inseridas no formul\u00e1rio de contato. Voc\u00ea pode controlar a fonte, a cor da fonte, definir o preenchimento de resposta e a margem de resposta, bem como o tipo de borda.<\/p>\n

\"Como<\/a><\/p>\n

\u00c9 assim que nosso formul\u00e1rio fica depois que algu\u00e9m enviou a mensagem:<\/p>\n

\"Como<\/a><\/p>\n

E, assim, voc\u00ea tem um formul\u00e1rio de contato elegante em sua p\u00e1gina, pronto para trabalhar para voc\u00ea.<\/p>\n