Como estilizar formulários de contato no WordPress (sem CSS!)

Quando os proprietários de pequenas empresas se aventuram a criar seus próprios formulários WordPress, os resultados geralmente acabam sendo simples e pouco inspiradores. Esse é um padrão que tenho observado consistentemente ao longo dos anos.

Sem a experiência de desenvolvedores e designers, esses formulários podem funcionar bem, mas não têm o apelo visual que pode envolver os usuários e gerar conversões.

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

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

Crie seu formulário WordPress com estilo personalizado agora 🎨

Como estilizar formulários de contato no WordPress

Agora que você já sabe que a nossa ferramenta de estilo é o melhor e mais fácil estilizador para WPForms, vamos detalhá-la passo a passo.

1. Instalar e ativar o WPForms

Primeiro, você deve instalar o plug-in WPForms, caso ainda não o tenha.

O estilo de formulário está disponível em todas as versões do WPForms, inclusive no WPForms Lite (o melhor construtor de formulários gratuito).

Precisa de ajuda com essa etapa? Confira este guia para iniciantes sobre como instalar um plug-in do WordPress.

Agora, vamos nos certificar de que você está configurado com as versões necessárias:

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

2. Abra seu formulário no Builder

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

Depois disso, é hora de começar a configurar o formulário, começando com o nome do formulário e a seleção do modelo. Há centenas de modelos de formulários 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, portanto, vamos selecioná-lo clicando no botão Use Template (Usar modelo).

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

Precisa de um pouco de orientação? Não se preocupe. Temos um documento para ensiná-lo a criar seu primeiro formulário.

3. Escolha seu tema

Agora você está pronto para estilizar o tema do seu formulário diretamente no 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 visualização ao vivo usando campos de amostra.

É aqui que você escolherá o tema.

Os temas são seu atalho para um formulário de excelente 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, estão disponíveis os temas "Classic" e "Modern (Default)".

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

A Lush é a minha favorita!

Eu mesmo verifiquei todos os temas e fiz esta visão geral descritiva de cada um deles:

Nome do tema	Aparência e sensação	Cor de destaque	Cor de fundo	Notas
Moderno (padrão)	Limpo e contemporâneo	Azul	Nenhum	Padrão para todos os novos formulários
Clássico	Minimalista	Cinza	Nenhum	Muito pouco CSS, ótimo para um visual simples
Oceano	Semelhante ao moderno	Azul-petróleo escuro	Nenhum	Excelente para marcas de tons frios
Tangerina	Caloroso, enérgico	Laranja	Nenhum	Destaca-se em locais neutros
Aero	Leve e arejado	Azul	Cinza claro com sombra de caixa	Ligeiro 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 da folha	Excelente para marcas ecológicas/orgânicas
Sombrio	Modo escuro	Verde	Fundo escuro	Elementos de forma com alto contraste
Corredor	Dramático	Escuro	Imagem	Contêiner arrojado e imersivo
Exuberante	Texturizado	Preto	Imagem de parede de tijolos	Cantos arredondados e sombra em caixa
Monstera	Brincalhão	Verde	Imagem em aquarela	Cantos arredondados
Faixa	Vibrante	Verde	Imagem do pôr do sol	Bordas e sombras de caixa
Primavera	Gradiente suave	Azul	Imagem de gradiente	Sombra de caixa para profundidade
Vintage	Retrô	Amarelo	Cor sólida	Sensação calorosa e nostálgica

Dê uma olhada em nosso documento completo que aborda muitos desses temas em detalhes.

4. Personalizar estilos de campo

Depois de escolher um tema, vá para Field Styles (Estilos de campo ) para ajustá-lo:

• Tamanhos: 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 plano de fundo, a borda e o texto. Use a paleta de temas, o código HEX ou o seletor de cores

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

Você também encontrará aqui opções para atualizar as cores de fundo, borda e texto dos campos do formulário.

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

5. Personalizar estilos de rótulos

Os rótulos são pequenos trechos de texto acima dos campos do formulário que informam aos usuários o que devem inserir, como nome, endereço de e-mail ou mensagem. Se bem feitas, elas tornam o formulário fácil de seguir, ajudando os usuários a evitar confusão e erros.

Em Label Styles (Estilos de rótulos), você pode alterar:

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

Cores:

