Como Estilizar Formulários de Contato no WordPress (Sem CSS!)

Quando proprietários de pequenas empresas se aventuram a criar seus próprios formulários WordPress, os resultados muitas vezes acabam sendo simples e sem inspiração. Este é um padrão que tenho observado consistentemente ao longo dos anos.

Sem a expertise de desenvolvedores e designers, esses formulários podem funcionar bem o suficiente, mas carecem do apelo visual que pode engajar usuários e impulsionar conversões.

O lado bom é que você não precisa mais de conhecimento em codificação ou expertise em design para criar formulários bonitos. Você só precisa do plugin certo.

Neste post, mostrarei a maneira sem código de estilizar seus formulários de contato para causar uma forte primeira impressão em seus visitantes.

Crie Seu Formulário WordPress Estilizado Personalizado Agora 🎨

Como estilizar formulários de contato no WordPress

Agora que você sabe que nossa ferramenta de estilização é a melhor e mais fácil para WPForms, vamos detalhar passo a passo.

1. Instalar e Ativar WPForms

Primeiro, você vai querer instalar o plugin WPForms se ainda não o tiver.

A estilização de formulários está disponível com todas as versões do WPForms, incluindo o WPForms Lite (o melhor construtor de formulários gratuito).

Precisa de ajuda com esta etapa? Confira este guia para iniciantes sobre como instalar um plugin do WordPress.

Agora, vamos garantir que você esteja configurado com as versões que precisa:

• Versão do WordPress: 6.0 ou superior.
• WPForms 1.9.7.

2. Abrir Seu Formulário no Construtor

Agora é hora de criar seu formulário! Para começar, passe o cursor sobre WPForms na barra lateral do seu menu de administração do WordPress e clique em Adicionar Novo.

Depois disso, é hora de começar a configurar seu formulário, começando pelo nome do formulário e seleção do modelo. Existem centenas de modelos de formulário para marketing e várias outras funções que você pode usar. Você também pode criar seu formulário completamente do zero, se desejar.

O Formulário de Contato Simples é um dos nossos modelos mais populares. Ele também é bastante adequado para este tutorial, então vamos selecioná-lo clicando no botão Usar Modelo.

Depois de fazer sua seleção, você pode construir ou personalizar seu formulário usando o construtor de arrastar e soltar fácil de usar do WPForms.

Precisa de um pouco de orientação? Sem problemas. Temos um documento para ensinar você como criar seu primeiro formulário.

3. Escolher Seu Tema

Agora você está pronto para estilizar o tema do seu formulário diretamente dentro do construtor de formulários.

Vá para Configurações >> Temas para acessar os controles de estilo.

O painel esquerdo mostra todas as opções de estilo. O painel direito exibe uma prévia em tempo real usando campos de exemplo.

É aqui que você escolherá o tema.

Temas são seu atalho para um formulário com ótima aparência. Eles definem cores e estilos coordenados para campos, rótulos, botões, contêiner e plano de fundo, tudo em um clique.

E eles são acessíveis a todos os usuários! Para aqueles com WPForms Lite, os temas "Clássico" e "Moderno (Padrão)" estão disponíveis.

Usuários com uma licença WPForms têm acesso à biblioteca completa de temas, incluindo 15 temas variados.

Lush é o meu favorito!

Eu mesmo verifiquei todos os temas e fiz este resumo descritivo para cada um:

Nome do Tema	Aparência	Cor de Destaque	Cor de Fundo	Notas
Moderno (Padrão)	Limpo, contemporâneo	Azul	Nenhum	Padrão para todos os novos formulários
Clássico	Minimalista	Cinza	Nenhum	Muito pouco CSS, ótimo para um visual básico
Oceano	Semelhante ao Moderno	Verde-azulado escuro	Nenhum	Ótimo para marcas com tons frios
Tangerina	Quente, energético	Laranja	Nenhum	Destaca-se em sites neutros
Aero	Leve e arejado	Azul	Cinza claro com sombra de caixa	Leve efeito de "cartão"
Concreto	Industrial	Rosa	Textura de concreto	Requer o download de imagens de fundo
Elegância	Refinado	Corresponde à imagem	Imagem decorativa	Cantos arredondados no contêiner
Fresco	Inspirado na natureza	Verde	Imagem com folhagem	Ótimo para marcas ecológicas/orgânicas
Sombrio	Modo escuro	Verde	Fundo escuro	Elementos de formulário de alto contraste
Corredor	Dramático	Escuro	Imagem	Contêiner ousado e imersivo
Exuberante	Texturizado	Preto	Imagem de parede de tijolos	Cantos arredondados e sombra projetada
Costela-de-adão	Lúdico	Verde	Imagem em aquarela	Cantos arredondados
Alcance	Vibrante	Verde	Imagem do pôr do sol	Bordas e sombras projetadas
Primavera	Gradiente suave	Azul	Imagem em gradiente	Sombra projetada para profundidade
Vintage	Retrô	Amarelo	Cor sólida	Sensação calorosa e nostálgica

