Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

12 práticas recomendadas para o design da página do formulário de contato (com exemplos)

Um formulário de contato bem projetado é mais do que apenas alguns campos que os visitantes podem preencher. Ele é uma ponte entre você e seus usuários, incentivando-os a entrar em contato.

Em todas as nossas marcas, criamos e exibimos formulários de contato para várias finalidades. Com anos de experiência em web design e experiência do usuário, sabemos como os formulários bem projetados são importantes para aumentar as conversões e manter os usuários envolvidos.

Neste artigo, compartilharemos algumas das práticas recomendadas para o design de formulários de contato. Você aprenderá o que torna esses designs tão eficazes.

Contact form page design

Por que uma boa página de formulário de contato é tão importante?

Uma página de formulário de contato é essencial para todos os sites. Quer você tenha um blog pessoal ou um site comercial, uma página de formulário de contato ajuda os usuários a entrar em contato com você a qualquer momento enquanto visitam seu site.

Ao contrário das mídias sociais, um formulário de contato permite que os usuários se comuniquem com você de forma privada, o que gera confiança e pode fechar vendas.

Muitos proprietários de sites não dão muita atenção à sua página de contato. A maioria das pessoas simplesmente adiciona um formulário de contato e depois se esquece dele.

Se você não está obtendo leads suficientes da página de contato do seu site, continue lendo. Mostraremos como otimizar sua página de contato para conversões.

Como criar uma página de formulário de contato no WordPress

O WordPress não vem com uma página de formulário de contato integrada. Você precisará de um plug-in de formulário de contato para criar um formulário e adicioná-lo à sua página de contato.

Recomendamos o uso do WPForms. Nossa equipe o criou para ser o plugin de formulário de contato mais amigável para iniciantes no WordPress. Além disso, a versão gratuita do WPForms está disponível no diretório oficial de plugins do WordPress.org.

Para obter instruções passo a passo completas, consulte nosso guia sobre como criar um formulário de contato no WordPress.

Não tem tempo para criar sua própria página de formulário de contato? Deixe a WPBeginner ajudar! Nossos serviços de design de sites WordPress oferecem soluções rápidas e profissionais adaptadas às suas necessidades. Evite o incômodo e obtenha uma página de formulário de contato lindamente projetada que envolve e converte. Clique aqui para saber mais e começar hoje mesmo!

Agora que você criou um formulário de contato, veja algumas práticas recomendadas de design de página de formulário de contato que podem ajudá-lo a aumentar suas conversões:

Pronto? Vamos mergulhar de cabeça!

1. Verifique se o formulário de contato está funcionando

Os provedoresde hospedagem do WordPress geralmente têm uma função de e-mail mal configurada que impede que os e-mails do formulário de contato cheguem à caixa de entrada. Em vez disso, eles geralmente acabam na pasta de spam ou nem chegam.

Se você usar a versão profissional do WPForms, ainda poderá ver as entradas do formulário na área de administração do WordPress. Mas com um plugin gratuito, talvez você nem saiba que o formulário não está funcionando.

Depois de adicionar um formulário de contato ao seu site WordPress, é importante testá-lo enviando um envio de formulário.

Se não estiver recebendo notificações por e-mail, talvez queira seguir nosso guia para corrigir o problema do WordPress que não envia e-mails.

Além disso, talvez você queira se familiarizar com os erros de formulário para saber qual é a melhor abordagem para solucioná-los.

Às vezes, os formulários não enviam e-mails de notificação devido a problemas com o plug-in ou com as configurações de SMTP. Erros de validação podem ocorrer quando os campos do formulário são configurados incorretamente, e você também pode lidar com spam, mesmo com medidas antispam em vigor.

Para obter mais detalhes, consulte nosso guia sobre o que fazer quando o formulário do WordPress não funciona.

2. Evite campos desnecessários no formulário de contato

É possível adicionar muitos campos ao seu formulário de contato, mas cada campo extra levará mais tempo para ser preenchido.

É por isso que recomendamos manter os campos do formulário de contato no mínimo e adicionar apenas aqueles que o ajudem a entender a pergunta do usuário.

Neil Patel's contact page

(Fonte: Neil Patel)

Se precisar de um formulário mais longo, talvez queira conferir a dica bônus no final deste artigo para ajudar a reduzir o abandono de formulários.

3. Explique por que os usuários devem entrar em contato com você

A página do formulário de contato deve ser convidativa. Você pode começar com uma saudação e uma mensagem de boas-vindas para torná-la educada e útil.

