Como Personalizar e Estilizar Seus Formulários WordPress (2 Métodos Fáceis)

Um formulário WordPress simples e desajeitado pode fazer com que até mesmo o site mais bem projetado pareça inacabado e fora de lugar.

A pior parte? Os visitantes podem ficar inseguros sobre preenchê-lo se ele não combinar com o resto do seu site.

Ao longo da nossa jornada administrando um blog WordPress, aprendemos que formulários bem projetados e com a marca da empresa podem fazer uma grande diferença.

Na verdade, quando combinamos nossos formulários com as cores e o layout do nosso site, vimos um enorme aumento nas submissões de formulários.

Neste guia, mostraremos duas maneiras simples, mas poderosas, de personalizar e estilizar seus formulários do WordPress, para que eles não apenas tenham uma ótima aparência, mas também tenham um melhor desempenho. 🚀

Por que personalizar e estilizar seus formulários do WordPress?

Personalizar seus formulários WordPress ajuda a combiná-los com sua marca, o que gera confiança e pode aumentar significativamente suas taxas de conversão de formulários. Ao estilizar seus formulários, você os torna mais visualmente atraentes e fáceis de navegar para seus visitantes.

Por exemplo, se você adicionar um formulário de registro ao seu site usando um plugin de formulário de registro de usuário, verá que o layout dele é um pouco sem graça. Isso pode falhar em capturar a atenção do seu visitante e até desencorajá-lo a preencher o formulário.

Personalizar seus formulários pode torná-los mais atraentes, combinando-os com o seu tema WordPress e a sua marca.

Isso pode levar a mais conversões porque formulários WordPress estilizados são mais fáceis de navegar e podem encorajar mais usuários a preenchê-los.

Formulários estilizados também podem aumentar o reconhecimento da sua marca entre os usuários. Por exemplo, você pode usar o logo do seu site e as cores exclusivas da empresa para tornar seu formulário mais memorável e eficaz.

Agora, mostraremos como personalizar e estilizar facilmente seus formulários WordPress, passo a passo.

Abordaremos dois métodos neste post, e você pode usar os links rápidos abaixo para pular para o que deseja usar:

Vamos começar!

Método 1: Como Personalizar e Estilizar Formulários WordPress com WPForms (Método Sem Código)

WPForms é o melhor plugin de formulário de contato WordPress com um construtor de arrastar e soltar. Ele oferece mais de 2.000 temas pré-fabricados e opções de personalização integradas para estilização de formulários sem código, além de ferramentas de IA para criação de formulários.

Usamos o WPForms no WPBeginner para formulários de contato, migrações de sites e nossa pesquisa anual. Para saber mais sobre nossa experiência, veja nossa análise completa do WPForms.

Passo 1. Instale e Ative o Plugin WPForms

Primeiro, vamos nos inscrever para uma conta WPForms.

Em seus sites, clique no botão 'Obter WPForms Agora', escolha um plano e siga as instruções na tela para completar o registro.

Agora, você precisa instalar e ativar o plugin WPForms.

Na sua área de administração do WordPress, vá para Plugins » Adicionar Novo Plugin.

Na próxima tela, você pode usar a barra de pesquisa para encontrar rapidamente o plugin WPForms.

Clique em 'Instalar Agora' e depois em 'Ativar' para habilitá-lo em seu site WordPress.

Para instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Se você estiver usando a versão Pro, visite a página WPForms » Configurações na barra lateral de administração do WordPress para inserir sua chave de licença após a ativação.

Você pode encontrar essas informações em sua conta no site do WPForms.

Em seguida, vá para WPForms » Configurações em seu painel de administração e verifique se a caixa de seleção 'Usar Marcação Moderna' está selecionada.

Você deve habilitar o Marcador Moderno para desbloquear as configurações de design avançadas e as opções de personalização dentro do editor de blocos do WordPress.

Não se esqueça de clicar no botão ‘Salvar Alterações’ para armazenar suas configurações.

Passo 2. Crie Seu Formulário WordPress

A partir daqui, vamos para a tela WPForms » Adicionar Novo no painel de administração do WordPress para criar seu formulário.

Isso o levará à página ‘Configuração’, onde você pode começar digitando um nome para seu formulário.

Depois disso, você pode escolher qualquer modelo de formulário que desejar, passar o mouse sobre ele e clicar no botão ‘Usar Modelo’ abaixo dele. Para este tutorial, criaremos e adicionaremos um formulário de contato simples ao nosso site.

Isso abrirá o modelo no construtor de formulários do WPForms, onde você verá uma prévia do formulário à direita e os campos do formulário na coluna da esquerda.

A partir daqui, você pode arrastar e soltar qualquer campo de formulário de sua escolha no formulário, de acordo com seu gosto. Você também pode reorganizar ou excluir campos.

Para instruções detalhadas, veja nosso tutorial sobre como criar um formulário de contato no WordPress.

Quando terminar com seu formulário, basta clicar no botão ‘Salvar’ no topo para sair do construtor de formulários.

