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

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

Sem a experiência de programadores e designers, estes formulários podem funcionar suficientemente bem, mas carecem do apelo visual que pode envolver os utilizadores e impulsionar conversões.

A boa notícia é que já não precisa de conhecimentos de programação ou experiência em design para criar formulários bonitos. Precisa apenas do plugin certo.

Neste artigo, vou mostrar-lhe a forma sem código de estilizar os seus formulários de contacto para causar uma forte primeira impressão nos seus visitantes.

Crie o Seu Formulário WordPress com Estilo Personalizado Agora 🎨

Como Estilizar Formulários de Contacto no WordPress

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

1. Instalar e Ativar WPForms

Primeiro, 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 WPForms Lite (o melhor construtor de formulários gratuito).

Precisa de ajuda com este passo? Consulte este guia para iniciantes sobre como instalar um plugin WordPress.

Agora, vamos garantir que está tudo configurado com as versões de que precisa:

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

2. Abrir o Seu Formulário no Construtor

Agora é hora de criar o 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 o seu formulário, começando pelo nome do formulário e pela seleção do modelo. Existem centenas de modelos de formulários para marketing e várias outras funções que pode utilizar. Também pode criar o seu formulário completamente do zero, se desejar.

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

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

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

3. Escolher o Seu Tema

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

Aceda a Definições >> Temas para aceder aos controlos de estilo.

O painel esquerdo mostra todas as opções de estilo. O painel direito exibe uma pré-visualização em tempo real utilizando campos de exemplo.

É aqui que escolherá o tema.

Os temas são o seu atalho para um formulário com ótimo aspeto. Definem cores e estilos coordenados para campos, etiquetas, botões, contentor e fundo, tudo num só clique.

E são acessíveis a todos os utilizadores! Para quem tem o WPForms Lite, estão disponíveis os temas “Clássico” e “Moderno (Padrão)”.

Os utilizadores com uma licença WPForms têm acesso à biblioteca completa de temas, incluindo 15 temas diferentes.

Lush é o meu favorito!

Verifiquei todos os temas e fiz esta descrição geral de cada um:

Nome do Tema	Aspeto e Sensação	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, enérgico	Laranja	Nenhum	Destaca-se em sites neutros
Aero	Leve e arejado	Azul	Cinza claro c/ sombra projetada	Efeito “cartão” subtil
Betão	Industrial	Rosa	Textura de betão	Requer o download de imagens de fundo
Elegância	Refinado	Corresponde à imagem	Imagem decorativa	Cantos arredondados no contentor
Fresco	Inspirado na natureza	Verde	Imagem com folhagem	Ótimo para marcas ecológicas/orgânicas
Penumbra	Modo escuro	Verde	Fundo escuro	Elementos de formulário de alto contraste
Corredor	Dramático	Escuro	Imagem	Contentor ousado e imersivo
Exuberante	Texturizado	Preto	Imagem de parede de tijolo	Cantos arredondados e sombra de caixa
Monstera	Lúdico	Verde	Imagem de aguarela	Cantos arredondados
Gama	Vibrante	Verde	Imagem de 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 vista de olhos ao nosso documento completo que aborda muitos destes temas em detalhe.

4. Personalizar Estilos de Campo

Assim que tiver decidido um tema, dirija-se a 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, o código HEX ou o seletor de cores

Estes toques adicionais realmente contribuem para o efeito e a vibração que pretende para cada formulário. Por exemplo, cantos arredondados parecem amigáveis, bordas quadradas parecem formais.

Também encontrará aqui opções 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. Pode escolher uma cor visualmente ou introduzir um código hexadecimal específico para um controlo específico.

5. Personalizar Estilos de Rótulo

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

Em Estilos de Rótulo, pode alterar:

Tamanho: Texto pequeno, médio ou grande. Por exemplo, pode querer rótulos pequenos para um formulário de newsletter minimalista, mas rótulos grandes e a negrito para um formulário de candidatura 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 partilharemos o seu e-mail”.
• Mensagens de Erro: Texto que aparece quando o utilizador comete um erro, como “Este campo é obrigatório”. Esta cor também controla o asterisco nos campos obrigatórios

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

6. Personalizar Estilos de Botão

O seu botão de envio é a “chamada para ação” final do seu formulário. Deve destacar-se o suficiente para que os visitantes não tenham de o procurar.

