Um formulário simples e desajeitado do WordPress pode fazer com que até mesmo o site mais bem projetado pareça inacabado e completamente fora de lugar. O pior? 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?
Ao adicionar um formulário ao seu site WordPress usando um plugin, você notará que o layout dele geralmente é simples e sem graça.
Por exemplo, se você adicionar um formulário de registro ao seu site usando um plugin de formulário de registro de usuário, você verá que o layout dele é um pouco entediante. Isso pode não 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 do WordPress estilizados são mais fáceis de navegar e podem incentivar 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 da sua empresa para tornar seu formulário mais memorável e eficaz.
Dito isso, mostraremos como personalizar e estilizar facilmente seus formulários do 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:
- Método 1: Como Personalizar e Estilizar Formulários do WordPress com WPForms (Método Sem Código)
- Método 2: Como Estilizar Formulários do WordPress com CSS (Personalização Avançada)
- Dica Bônus 🧑💻: Como Criar Páginas Personalizadas para Sites Facilmente
Vamos começar!
Método 1: Como Personalizar e Estilizar Formulários do WordPress com WPForms (Método Sem Código)
Você pode personalizar e estilizar facilmente seus formulários do WordPress usando o WPForms. É o melhor plugin de formulário de contato do WordPress do mercado, usado por mais de 6 milhões de sites.
Nós mesmos usamos o WPForms para muitos tipos de formulários, e você pode saber mais sobre o plugin em nossa análise detalhada do WPForms.
O WPForms vem com um construtor de arrastar e soltar que torna super fácil criar qualquer tipo de formulário. Ele ainda tem uma vasta biblioteca de mais de 2.000 temas pré-fabricados e opções de personalização integradas para o seu formulário que não exigem nenhum código.
Ele também possui ferramentas de IA para ajudá-lo a criar formulários personalizados do zero usando um prompt simples e gerar várias opções para campos como menu suspenso, botões de rádio ou caixas de seleção.
Primeiro, você precisa instalar e ativar o plugin WPForms. Para instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plugin WordPress.
📝 Observação: O WPForms também tem uma versão gratuita que você pode usar para este tutorial. No entanto, usaremos o plugin premium porque ele tem mais configurações e opções.
Após a ativação, visite a página WPForms » Configurações na barra lateral de administração do WordPress para inserir sua chave de licença.
Você pode encontrar essas informações em sua conta no site do WPForms.
Depois de fazer isso, vá para a tela WPForms » Adicionar Novo no painel do WordPress.
Isso o levará para a página ‘Selecionar um Modelo’, onde você pode começar digitando um nome para seu formulário. Depois disso, você pode escolher qualquer modelo de formulário que desejar 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.
Depois disso, você precisa visitar a página Configurações do WPForms no painel do WordPress e marcar a caixa ‘Usar Marcação Moderna’. Se você não fizer isso, as configurações de personalização do WPForms não estarão disponíveis no editor de blocos.
Não se esqueça de clicar no botão ‘Salvar Alterações’ para armazenar suas configurações.
Em seguida, abra a página ou post onde você deseja adicionar o formulário que você acabou de criar.
A partir daqui, você precisa clicar no botão ‘+’ para adicionar um bloco no canto superior esquerdo para abrir o menu de blocos e adicionar o bloco WPForms.
Depois de fazer isso, basta selecionar o formulário que você deseja adicionar ao seu site no menu suspenso dentro do próprio bloco.
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.
Para fazer isso, primeiro, você terá que criar um formulário usando WPForms, que é o construtor de formulários número 1 do mercado.
Ele usa um construtor de arrastar e soltar e vem com mais de 2.000 modelos para ajudá-lo a criar formulários rapidamente, incluindo formulários de contato, formulários de upload de arquivos, formulários de registro, formulários de RSVP e muito mais!
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 criar um formulário, é hora de personalizá-lo usando WPCode. É o melhor plugin de snippets de código do WordPress do mercado, oferecendo a maneira mais fácil e segura de adicionar código CSS para estilizar seu formulário do WordPress.
Alguns dos nossos sites de negócios usam o WPCode para adicionar e gerenciar snippets de código personalizados, e tem funcionado excepcionalmente bem. Veja nossa análise completa do WPCode para obter detalhes sobre a ferramenta.
Primeiro, você precisará instalar e ativar o plugin WPCode. Para instruções detalhadas, você pode consultar nosso guia para iniciantes sobre como instalar um plugin do WordPress.
📝 Observação: O WPCode possui uma versão gratuita que você pode usar para este tutorial. No entanto, usaremos o plano premium.
Após a ativação, visite a página Code Snippets » + Add Snippet no painel do WordPress.
Uma vez lá, basta clicar no botão ‘Use Snippet’ na opção ‘Add Your Custom Code (New Snippet)’.
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 ‘Visualização do Código’:
#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;
}
Depois de fazer isso, você terá que substituir o shortcode padrão no topo pelo shortcode do formulário que deseja personalizar.
Para fazer isso, visite a página WPForms » All Forms no painel do WordPress e copie o número do ID do WPForms do formulário que você deseja estilizar.
Depois disso, cole o número do ID do formulário ao lado da linha wpforms- no código. Agora, todo o código será executado apenas neste formulário específico.
Em seguida, você pode facilmente alterar o código hexadecimal para a cor de fundo, adicionar uma família de fontes de sua escolha e configurar o preenchimento e os raios das bordas 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, basta abrir 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 para ver o formulário personalizado em ação.
Dica Bônus 🧑💻: Como Criar Páginas Personalizadas para Sites Facilmente
Estilizar formulários do WordPress é apenas uma maneira de tornar seu site mais atraente e visualmente interessante. Você também pode projetar suas próprias páginas de site totalmente personalizadas usando SeedProd.
É o melhor plugin construtor de páginas WordPress do mercado. Ele permite que você crie páginas atraentes sem usar nenhum código.
Algumas de nossas marcas parceiras construíram seus sites inteiros usando SeedProd. É um construtor poderoso de arrastar e soltar que vai além de apenas páginas de destino! Saiba mais sobre a ferramenta em nossa análise completa do SeedProd.
O SeedProd também possui modelos e kits de site 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 dentro do editor SeedProd.
Para mais detalhes, você pode ver nosso tutorial sobre como criar uma landing page no WordPress.
🌟 Dica Pro: Você pode até usar o SeedProd para criar uma página de lista de espera viral, uma página de vendas, uma página de manutenção, uma página de em breve, e muito mais.
Esperamos que este artigo tenha ajudado você a aprender como personalizar e estilizar seus formulários do WordPress. Você também pode querer ver nosso tutorial sobre como adicionar um campo de código de cupom aos formulários do WordPress e nossa comparação de WPForms vs. Gravity Forms vs. Formidable Forms.
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.
Mrteesurez
Parte dos motivos pelos quais gosto do WPForms é o fato de ele ser flexível e altamente personalizável com modelos integrados ou usando código CSS, basta identificar o ID do formulário específico que ele está personalizando.
Um formulário bem projetado e personalizado atrai os usuários e posiciona seu formulário como profissional.
Obrigado pelo guia.
WPBeginner Support
De nada!
Admin
Jiří Vaněk
Obrigado pelo tutorial. Coloquei um formulário de contato no site usando o WPForms e o deixei em seu estado padrão. Na verdade, eu nem pensei que poderia personalizá-lo de alguma forma. Graças a este artigo, tive várias ideias sobre como torná-lo mais atraente graficamente. Obrigado
Ralph
Obrigado por este guia.
Agora meu formulário de contato ficará melhor e mais profissional do que o espaço em branco branco padrão com linhas cinza claro. Isso vai elevar o design do meu site!
WPBeginner Support
Glad we could help improve your site’s design
Admin