Passo 3. Personalize o Design do Seu Formulário com Temas do WPForms

Agora você está pronto para adicionar seu formulário ao editor de blocos e personalizá-lo. Vamos clicar no botão 'Incorporar' dentro do construtor de formulários.

Isso abrirá o assistente de incorporação, onde você pode escolher uma das seguintes opções:

• Selecionar uma página existente – Escolha uma página em seu site WordPress e adicione o formulário usando o bloco WPForms.
• Criar uma nova página – Isso adicionará automaticamente o formulário a uma nova página.

Para este guia, escolheremos ‘Criar Nova Página’.

Em seguida, vamos adicionar um nome para a nova página, por exemplo, ‘Fale Conosco’.

Prossiga e clique em ‘Vamos Lá!’ quando terminar aqui.

Isso abrirá o editor de páginas com seu formulário já incorporado.

Para detalhes, consulte nosso guia sobre como incorporar formulários no WordPress.

Agora que você adicionou o formulário, é hora de personalizá-lo e estilizar.

Para fazer isso, você deve abrir o painel de blocos no lado direito da tela e rolar para baixo até a seção ‘Temas’.

A partir daqui, você pode escolher em uma biblioteca de mais de 40 temas pré-projetados para dar instantaneamente ao seu formulário um visual bonito.

Em seguida, você pode rolar para baixo até a seção ‘Estilos de Campo’ para personalizar ainda mais seu formulário.

Você pode selecionar o tamanho dos seus campos de formulário no menu suspenso e até mesmo definir o tamanho da borda e o raio.

Em seguida, você pode alterar a cor de fundo, do texto e da borda dos campos do formulário usando a ferramenta de seleção de cores.

Aqui, você pode usar as cores exclusivas da sua marca ou outras cores usadas no restante do seu blog WordPress para criar um formulário visualmente atraente.

Depois de fazer isso, role para baixo até a seção ‘Estilos de Rótulo’, onde você pode selecionar o tamanho da fonte dos rótulos no menu suspenso.

Após isso, você também pode alterar a cor da fonte dos rótulos dos campos, sub-rótulos e mensagens de erro que serão exibidas no seu formulário.

Para personalizar o botão do seu formulário, role para baixo até a seção ‘Estilos do Botão’ e selecione o tamanho dele no menu suspenso.

Você também pode definir um raio de borda e alterar a cor de fundo e do texto do botão de envio do formulário.

Depois de terminar de personalizar o formulário, basta clicar no botão ‘Atualizar’ ou ‘Publicar’ na parte superior para salvar suas configurações.

Agora, você pode visitar seu site WordPress para ver o formulário estilizado em ação.

Método 2: Como Estilizar Formulários do WordPress com CSS (Personalização Avançada)

Se você não quiser usar as opções de personalização oferecidas pelo WPForms ou quiser aplicar personalizações diferentes com CSS, você também pode usar um trecho de CSS personalizado.

Passo 1. Crie Seu Formulário Usando o WPForms

Para começar, você precisará criar um formulário usando WPForms. É o melhor plugin de formulário de contato WordPress com um construtor de arrastar e soltar, oferecendo mais de 2.000 modelos para ajudá-lo a criar rapidamente formulários de contato, formulários de upload de arquivos, formulários de registro e formulários de RSVP.

Para instruções detalhadas, você pode ver nosso tutorial sobre como criar um formulário de contato no WordPress ou ver o método 1.

Depois de fazer isso, vamos obter o ID do seu formulário – você precisará dele para seu trecho de código personalizado.

Para fazer isso, visite a página WPForms » Todos os Formulários no painel do WordPress e copie o número de ID do WPForms do formulário que você deseja estilizar.

Passo 2. Instale e Ative o WPCode

O WPCode é o plugin de snippets de código mais seguro e fácil para WordPress para adicionar CSS personalizado para estilizar formulários. Ele possui validação inteligente de código para evitar erros e oferece uma biblioteca de snippets pronta para personalização do WordPress.

Usamos o WPCode no WPBeginner para adicionar e gerenciar snippets de código personalizados em nossos sites de negócios. Para ler mais sobre nossa experiência, veja nossa análise completa do WPCode.

Primeiro, você pode criar uma conta WPCode. No site do WPCode, clique no botão ‘Obter WPCode Agora’, selecione um plano e siga as instruções na tela para se inscrever.

Agora, vamos instalar e ativar o plugin WPCode.

No seu painel de administração do WordPress, vá para Plugins » Adicionar Plugin.

Em seguida, você pode usar a caixa de pesquisa para encontrar rapidamente o plugin WPCode.

Quando o vir, clique no botão ‘Instalar Agora’ e ‘Ativar’.

Para instruções detalhadas, veja nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Passo 3. Adicione um Trecho de Código Personalizado para Personalizar Formulários WordPress

Após a ativação, visite a página Code Snippets » + Add Snippet no painel do WordPress.