• Texto do rótulo: O título principal acima de cada campo.
• Subrótulos e dicas: Instruções úteis, como "Somente 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 plano de fundo escuro, você pode definir o texto do rótulo como branco, os subrótulos como um cinza suave e as mensagens de erro como um vermelho vivo para que apareçam imediatamente quando algo estiver errado.

6. Personalizar estilos de botões

O botão Enviar é a última "chamada para ação" do formulário. Ele deve se destacar o suficiente para que os visitantes não precisem procurá-lo.

Em Button Styles, você pode ajustar:

• Tamanho: Pequeno, médio ou grande. Os botões grandes funcionam bem em dispositivos móveis, enquanto os médios podem se adequar melhor aos layouts de desktop.
• Estilo de borda: Sólido, tracejado ou pontilhado - embora a maioria dos designs modernos opte por Sólido ou Nenhum para obter uma aparência mais limpa.
• Tamanho e raio da borda: As bordas mais grossas e os cantos mais nítidos são mais formais; as bordas mais finas e os cantos arredondados são mais amigáveis e informais.
• Cores de fundo e de texto: Essas cores definem a aparência principal do seu botão.

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

7. Personalizar estilos de contêineres

O contêiner é como a "moldura" em torno do formulário. Ele separa visualmente o formulário do restante da página e pode ajudá-lo a parecer mais intencional.

Em Container Styles (Estilos de contêineres), você pode alterar:

• Preenchimento: Quanto espaço há dentro do contêiner ao redor dos campos do formulário. Mais preenchimento dá uma sensação de limpeza e espaço; menos preenchimento cria uma aparência compacta e de economia de espaço.
• Estilo, tamanho e raio da borda: Combine isso com o tom visual do seu site - cantos quadrados e bordas sólidas para uma aparência corporativa, cantos arredondados e bordas sutis para uma sensação mais suave.
• Sombra: adicionar uma sombra projetada pequena ou média pode fazer com que o formulário pareça "levantado" da página. É ótimo para fazer com que ele se destaque em fundos planos.
• Cor da borda: muitas vezes esquecida, mas uma borda colorida pode vincular seu formulário à paleta de 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 suave para criar um efeito de "cartão" elegante.

8. Personalizar estilos de plano de fundo

O plano de fundo é onde você pode ser criativo, mas também é onde é fácil exagerar. Um bom plano de fundo complementa o formulário sem dificultar a leitura. Portanto, resista ao impulso!

As opções aqui incluem:

• Fonte da imagem: Faça upload de sua biblioteca de mídia ou procure as fotos de estoque integradas do WPForms (na primeira vez que usar fotos de estoque, você fará o download de toda a biblioteca).
• Posição: Controle a posição da imagem - Centro superior, Centro central, Inferior direito, etc.
• Repetição: Escolha No Repeat (Sem repetição ) para uma única imagem, Tile (Mosaico ) para repetir no plano de fundo ou repetições horizontais/verticais para padrões.
• Tamanho: Cover faz com que a imagem preencha a área do contêiner. Dimensions permite que você defina a largura e a 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 muito carregados que dificultem a leitura do texto. Se você gosta de uma imagem muito carregada, diminua o tom dela com uma sobreposição de cores antes de carregá-la.

10. Salvar, visualizar e testar

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

Ou use Preview (canto superior direito) para ver seus estilos aplicados a um layout de formulário de amostra. 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 de que você também pode testá-lo:

• 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 um celular, tablet e computador para confirmar se ele é responsivo.

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

Feliz estilo!

Como estilizar 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 serão aplicados 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 publicações, ele terá uma aparência consistente em todos os lugares por padrão. A única exceção é se você substituir intencionalmente o estilo no Block Editor ou no Elementor durante a incorporação. Essas alterações se aplicam somente a essa página específica.

Posso estilizar um modelo de formulário?

Com certeza. Os modelos no WPForms - como "Formulário de contato simples" ou "Inscrição no boletim informativo" - são apenas conjuntos de campos pré-construídos. Assim que você incorporar um formulário baseado em modelo, poderá escolher um tema e ajustar seu estilo exatamente da mesma forma que faria com um formulário 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 do WordPress ao ChatGPT

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

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

Crie seu formulário WordPress agora

Pronto para criar seu formulário? Comece hoje mesmo com o plug-in de criação de formulários mais fácil do WordPress. O WPForms Pro inclui vários modelos gratuitos e oferece uma garantia de reembolso de 14 dias.

Se este artigo o ajudou, siga-nos no Facebook e no Twitter para obter mais tutoriais e guias gratuitos sobre o WordPress.