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 bem, mas não têm o apelo visual que pode envolver os utilizadores e gerar conversões.
O que é bom é que já não precisa de conhecimentos de programação ou de design para criar formulários bonitos. Só precisa do plugin certo.
Neste post, vou mostrar-lhe a forma livre de código de estilizar os seus formulários de contacto para causar uma primeira impressão forte nos seus visitantes.
Crie seu formulário WordPress com estilo personalizado agora 🎨
Como estilizar formulários de contacto no WordPress
Agora que já sabe que a nossa ferramenta de estilização é o melhor e mais fácil estilizador para WPForms, vamos analisá-la passo a passo.
Está à procura de uma forma de ajustar o espaçamento vertical entre os seus campos? Consulte este guia sobre como modificar o espaçamento entre campos.
Neste artigo
1. Instalar e ativar o WPForms
Em primeiro lugar, deve instalar o plugin WPForms, caso ainda não o tenha.
O estilo de formulário está disponível em todas as versões do WPForms, incluindo o WPForms Lite (o melhor construtor de formulários gratuito).
Precisa de ajuda com este passo? Consulte este guia para principiantes sobre como instalar um plug-in do WordPress.
O próximo passo depende da versão do WPForms que está a executar.
- Para os novos utilizadores que instalam o WPForms 1.8.1 e posterior, salte para o passo 3.
- Se instalou o WPForms antes da versão 1.8.1, terá de ativar a marcação moderna. Basta continuar abaixo para ver como.
Você é um usuário do Elementor? O WPForms suporta estilos de formulário sem código para o Elementor. Isso permite personalizações de estilo ainda mais poderosas para o seu formulário.
2. Ativar a marcação moderna
Se você tinha pelo menos um formulário no seu site antes de atualizar para o WPForms 1.8.1, você deve habilitar a marcação moderna.
Para o fazer, navegue até ao separador Geral no menu de definições do WPForms.
Nessa página, selecione a caixa Utilizar marcação moderna.
Não se esqueça de guardar as suas definições depois de concluir este passo.
3. Criar o seu formulário
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, é altura 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 de raiz, se quiser.
O Formulário de contacto simples é um dos nossos modelos mais populares. Também é bastante adequado para este tutorial, por isso vamos seleccioná-lo clicando no botão Usar modelo.
Depois de fazer a sua seleção, pode criar ou personalizar o seu formulário utilizando o construtor de arrastar e largar do WPForms, de fácil utilização.
Precisa de um pouco de orientação? Não se preocupe. Temos um documento para o ensinar a criar o seu primeiro formulário.
4. Incorporar o seu formulário
Quando tiver terminado de criar o seu formulário, é altura de o incorporar no seu sítio. Tem de concluir este passo para aceder às opções de estilo do formulário.
A forma mais fácil de incorporar o seu formulário é clicar no botão Incorporar na parte superior do construtor de formulários.
Abre-se uma janela pop-up modal, pedindo-lhe para selecionar a página onde pretende incorporar o formulário. Pode selecionar uma página existente ou criar uma nova.
Se clicar no botão Selecionar página existente, aparece um menu pendente onde pode selecionar uma das suas páginas existentes.
Se selecionar Criar uma nova página, terá a oportunidade de dar um nome à sua nova página.
Também pode incorporar o seu formulário utilizando um widget ou um shortcode.
Clique no botão Vamos lá! e a página de rascunho será aberta com o formulário incorporado no lugar.
5. Estilizar o formulário
Agora é hora da parte divertida: estilizar a sua forma!
Clique no formulário no editor de blocos e as definições para esse bloco serão abertas na barra lateral à direita. É aqui que pode aceder a todas as opções de estilo para o seu formulário.
Se for um utilizador do WPForms Pro, verá que existem dezenas de temas disponíveis. Estes temas concebidos profissionalmente facilitam o estilo do seu formulário com esquemas de cores pré-definidos, estilos de botões, contentores e imagens de fundo.
Por isso, se quiser dar um toque extra ao seu formulário instantaneamente, basta selecionar qualquer tema no painel lateral. No exemplo abaixo, estou a utilizar o tema Frost, que é um dos meus favoritos.
Obtenha todos os temas de formulários com o WPForms Pro 🎨
Embora cada tema utilize estilos únicos para cada elemento do formulário, também pode editar estes elementos individuais sem qualquer CSS.
Existem 5 elementos de formulário principais que podem ser estilizados com controlos simples de apontar e clicar:
- Estilos de campo
- Estilos de etiquetas
- Estilos de botões
- Estilos de contentores
- Estilos de fundo.
Vejamos o que cada um deles faz e como pode ajustar o estilo do formulário.
Estilos de campo
Os Estilos de campo são o local onde ajusta o tamanho do campo de entrada, o raio do limite e as cores. Se quiser que o seu formulário corresponda a outros no seu sítio, é aqui que o aspeto começa a tomar forma.
É este o aspeto das definições de estilo predefinidas.
As alterações são fáceis de efetuar, sem necessidade de edição de CSS. Eis o que significam estas diferentes opções:
- Tamanho: Ajusta o tamanho geral dos seus campos.
- Borda: Controla o estilo do limite. As opções incluem bordas sólidas, tracejadas ou pontilhadas.
- Tamanho da margem: Define a espessura dos limites do campo.
- Raio da margem: Permite-lhe aplicar cantos arredondados para um aspeto elegante e moderno.
Nestas opções, também encontra definições para Cores. Estas permitem-lhe utilizar um seletor de cores para adicionar cores a diferentes aspectos dos seus campos.
Se pretender certificar-se de que o formulário se mistura perfeitamente com as cores do tema do WordPress, pode escolher entre essas opções. As cores que vê aí dependerão do tema que está a utilizar.
Existem também cores predefinidas que podem ser selecionadas.
A cor personalizada na parte superior permite-lhe personalizar as cores dos campos do formulário. Pode utilizar o seletor de cores, introduzir um código hexadecimal e ajustar a opacidade sem editar o CSS.
Por exemplo, pode utilizar o seletor de cores se quiser adicionar uma cor personalizada ao texto do campo de entrada. Se tiver o código hexadecimal da cor que pretende adicionar, também pode colar diretamente o código hexadecimal para obter a cor exacta que pretende.
Depois de fazer as suas actualizações, deve ver essas alterações imediatamente reflectidas no formulário no editor de blocos. Em seguida, é hora de passar para a edição de Estilos de rótulo.
Estilos de etiquetas
As etiquetas são o texto que aparece por cima de um campo de formulário. Por exemplo, Nome ou Endereço de correio eletrónico. Ajuste os estilos de etiqueta para controlar o tamanho e a cor das etiquetas no seu formulário e criar um aspeto consistente no seu site.
Pode utilizar o menu pendente Tamanho para alterar o tamanho do texto da etiqueta. A secção Subrótulo e Sugestão permite-lhe escolher cores para os subrótulos e sugestões adicionais que aparecem por baixo do campo para solicitar informações específicas.
A cor da Mensagem de erro destina-se às mensagens de validação de campo que aparecem se o campo receber uma entrada inesperada. A mesma cor é utilizada para o asterisco que indica um campo obrigatório.
Tal como fez na secção Campo de formulário, pode utilizar cores predefinidas, cores do tema ou utilizar o seletor de cores para escolher uma cor personalizada para os seus estilos de etiqueta.
Estilos de botões
Para os Estilos de botão, obtém definições semelhantes aos Estilos de campo, com a opção de alterar o tamanho, o contorno, o raio do contorno e a cor. Isto permite-lhe garantir que os seus botões se destacam sempre e correspondem aos outros botões do seu sítio.
Eis o aspeto das definições de estilo predefinidas para o tema que estou a utilizar (Frost).
Observe que as opções de cor do botão serão usadas em outros campos de formulário, como questionários de múltipla escolha, caixas de seleção, avaliação e NPS.
O tema que estou a utilizar aplica um Raio de Borda ligeiramente redondo de 8 px. A Borda está selecionada como Nenhum, o que significa que o botão não tem um contorno de borda.
Recomendo a leitura do nosso guia detalhado sobre as melhores práticas para botões de envio para obter mais ideias sobre a personalização dos seus botões de formulário.
Estilos de contentores
O WPForms também permite que você adicione um contêiner de estilo personalizado ao seu formulário. Encontrará a maioria das mesmas definições que nas secções acima, com exceção de duas opções que são exclusivas dos contentores:
- Preenchimento: Utilize esta opção para ajustar o espaçamento dentro do contentor do formulário
- Sombra: Adicionar um efeito de sombra de um determinado tamanho ou não escolher nenhum.
O tema que estou a utilizar adicionou estas definições de contentor predefinidas automaticamente e, como estou bastante satisfeito com o resultado, vou deixá-las como estão.
No entanto, sinta-se à vontade para experimentar e ajustar o recipiente se quiser dar o seu próprio toque criativo a este design.
Estilos de fundo
Com as definições de Estilos de fundo, pode adicionar uma imagem de fundo ou cores sólidas para acentuar ainda mais as qualidades de chamar a atenção do seu formulário.
Convenientemente, existe uma biblioteca de fotografias de arquivo que a nossa equipa selecionou cuidadosamente para complementar os formulários do WordPress. Pode adicionar rapidamente uma imagem de fundo ao seu formulário selecionando uma das fotografias de arquivo.
E se preferir carregar as suas próprias imagens personalizadas, também tem essa opção. Pode carregar uma nova imagem ou selecionar uma da sua biblioteca multimédia do WordPress a partir das opções de Estilos de fundo.
Para o fazer, basta selecionar Biblioteca multimédia no menu pendente Imagem e, em seguida, premir Escolher imagem.
Depois disso, será aberto o modelo da Biblioteca de Média do WordPress, onde pode carregar uma nova imagem ou escolher uma já existente, como faria normalmente.
Agora, pode ter terminado aqui. Nesta altura, o seu formulário está perfeitamente estilizado. Mas há mais uma funcionalidade para estilos de formulário que quero mostrar-lhe.
Aceder a funcionalidades avançadas de estilo do WPForms 🎨
Avançado
Por baixo dos estilos de campo, etiqueta e botão, existe outra secção para Avançado. Não se deixe enganar pelo nome; continua a ser fácil de gerir!
Abra-o e verá uma grande quantidade de código CSS personalizado.
Ao utilizar o estilizador incorporado no WPForms, este código CSS personalizado é automaticamente gerado e armazenado aqui. Se você quiser usar exatamente o mesmo estilo de formulário em vários formulários do seu site, copie esse código CSS e cole-o nas configurações avançadas de estilo de formulário em cada um deles. Em segundos, seus formulários serão iguais!
Se pretender repor os estilos do formulário para as predefinições, pode clicar no botão Repor definições de estilo .
E se, depois de todo este estilo de formulário simples, ainda quiser fazer algumas personalizações adicionais à sua folha de estilos, existe ainda um campo para Classes CSS adicionais.
E é mesmo isso! Estilizou o seu formulário e foi super fácil, certo? Não precisa de escrever o seu próprio CSS!
Não se esqueça de o guardar e testar antes de o publicar!
Estilizar formulários de contacto - FAQs
Eis algumas perguntas comuns sobre como estilizar formulários de contacto no WordPress sem código:
Que opções de estilo estão normalmente disponíveis nos plugins de formulários de contacto?
Cada plugin de formulário de contacto oferece diferentes níveis de personalização. Em muitos plug-ins, a única maneira de editar o estilo do formulário é usando CSS personalizado. Opções mais avançadas, como o WPForms e o Formidable Forms, oferecem personalizações de estilo sem código que lhe permitem editar as etiquetas dos campos, os limites dos campos, as mensagens de erro e validação e os estilos dos botões de envio.
O WPForms vai ainda mais longe, permitindo-lhe personalizar os seus e-mails de notificação de formulários com cabeçalhos personalizados, esquemas de cores, temas claros e escuros e vários modelos de notificação pré-configurados.
Posso pré-visualizar as alterações ao formulário de contacto antes de as publicar?
Sim, com o WPForms, tem várias formas de pré-visualizar o seu formulário antes de o publicar. A maneira mais fácil é usar o botão Preview no topo do construtor de formulários, que lhe permite ver como o seu formulário ficaria numa página típica do seu site após a incorporação.
Também pode pré-visualizar o seu formulário a partir da página do editor do WordPress. Se pretender ver uma pré-visualização do seu formulário que também mostre quaisquer alterações de estilo que tenha efectuado no seu campo e no botão de submissão, a utilização da opção de pré-visualização do editor do WordPress permitir-lhe-á ver todas estas alterações de estilo.
Por último, se estiver a utilizar o Elementor para incorporar um formulário criado com o WPForms, pode utilizar a opção de pré-visualização nativa do Elementor para ver uma pré-visualização em direto do seu formulário, juntamente com quaisquer outros elementos que tenha adicionado à página.
Como posso garantir que o meu formulário de contacto estilizado é reativo e compatível com dispositivos móveis?
O WPForms foi projetado para ser responsivo e compatível com dispositivos móveis por padrão. Isso significa que você não precisa fazer nenhum ajuste extra para garantir que o formulário que você construiu usando o WPForms seja responsivo em todos os dispositivos.
Posso estilizar WPForms com Elementor?
Sim, o WPForms suporta uma ampla gama de opções de estilo de formulário quando usado com o Elementor. Além disso, o WPForms integra-se automaticamente com o Elementor sem exigir que você execute nenhuma etapa manual para sincronizar seus formulários com o Elementor. Portanto, se preferir criar páginas com o Elementor em vez de usar o editor padrão do WordPress, pode aproveitar livremente o Elementor para estilizar seus formulários de contato que você criou anteriormente com o WPForms.
A seguir, ligue os seus formulários WordPress ao ChatGPT
Tem curiosidade em saber como pode automatizar o seu fluxo de trabalho no que diz respeito a formulários? Descubra como ligar o ChatGPT aos seus formulários WordPress e simplificar as respostas com IA.
Está à procura de uma forma de tornar os seus formulários mais apelativos? Veja as nossas dicas sobre como criar formulários interactivos que chamam a atenção dos utilizadores.
Crie o seu formulário WordPress agora
Pronto para criar o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para mais tutoriais e guias gratuitos do WordPress.
Estou a tentar descobrir como estilizar um formulário utilizando o módulo Divi e, se isso não for possível, que solução alternativa é necessária.
Ei Ashley - Atualmente, os estilos de formulário podem ser usados com o editor de blocos do WordPress ou um tema com edição completa do site. Concordo que o suporte para outros construtores seria ótimo, e a opção de aplicar o estilo dos formulários seria ótima. Vou colocar isto no nosso rastreador de pedidos de funcionalidades para que esteja no radar dos nossos programadores.
Ainda falta a funcionalidade Estilos de formulários para Divi.
Olá Stale - Peço desculpa, mas atualmente não temos a funcionalidade de editar o estilo dos formulários no Divi. Concordo que isso seria útil e vou colocar isso no radar dos nossos desenvolvedores.
Trata-se de uma funcionalidade premium? Não vejo essa opção na minha instalação a partir do repositório do WordPress. Não devia ser assim tão difícil especificar a cor que queremos para as entradas do formulário. Não é correto pegar numa opção de alteração básica e torná-la numa funcionalidade "premium".
Olá, Boreas - Esta funcionalidade está disponível em todas as nossas versões pagas, incluindo a gratuita (para o editor de blocos e todos os temas do Full Site Editor (FSE)).
Caso não tenha a opção de ativar o Modern Markup, saiba que os utilizadores com pelo menos um formulário no seu site antes de atualizar o plugin WPForms lite para a versão 1.8.1.1 verão a opção de marcação moderna. Além disso, esta opção não será visível se você começou a usar o WPForms lite a partir da versão 1.8.1.1.
Caso seja útil, pode obter mais informações sobre esta opção no seguinte tutorial: https://wpforms.com/docs/styling-your-forms/
Se você ainda estiver enfrentando algum problema com isso, entre em contato conosco no fórum de suporte do WPForms Lite WordPress.org. Obrigado.
Olá! Actualizei recentemente o plugin para a versão 1.8.2. E uma funcionalidade de que gostava deixou de estar disponível. Antes podia escrever código HTML personalizado dentro dos campos do formulário, por exemplo, na escolha da caixa de verificação podia acrescentar - Tomato Ler mais → , agora não me deixa fazê-lo
Olá, Mila - Teremos todo o gosto em ajudar! Quando tiver oportunidade, envie-nos uma mensagem para o suporte para que possamos ajudar.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, envie um ticket de suporte.
Caso contrário, fornecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado 🙂
Estou a utilizar o WP Forms Pro no meu sítio Web. Tenho o formulário em duas páginas diferentes. Numa página, o texto está num tipo de letra com serifa, na outra página, está num tipo de letra sem serifa. Não faço ideia porquê, acabei de criar o formulário e de o colocar. Alguma indicação do motivo?
Estou a construir com o Divi builder.
Olá Lawrence - por favor verifique se o tipo de letra é alterado pela Divi. Caso ajude, aqui está o guia sobre como o DiviFlash controla as fontes.
Se quiser que analisemos melhor a situação ou se precisar de mais ajuda, contacte a nossa equipa enviando um pedido de assistência aqui.
Obrigado.
Não vejo esta opção no meu wpforms lite. Tenho a versão 1.8.2.2 e não há nenhuma opção para isso. Preciso de alterar as cores dos tipos de letra para todo o formulário. Como é que posso fazer isto no meu formulário?
Olá Larry - Esta funcionalidade está disponível em todas as nossas versões pagas, incluindo a gratuita (para o editor de blocos e todos os temas do Full Site Editor-FSE).
Caso não tenha a opção de ativar o Modern Markup, saiba que os utilizadores com pelo menos um formulário no seu site antes de atualizar o plugin WPForms lite para a versão 1.8.1.1 verão a opção de marcação moderna. Além disso, esta opção não será visível se você começou a usar o WPForms lite a partir da versão 1.8.1.1.
Caso seja útil, pode saber mais sobre esta opção no tutorial aqui
Se você ainda estiver enfrentando algum problema com isso, entre em contato conosco no fórum de suporte do WPForms Lite WordPress.org.
Obrigado.
Olá. Criei o meu primeiro formulário com wpforms. O meu problema é que os tipos de letra são diferentes dentro do mesmo formulário. Algumas etiquetas têm um tipo de letra sans, outras têm um tipo times new roman, mas todas as escolhas têm o tipo de letra sans. Como defini-las para o mesmo tipo? Eu uso o editor normal do wp, e quando abro a página no editor, onde está o formulário, vejo todas as fontes no mesmo estilo (times new roman). Mas na versão publicada fica diferente. Qual poderá ser o problema?
Olá, Krisztina - Teremos todo o gosto em ajudar! Quando tiver oportunidade, envie-nos uma mensagem para o suporte para que possamos ajudar.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, envie um ticket de suporte.
Caso contrário, fornecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado 🙂
Penso que se deve ter em conta que, a menos que se adicione o formulário como um bloco, as opções acima referidas para o estilo de etiqueta, sugestão, etc. não são apresentadas. Inicialmente, estava a utilizar o código curto. No entanto, este tutorial levou-me a tentar outra coisa. Obrigado.
Olá, Jesse - Em "Estilizar seu formulário" e "Estilos de campo", mencionamos que o estilo de formulários funciona com o editor de blocos do WordPress. Embora o recurso de estilo não esteja disponível para códigos de acesso, estamos trabalhando para expandir os estilos de formulários, e adicionarei seu pedido ao nosso rastreador de pedidos de recursos.
É possível editar estilos de formulários (tipos de letra, cores, tamanhos) no Elementor?
Olá Rodrigo - Peço desculpa, atualmente não temos a funcionalidade de editar o estilo dos formulários no Elementor. Concordo que isso seria útil, e vou colocar isso no radar dos nossos desenvolvedores.
Olá Rodrigo. Só para o atualizar, agora também pode estilizar WPForms no Elementor: https://wpforms.com/announcing-elementor-form-styles-and-entry-view-settings/
O meu problema era a existência de tipos de letra diferentes no mesmo formulário. Algumas etiquetas têm o tipo de letra sans, outras têm o tipo de letra times new roman, mas todas as selecções têm o tipo de letra sans.
Olá - Teremos todo o gosto em ajudar! Quando tiver oportunidade, envie-nos uma mensagem para o suporte para que possamos ajudar.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, envie um ticket de suporte.
Caso contrário, fornecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado 🙂
Estou a tentar editar uma incorporação localizada no rodapé. Presumo que não haja forma de o fazer? O meu rodapé é de cor escura, pelo que o texto não pode ser preto por defeito. Existe uma maneira de editar isso?
Olá Nisha - Teremos todo o gosto em ajudar! Quando tiver oportunidade, envie-nos uma mensagem para o suporte para que possamos ajudar.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, envie um ticket de suporte.
Caso contrário, fornecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado 🙂
Como é que posso remover o contorno da área de texto da caixa de texto de introdução de focagem do wpforms?
Preciso mesmo de saber a resposta, por favor.
Olá Shivam - Lamento saber do problema. Quando tiver oportunidade, envie-nos uma linha com uma captura de ecrã para o suporte, para que possamos ajudar.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, envie um ticket de suporte.
Caso contrário, fornecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado 🙂