Em seguida, passe o mouse sobre a opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique no botão ‘Usar Snippet’.

Você verá um pop-up que pede para selecionar o Tipo de Código.

Vamos escolher ‘Snippet de CSS’.

Isso o levará à página ‘Criar Trecho Personalizado’, onde você pode começar digitando um nome para seu trecho de código.

Depois disso, selecione a opção ‘CSS Snippet’ no menu suspenso no canto direito da tela.

Em seguida, copie e cole o seguinte código na caixa ‘Pré-visualização do Código’. As tags !important dizem ao navegador para priorizar esses estilos sobre as configurações padrão do seu tema:

#wpforms-0000 .wpforms-form {
    background-color: #ADD8E6 !important;
	font-family: 'Arial', sans-serif !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Veja como pode parecer na sua tela:

Em seguida, você pode alterar o código hexadecimal, como #ADD8E6, para corresponder à cor específica da sua marca. Você pode encontrar esses códigos usando qualquer ferramenta gratuita de seleção de cores online.

Você também pode adicionar uma família de fontes de sua escolha e configurar o preenchimento (espaçamento dentro da caixa) e o raio da borda (cantos arredondados) do formulário alterando o trecho de código.

Depois de fazer isso, role para baixo até a seção ‘Insertion’ e selecione o modo ‘Auto Insert’.

O código será executado automaticamente em seu site após a ativação.

Finalmente, role de volta para o topo da página e mude o interruptor para ‘Ativo’.

Depois disso, clique no botão ‘Salvar Snippet’ para armazenar suas configurações

Agora, o formulário do WordPress será automaticamente personalizado de acordo com o snippet CSS, e você poderá visualizá-lo.

No entanto, se você ainda não adicionou o formulário ao seu site, abra uma página ou postagem no editor de blocos.

Uma vez lá, clique no botão ‘+’ no canto superior esquerdo para abrir o menu de blocos e adicionar o bloco WPForms.

Depois disso, selecione o formulário que você estilizado usando o snippet CSS no menu suspenso do próprio bloco.

Finalmente, clique no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas configurações.

Agora, você pode visitar seu site WordPress em uma janela anônima ou privada para ver o formulário personalizado em ação, pois o cache do navegador pode, às vezes, ocultar alterações recentes.

Dica Bônus 🧑‍💻: Como Criar Páginas Personalizadas para Sites Facilmente

Você pode estilizar seus formulários WordPress para tornar seu site mais atraente e visualmente interessante. Também é possível projetar suas próprias páginas de site totalmente personalizadas usando o SeedProd. É o melhor plugin de construtor de páginas WordPress de arrastar e soltar para criar páginas e temas de sites sem código.

Testamos completamente o SeedProd para ver como ele se compara a outras soluções. Para ler mais sobre nossa experiência, veja nossa análise completa do SeedProd.

O SeedProd também possui modelos e kits de sites pré-fabricados, opções fáceis de personalização, paletas de cores e blocos de página avançados. Além disso, você pode incorporar facilmente seus formulários WPForms no editor do SeedProd.

Para mais detalhes, você pode ver nosso tutorial sobre como criar uma landing page no WordPress.

Perguntas Frequentes Sobre Personalização e Estilização de Formulários WordPress

Ainda tem dúvidas? Aqui estão algumas das perguntas mais frequentes que recebemos dos leitores – respondidas.

O que posso personalizar em um formulário WordPress?

Você pode personalizar os campos, layout, cores, fontes, rótulos, mensagens de erro e o botão de envio para corresponder ao design do seu site.

Preciso de habilidades de codificação para estilizar formulários WordPress?

Não. Com ótimos plugins como o WPForms, você pode personalizar e estilizar formulários usando configurações integradas, sem necessidade de código.

Posso fazer meus formulários combinarem com a marca do meu site?

Sim. Você pode usar as cores da sua marca, fontes e espaçamento para que o formulário se misture naturalmente com o seu tema WordPress.

Personalizar e estilizar um formulário afetará como ele funciona?

Mudanças visuais não afetarão a funcionalidade. Apenas certifique-se de testar o formulário se você alterar campos obrigatórios ou regras.

Posso alterar o estilo do formulário mais tarde?

Absolutamente. Você pode atualizar o design a qualquer momento sem reconstruir o formulário do zero.

Mais Guias para Usar Formulários no WordPress

Esperamos que este artigo tenha ajudado você a aprender como personalizar e estilizar seus formulários WordPress.

Você também pode querer ver nossos tutoriais sobre:

• Como fazer upload de arquivos de formulários do WordPress para o Google Drive
• Como Permitir que Usuários Tirem Fotos e Vídeos ao Vivo em Formulários WordPress
• Dicas para Tornar Seus Formulários WordPress Mais Interativos
• Como Automatizar Formulários WordPress com n8n para Economizar Horas de Trabalho Manual
• Melhores Alternativas ao Google Forms (Recursos Melhores + Grátis)

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.