Em Estilos do Botão, pode ajustar:

• Tamanho: Pequeno, Médio ou Grande. Botões grandes funcionam bem em dispositivos móveis, enquanto os médios podem adequar-se 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 aspeto mais limpo.
• Tamanho e Raio da Borda: Bordas mais grossas e cantos mais aguçados parecem mais formais; bordas mais finas e cantos arredondados parecem mais amigáveis e casuais.
• Cores de Fundo e Texto: Estas definem o aspeto principal do seu botão.

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

7. Personalizar Estilos de Recipiente

O contentor é como a “moldura” à volta do seu formulário. Separa visualmente o formulário do resto da página e pode ajudá-lo a parecer mais intencional.

Em Estilos do Contentor, pode alterar:

• Preenchimento: Quanto espaço existe dentro do contentor à volta dos seus campos de formulário. Mais preenchimento dá uma sensação limpa e espaçosa; menos preenchimento cria um aspeto compacto e que poupa espaço.
• Estilo, Tamanho e Raio da Borda: Combine isto com o tom visual do seu site — cantos quadrados e bordas sólidas para um aspeto corporativo, cantos arredondados e bordas subtis para uma sensação mais suave.
• Sombra: Adicionar uma sombra projetada pequena ou média pode fazer com que o seu formulário pareça “elevado” da página. Ótimo para o fazer destacar-se em fundos planos.
• Cor da Borda: Frequentemente esquecida, mas uma borda colorida pode ligar o seu formulário à paleta da sua marca.

Para um site de portfólio de fotografia, por exemplo, pode usar um contentor 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 pode ser criativo, mas também onde é fácil exagerar. Um bom fundo complementa o formulário sem o tornar difícil de ler. Por isso, resista à tentação!

As opções aqui incluem:

• Origem da Imagem: Carregue a partir da sua Biblioteca de Média ou explore as Fotos de Stock integradas do WPForms (na primeira vez que usar fotos de stock, descarregará toda a biblioteca).
• Posição: Controle onde a imagem fica — Centro Superior, Centro, Canto Inferior Direito, etc.
• Repetir: Escolha Não Repetir para uma imagem única, Mosaico para repetir em todo o fundo, ou repetições horizontais/verticais para padrões.
• Tamanho: Cobrir faz com que a imagem preencha a área do contentor. Dimensões permite definir uma largura e altura exatas.
• Cor de Fundo Sólida: Uma ótima opção se quiser algo simples ou se a sua imagem não carregar.

💡Evite fundos ocupados que dificultam a leitura do texto. Se adora uma imagem ocupada, atenue-a com uma sobreposição de cor antes de a carregar.

10. Guardar, Pré-visualizar e Testar

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

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

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

• Preencha cada campo para verificar o espaçamento e o alinhamento.
• Acione uma mensagem de erro para ver se as suas cores estão claras.
• Veja o formulário em telemóvel, tablet e desktop para confirmar que é responsivo.

E é tudo! Pode agora começar a estilizar os seus formulários de contacto (ou quaisquer outros formulários) que tenha no WordPress, diretamente no construtor de formulários.

Boas estilizações!

Estilização de Formulários de Contacto – FAQs

Aqui estão algumas perguntas comuns sobre a estilização de formulários de contacto no WordPress sem código:

Os meus estilos aplicar-se-ão em todo o lado?

Sim. Quando estiliza um formulário no construtor WPForms, essas definições são guardadas com o próprio formulário — não apenas com a página em que está a trabalhar.

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

Posso estilizar um modelo de formulário?

Absolutamente. Modelos no WPForms — como “Formulário de Contacto Simples” ou “Inscrição em Newsletter” — são apenas conjuntos pré-construídos de campos. Assim que incorporar um formulário baseado em modelo, pode escolher um tema e ajustar a sua estilização exatamente da mesma forma que faria para um formulário construído à medida.

Posso eliminar um tema personalizado?

Sim, mas faça-o com cuidado. Quando elimina um tema personalizado do painel Temas no construtor, ele desaparece para sempre.

Em seguida, Conecte os Seus Formulários WordPress ao ChatGPT

Curioso sobre como pode automatizar o 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.

À procura de uma forma de tornar os seus formulários mais apelativos? Veja as nossas dicas para criar formulários interativos que captam a atenção dos utilizadores.

Crie o seu formulário WordPress agora

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

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