Em seguida, você também pode informar aos usuários com que tipos de perguntas você pode ajudar, como no exemplo abaixo:

Contact form welcome message

(Fonte: Michael Hyatt)

Se você tiver páginas diferentes para departamentos diferentes, direcionar os usuários para a página certa é muito útil.

Por exemplo, você pode enviar os clientes existentes para o suporte e os blogueiros convidados para um formulário write-for-us.

OptinMonster's contact page

(Fonte: OptinMonster)

4. Fornecer formas alternativas de contato com você

Adicionar um formulário à sua página de contato facilita o envio de uma mensagem pelos usuários. No entanto, oferecer outras opções de contato pode ajudar os usuários a escolher o que funciona melhor para eles.

O chat ao vivo e os chatbots são ótimas opções para fornecer respostas instantâneas às perguntas dos usuários, aumentando o envolvimento e a satisfação. Esses recursos podem lidar com perguntas comuns de forma eficiente e encaminhar problemas mais complexos para um representante humano.

Se você quiser adicionar um chat ao vivo ou um chatbot ao seu site WordPress, consulte nosso guia sobre como adicionar o LiveChat à sua loja WooCommerce (e aumentar as vendas).

Além do formulário e de um bate-papo ao vivo, você pode incluir seu endereço de e-mail comercial, WhatsApp ou número de telefone como métodos de contato alternativos.

Por exemplo, a página de contato da Accenture oferece aos usuários várias maneiras de entrar em contato. Ela tem números de telefone para respostas rápidas a perguntas urgentes.

Providing other ways to contact

Além disso, o menu suspenso permite encontrar formulários de contato e endereços de e-mail para diferentes necessidades.

Por exemplo, se você expandir o menu “News media/industry analyst”, encontrará os endereços de e-mail dos representantes. Essa configuração facilita a escolha da melhor maneira de entrar em contato com o departamento ou serviço certo.

Adding email addresses

(Fonte: Accenture)

5. Adicionar perfis de mídia social

Embora a maioria dos usuários queira entrar em contato com você de forma privada, alguns podem preferir entrar em contato pelo Facebook ou Twitter.

Portanto, você pode adicionar botões de mídia social à sua página de formulário de contato como uma forma alternativa de os usuários entrarem em contato com você.

Add links to your social media profiles

(Fonte: Retro Portfolio)

6. Fornecer endereço e mapa

Adicionar um endereço eum local físico para a sua empresa, juntamente com um mapa, ajuda a aumentar a confiança do usuário. Isso mostra que você tem uma presença física, o que pode fazer com que sua empresa pareça mais confiável.

Mesmo que você não tenha uma loja física ou um escritório, os usuários se sentem confortáveis em saber onde você está localizado.

Add map and location on your contact form page

(Fonte: LEDbow)

Se você tiver vários locais em diferentes cidades ou países, adicionar todos eles tornará sua página de formulário de contato muito mais útil.

Providing multiple addresses

(Fonte: The Chase)

Depois de algum tempo, você perceberá que muitos dos seus usuários fazem perguntas semelhantes.

Você pode ajudá-los a economizar tempo e responder a essas perguntas diretamente na sua página de contato, adicionando uma seção de perguntas frequentes.

Adding FAQs

(Fonte: Smart Passive Income)

8. Otimize sua página de confirmação de formulário

A maioria dos plug-ins de formulário de contato permite mostrar aos usuários uma mensagem de confirmação após o envio ou redirecioná-los para uma página diferente.

Ao redirecionar os usuários, você tem a oportunidade de mostrar a eles seus recursos mais úteis, como o conteúdo mais popular ou oferecer um código de desconto.

Outra maneira de otimizar sua página de confirmação de formulário é fazer o acompanhamento com possíveis próximas etapas. Por exemplo, você pode pedir aos visitantes que se inscrevam no seu boletim informativo ou sigam suas contas de mídia social.

Adding follow up instructions for users while waiting for answer

(Fonte: Orbit Media)

9. Peça aos usuários que se inscrevam na sua lista de e-mails

Ao criar um formulário de contato, você pode solicitar aos usuários seus endereços de e-mail. Se fizer isso, recomendamos adicionar uma caixa de seleção para convidá-los a participar de sua lista de e-mails.

E se você ainda não estiver criando uma lista de e-mails, talvez queira ver nosso guia sobre por que é tão importante criar uma lista de e-mails.

Subscribing to newsletter checkbox