Confira nosso documento completo que abrange muitos desses temas em detalhes.

4. Personalizar Estilos de Campo

Depois de escolher um tema, vá para Estilos de Campo para ajustar:

• Tamanho: Pequeno, Médio, Grande
• Borda: Sólida, Tracejada, Pontilhada
• Tamanho e raio da borda: Controle a espessura e o arredondamento dos cantos
• Cores: Defina o fundo, a borda e o texto. Use a paleta de temas, código HEX ou seletor de cores

Esses toques adicionais realmente se prestam ao efeito e à vibração que você busca com cada formulário. Por exemplo, cantos arredondados parecem amigáveis, bordas quadradas parecem formais.

Você também encontrará opções aqui para atualizar as cores de Fundo, Borda e Texto dos seus campos de formulário.

Clique no rótulo para abrir o seletor de cores e fazer alterações. Você pode escolher uma cor visualmente ou inserir um código hexadecimal específico para um controle específico.

5. Personalizar Estilos de Rótulo

Rótulos são os pequenos trechos de texto acima dos seus campos de formulário que dizem aos usuários o que inserir — coisas como Nome, Endereço de E-mail ou Mensagem. Bem feitos, eles tornam seu formulário fácil de seguir, ajudando os usuários a evitar confusão e erros.

Em Estilos de Rótulo, você pode alterar:

Tamanho: Texto pequeno, médio ou grande. Por exemplo, você pode querer rótulos pequenos para um formulário de newsletter minimalista, mas rótulos grandes e em negrito para um formulário de inscrição de emprego onde a clareza é mais importante.

Cores:

• Texto do Rótulo: O título principal acima de cada campo.
• Sub-rótulos e Dicas: Instruções úteis, como “Apenas o primeiro nome” ou “Nunca compartilharemos seu e-mail”.
• Mensagens de Erro: Texto que aparece quando o usuário comete um erro, como “Este campo é obrigatório.” Essa cor também controla o asterisco nos campos obrigatórios

Por exemplo, se o seu site tiver um fundo escuro, você pode definir o texto do rótulo como branco, os sub-rótulos como um cinza suave e as mensagens de erro como um vermelho brilhante para que se destaquem imediatamente quando algo der errado.

6. Personalizar Estilos de Botão

Seu botão de envio é a "chamada para ação" final do seu formulário. Ele deve se destacar o suficiente para que os visitantes não precisem procurá-lo.

Em Estilos de Botão, você pode ajustar:

• Tamanho: Pequeno, Médio ou Grande. Botões grandes funcionam bem no celular, enquanto médios podem se adequar melhor a layouts de desktop.
• Estilo da Borda: Sólida, Tracejada ou Pontilhada — embora a maioria dos designs modernos opte por Sólida ou Nenhuma para um visual mais limpo.
• Tamanho e Raio da Borda: Bordas mais grossas e cantos mais retos parecem mais formais; bordas mais finas e cantos arredondados parecem mais amigáveis e casuais.
• Cores de Fundo e Texto: Estas definem o visual principal do seu botão.

💡 Dica: A cor de fundo aqui também se torna a cor de destaque para o restante do seu formulário, incluindo estados de foco de campo, barras de progresso e até mesmo caixas de seleção. Portanto, se você deixar seu botão azul-petróleo, espere que esse azul-petróleo apareça sutilmente em todo o seu formulário para um visual coordenado.

7. Personalizar Estilos de Contêiner

O contêiner é como a “moldura” ao redor do seu formulário. Ele separa visualmente o formulário do resto da página e pode ajudar a dar uma sensação mais intencional.

Em Estilos do Contêiner, você pode alterar:

• Preenchimento: Quanto espaço há dentro do contêiner ao redor dos campos do seu formulário. Mais preenchimento dá uma sensação limpa e espaçosa; menos preenchimento cria um visual compacto e que economiza espaço.
• Estilo, Tamanho e Raio da Borda: Combine isso com o tom visual do seu site — cantos quadrados e bordas sólidas para um visual corporativo, cantos arredondados e bordas sutis para uma sensação mais suave.
• Sombra: Adicionar uma sombra projetada pequena ou média pode fazer seu formulário parecer “elevado” da página. Ótimo para destacá-lo em fundos planos.
• Cor da Borda: Frequentemente esquecida, mas uma borda colorida pode conectar seu formulário à paleta da sua marca.

Para um site de portfólio de fotografia, por exemplo, você pode usar um contêiner com preenchimento generoso, uma borda branca fina e uma sombra projetada suave para criar um elegante efeito de “cartão”.

8. Personalizar Estilos de Fundo

O fundo é onde você pode ser criativo, mas também onde é fácil exagerar. Um bom fundo complementa o formulário sem dificultar a leitura. Então, resista à tentação!

As opções aqui incluem:

• Origem da Imagem: Faça upload da sua Biblioteca de Mídia ou navegue pelas Fotos de Banco de Imagens integradas do WPForms (na primeira vez que usar fotos de banco de imagens, você baixará a biblioteca inteira).
• Posição: Controle onde a imagem fica — Topo Central, Centro Central, Canto Inferior Direito, etc.
• Repetir: Escolha Não Repetir para uma única imagem, Mosaico para repetir em todo o fundo, ou repetições horizontais/verticais para padrões.
• Tamanho: Cobrir faz a imagem preencher a área do contêiner. Dimensões permite que você defina uma largura e altura exatas.
• Cor de Fundo Sólida: Uma ótima opção se você quiser algo simples ou se sua imagem não carregar.

💡Evite fundos carregados que dificultam a leitura do texto. Se você ama uma imagem carregada, suavize-a com uma sobreposição de cor antes de fazer o upload.

10. Salvar, Visualizar e Testar

Depois de fazer suas alterações, tudo o que resta a fazer é salvar seu formulário. Clique em Salvar no construtor de formulários.

Ou use Visualizar (canto superior direito) para ver seus estilos aplicados a um layout de formulário de exemplo. Em seguida, vá para sua página no editor do WordPress e visualize o formulário real com campos reais.

Não se esqueça, você também pode Testar:

• Preencha cada campo para verificar o espaçamento e o alinhamento.
• Acione uma mensagem de erro para ver se suas cores estão claras.
• Visualize o formulário em dispositivos móveis, tablets e desktops para confirmar que ele é responsivo.

E é isso! Agora você pode começar a estilizar seus formulários de contato (ou quaisquer outros formulários) que você tem no WordPress, diretamente no construtor de formulários.

Boas estilizações!

Estilizando Formulários de Contato – Perguntas Frequentes

Aqui estão algumas perguntas comuns sobre como estilizar formulários de contato no WordPress sem código:

Meus estilos se aplicarão em todos os lugares?

Sim. Quando você estiliza um formulário no construtor do WPForms, essas configurações são salvas com o próprio formulário — não apenas com a página em que você está trabalhando.

Isso significa que, se você incorporar o mesmo formulário em várias páginas ou posts, ele terá uma aparência consistente em todos os lugares por padrão. A única exceção é se você substituir intencionalmente o estilo no Editor de Blocos ou no Elementor durante a incorporação. Essas alterações se aplicam apenas a essa página específica.

Posso estilizar um modelo de formulário?

Com certeza. Modelos no WPForms — como “Formulário de Contato Simples” ou “Inscrição para Newsletter” — são apenas conjuntos pré-construídos de campos. Assim que você incorporar um formulário baseado em modelo, poderá escolher um tema e ajustar sua estilização exatamente da mesma forma que faria para um formulário criado personalizado.

Posso excluir um tema personalizado?

Sim, mas faça isso com cuidado. Quando você exclui um tema personalizado do painel Temas no construtor, ele desaparece para sempre.

Em seguida, Conecte seus formulários WordPress ao ChatGPT

Curioso sobre como você pode automatizar seu fluxo de trabalho quando se trata de formulários? Descubra como conectar o ChatGPT aos seus formulários WordPress e otimize as respostas com IA.

Procurando uma maneira de tornar seus formulários mais atraentes? Confira nossas dicas para criar formulários interativos que chamam a atenção dos usuários.

Crie Seu Formulário WordPress Agora

Pronto para construir seu formulário? Comece hoje mesmo com o plugin construtor de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.