(Fonte: WPBeginner)

Para obter detalhes sobre como fazer isso, consulte nosso tutorial sobre como gerar leads no WordPress como um profissional.

10. Use fotos da sua equipe

A inclusão de fotos dos membros da sua equipe na página de contato torna-a mais pessoal e acolhedora. Isso garante aos visitantes que pessoas reais estão por trás da página de contato, prontas para responder às suas perguntas.

Adding a photograph

(Fonte: Goldelucks)

11. Torne sua página de formulário de contato envolvente

Sua página de formulário de contato não precisa ser simples. Adicionar fotos do seu escritório, loja, produtos ou equipe pode refletir a personalidade da sua empresa.

Você também pode torná-lo divertido adicionando elementos de design, como ícones, ilustrações ou animações, e usando as cores da sua marca.

Para obter detalhes sobre como fazer isso, consulte nosso tutorial sobre como criar uma página personalizada no WordPress.

Adding personality to contact form

(Fonte: Omsom)

12. Seja criativo com o design da sua página de contato

Você deve ter notado que muitas páginas de contato em diferentes sites seguem um layout simples e muito previsível. Embora ele sirva ao propósito, você pode usar sua página como uma oportunidade para se destacar.

Muitos temas premium do WordPress vêm com estilos incorporados para formulários. Você pode personalizar esses estilos adicionando CSS personalizado ou usando um plug-in como o CSS Hero.

Você também pode usar um plug-in de criação de páginas do tipo arrastar e soltar, como o SeedProd, para criar o layout da página do formulário de contato. Isso lhe dará a flexibilidade de ser mais criativo sem escrever nenhum código.

Ele tem modelos iniciais que podem ajudá-lo a configurar um site em apenas alguns cliques, não apenas uma única página. Como esses modelos incluem uma página de contato pronta, tudo o que você precisa fazer é ajustar o conteúdo para se adequar à sua marca ou empresa.

Using starter templates to create contact page

(Fonte: SeedProd)

Dica bônus: como reduzir o abandono de formulários

Quando você cria um formulário de várias páginas ou um formulário com muitos campos, corre o risco de reduzir sua taxa de conversão. Muitas vezes, os usuários ficam cansados de usar formulários e saem antes de preencher todo o formulário.

Costumamos chamar isso de abandono de formulário, e isso pode acontecer com qualquer formulário, incluindo a inscrição no boletim informativo por e-mail, o checkout do WooCommerce ou o formulário de contato.

Para combater a fadiga de formulários, muitos criadores de formulários avançados, como o WPForms, vêm com complementos de abandono de formulários. Isso o ajuda a capturar entradas parciais de seus formulários.

Abandoned form in WPForms

Ao rastrear o abandono de formulários, você pode identificar quais formulários são deixados incompletos com frequência. Isso permite que você faça as melhorias necessárias para incentivar mais envios e reduzir as taxas de abandono.

Para obter informações mais detalhadas, consulte nosso guia sobre como rastrear e reduzir o abandono de formulários no WordPress.

Guias especializados sobre formulários e páginas de contato do WordPress

Agora que você conhece as práticas recomendadas para criar uma página de contato, talvez queira ver outros guias relacionados a formulários e páginas de contato no WordPress:

Esperamos que este artigo o tenha ajudado a conhecer as práticas recomendadas de ótimos designs de páginas de formulário de contato. Em seguida, talvez você também queira ver nossos guias passo a passo sobre como adicionar preenchimento automático para campos de endereço e como configurar o rastreamento de formulários do WordPress no Google Analytics.

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

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

7 ComentáriosDeixe uma resposta

  1. magnaa

    Excellent article – some great tips about contact form pages that I’ll be implementing! I think sounding more human is key. Gives everything a more authentic and enjoyable experience.

  2. natalie

    Thanks for the article, I would like to do your point number 9, see my attachment; Can you explain how to add that tick box please.

    thanks
    natalie

  3. Graham

    Great article guys, and I appreciate the example you have shared as well. Having created plenty of contact pages over the past 10 years, some fresh inspiration and good ideas are always welcomed!

  4. Sven Kox

    Nice article, thanks. I added a few new ones to my knowledge.
    One more tip: keep the field for the message big enough.
    It is not inviting if you have to write your message in a tiny window.

  5. Keely Worth

    Excellent article – some great tips about contact form pages that I’ll be implementing! I think sounding more human is key. Gives everything a more authentic and enjoyable experience.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.