7 Designs de formulários de contacto que pode roubar para se inspirar

Procura inspirações de design de formulários de contacto para o seu sítio Web? Com alguns ajustes simples, pode criar formulários em linha como quiser.

Neste artigo, mostrarei alguns exemplos interessantes de design de formulários de contacto e darei dicas úteis para criar um no seu sítio Web.

Estilize o seu formulário de contacto agora! 🙂

Também mostrarei um método muito útil e sem código para alterar o layout dos seus formulários. Pronto? Vamos lá!

7 Designs de formulários de contacto que pode roubar

Agora, vamos examinar alguns exemplos interessantes e as principais tácticas que utilizam para os inspirar e recriar no seu site.

1. WPForms

Queria começar com a página de contacto do WPForms, pois penso que é um excelente exemplo para produtos SaaS, sítios Web de plugins e outras pequenas empresas.

A secção superior desta página está dividida em duas partes: uma para clientes existentes com questões técnicas e outra para questões de pré-venda.

Leia também: Como permitir que os visitantes dupliquem campos de formulário

Porque é que eu acho que este formulário de contacto se destaca

O formulário de contacto não é imediatamente visível e só aparece quando alguém clica no botão "Preencher um formulário" na secção "Tenho uma pergunta básica".

Esta escolha de design minimiza o tamanho da página e garante que os novos potenciais clientes utilizem o formulário principalmente, uma vez que só é acessível através da secção de pré-venda.

Esta estratégia ajuda a encaminhar rapidamente os utilizadores para a secção adequada, simplificando o processo tanto para a empresa como para as pessoas que estabelecem contacto.

Além disso, na parte inferior da página, há um link de chamada para ação (CTA) que convida os visitantes a juntarem-se ao Círculo VIP do WPForms.

Como criar uma página de contacto como esta

• Formulário de contacto pop-up: Conceba uma página de contacto em que o formulário só aparece quando se clica num botão específico. Isto mantém a página organizada e realça outros elementos até que a interação seja necessária.
• Base de conhecimento para suporte ao cliente: Implemente um wiki ou uma base de conhecimento no seu site WordPress. Isto serve como uma área de autoajuda para os clientes existentes, abordando questões e problemas comuns.
• Utilização de modelos: Escolha entre mais de 2.000 modelos de formulários WordPress para várias finalidades, como feedback, marketing e operações comerciais. Esses modelos ajudam a configurar rapidamente formulários funcionais e com aparência profissional. (experimente também estes modelos ocultos do WPForms para situações especiais).
• Tradução de formulários: Para sítios Web que não falam inglês ou para públicos multilingues, o WPForms permite a tradução fácil de formulários de contacto para satisfazer diversas necessidades linguísticas.

Crie o seu formulário WordPress agora

2. Riscas

Decidi centrar-me na página de vendas de contacto do Stripe porque é um excelente exemplo de uma página de contacto especializada que lida eficazmente com questões comerciais.

Para que o formulário de contacto pareça curto, a Stripes utiliza um formulário em várias etapas na sua página de contacto, o que certamente ajuda a reduzir a taxa de abandono do formulário.

Porque é que eu acho que esta página Contacte-nos se destaca

O que torna este formulário de contacto único é o facto de se concentrar na recolha de informações relevantes para a equipa de vendas do Stripe.

Utiliza uma abordagem de formulário em várias etapas que começa por pedir o seu e-mail de trabalho e país/região para recolher as suas informações.

Depois de clicar no botão "Continuar", o formulário de contacto do Stripe visa obter uma boa compreensão da sua empresa e da forma como o Stripe o pode ajudar.

Ao perguntar sobre a dimensão da sua empresa, as receitas e as necessidades de integração, permite-lhes encaminhar o seu pedido para a pessoa mais adequada.

Como criar uma página de contacto como esta

• Addon WPForms Lead Forms: Utilize o campo Quebra de página ou o addon Formulários de chumbo para dividir o seu formulário em secções separadas.
• Concentre-se em informações relevantes: Pense nas informações sobre os potenciais clientes que seriam mais úteis para a sua equipa de vendas.
• Mantenha-o simples: Não sobrecarregue os utilizadores com demasiados campos de formulário. Peça apenas as informações essenciais de que necessita para qualificar os contactos.
• Etiquetas e instruções claras: Utilizar etiquetas claras e concisas para cada campo e fornecer as instruções necessárias para evitar confusões.

Crie o seu formulário de várias etapas agora

3. Legalidade

O formulário de contacto na página "Contact Us" da Legalia Corp é uma interface bem pensada, concebida para facilitar a comunicação entre a empresa e os seus clientes.

O que mais se destaca nesta página é a sua disposição em várias colunas, com um mapa à esquerda para clarificar a localização e um formulário de contacto estruturado à direita.

Porque é que eu acho que este formulário de contacto se destaca

A utilização de um esquema de várias colunas é particularmente eficaz, uma vez que divide o formulário em duas secções diferentes.

Isto permite aos utilizadores separar visualmente as informações geográficas dos campos de contacto, o que é uma abordagem interessante.

Também considero que a inclusão de um mapa não só ajuda a localizar facilmente a empresa, como também aumenta a legitimidade e a acessibilidade da empresa.

O formulário em si também é bastante simples, pedindo informações essenciais sem sobrecarregar o utilizador.

Como criar uma página de contacto como esta

• Planear a disposição: Comece por escolher uma apresentação que equilibre a interface do utilizador e a estética do design. Uma apresentação dividida pode ser muito eficaz para separar visualmente diferentes tipos de informação, mantendo-os na mesma página.
• Incorporar mapas: Se a sua empresa tiver uma localização física, a incorporação de um mapa na página de contacto pode aumentar significativamente a confiança do utilizador e simplificar o processo de localização. Utilize ferramentas como o Google Maps para uma integração fácil.
• Simplifique o formulário: Reduza os campos do formulário ao mínimo para evitar dissuadir potenciais contactos. Solicite apenas as informações mais importantes, como nome, e-mail e uma breve caixa de mensagem, o que considero suficiente.

Adicionar um mapa ao seu formulário de contacto

4. Jornal dos motores de busca

O formulário de contacto na página "Contacte-nos" do Search Engine Journal destaca-se devido às suas caraterísticas abrangentes adaptadas a uma variedade de necessidades dos utilizadores.

Este formulário incorpora funcionalidades avançadas, tais como captcha para segurança, uma opção de carregamento de ficheiros e categorização de consultas.

Leia também: como forçar o espaçamento entre campos.

Porque é que eu acho que este formulário de contacto se destaca

Gosto muito da forma como o Search Engine Journal introduziu várias opções de categorização com base no tipo de consulta do utilizador.

Quer se trate de publicidade, da comunicação de um problema técnico ou de outras preocupações, existe uma opção para cada necessidade.

A inclusão de um CAPTCHA também ajuda a evitar envios de spam, garantindo que apenas as consultas genuínas chegam à equipa do SEJ.

Por último, os utilizadores podem anexar ficheiros aos seus pedidos de informação, o que é particularmente útil para apresentar documentos que apoiem as suas mensagens ou pedidos.

Como criar uma página de contacto como esta

• Implementar recursos de segurança: Inclua medidas de segurança como um CAPTCHA com a ajuda do WPForms para proteger o seu site contra spam e abusos, o que ajudará a manter a integridade das suas comunicações.
• Concentre-se na experiência do utilizador: Conceba o seu formulário tendo em mente o utilizador. Certifique-se de que é fácil de navegar, que os campos estão claramente identificados e que as instruções são diretas para evitar confusões. Utilize um campo pendente para categorizar as consultas do utilizador.
• Adicionar um campo de upload de arquivo: Se quiser dar às pessoas que o contactam a oportunidade de anexar campos aos seus pedidos de informação, pode utilizar o WPForms para adicionar um campo de carregamento de ficheiros ao seu formulário, o que é bastante fácil de utilizar.

Configurar o CAPTCHA no seu formulário do WordPress

5. Maravilha

A Marvel é uma empresa de design de software que utiliza um esquema de várias colunas no seu formulário de contacto com uma imagem à direita.

O design é simples e moderno, garantindo que os utilizadores podem encontrar as informações de que necessitam sem problemas.

Porque é que eu acho que este formulário de contacto se destaca

O design de várias colunas é o que realmente distingue este formulário de contacto e dá-lhe uma sensação de desorganização e de respiração.

Permite que os utilizadores percorram rapidamente a página e encontrem exatamente o que precisam, sem terem de procurar em muito texto.

A imagem no lado direito do formulário não só é visualmente atractiva como também é relevante para a atividade da Marvel, mostrando o seu empenho no design.

Como criar uma página de contacto como esta

• Layout de várias colunas: Comece por escolher um esquema que equilibre a interface do utilizador e a estética do design. Uma apresentação com várias colunas pode ser muito eficaz para separar visualmente diferentes tipos de informação, mantendo-os na mesma página.
• Utilização estratégica de imagens: Escolha imagens que reflictam a sua marca e estejam relacionadas com o objetivo da página. A adição de uma imagem ao seu formulário de contacto pode torná-lo mais envolvente e interativo em geral.

Adicionar imagens ao seu formulário de contacto

6. Médio

A página de contacto de um centro de ajuda como o do Medium é crucial para fornecer apoio direto e orientação aos utilizadores.

Contém ligações diretas para tópicos de ajuda e respostas populares. Os utilizadores podem facilmente enviar um pedido se não conseguirem encontrar respostas às suas perguntas.

Porque é que eu acho que esta página Contacte-nos se destaca

A página de contacto do meio inclui normalmente menus pendentes ou caixas de verificação que permitem aos utilizadores categorizar os seus pedidos de informação.

Muitos centros de ajuda fornecem ligações para perguntas frequentes ou artigos relacionados antes de permitir a submissão de formulários.

No entanto, a principal desvantagem da sua página é que o Medium não utiliza um formulário de contacto. Isto pode ser frustrante para os utilizadores que precisam de contactar urgentemente as suas equipas de apoio.

Como criar uma página de contacto como esta

• Incorporar opções de autoajuda: Integre a sua página de contacto com a sua base de conhecimentos. Forneça artigos ou ligações a perguntas frequentes relacionadas com as selecções ou entradas do utilizador, resolvendo potencialmente a questão.

7. Fronteira branca

Pretende colocar um formulário em cima de uma imagem de fundo? Procura um design de formulário de contacto que utilize CSS? Eu tenho tudo o que precisa!

A White Frontier utiliza um formulário transparente na sua página de contacto, pelo que o formulário de contacto se mistura perfeitamente com o design de fundo.

Quando testar este design no seu sítio, certifique-se de que coloca uma imagem no fundo. Caso contrário, não será possível ver o formulário.

Como criar uma página de contacto como esta

Para este exemplo, pode simplesmente copiar o CSS de design do formulário de contacto a partir de baixo. Para mais informações, consulte o nosso guia para principiantes sobre como estilizar os seus formulários com CSS.

Design do formulário de contacto CSS

/* Fields */
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
    background-color: transparent; /* Remove background fill */
    text-transform: uppercase; /* Make text all uppercase */
    border-radius: 0; /* Remove corner curve */
    border: 2px solid #fff; /* 2px white border */
    color: #fff; /* White text */
    height: 45px; /* Increase input height */
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #fff;
}
/* Button */
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button {
   text-transform: uppercase;
   padding: 10px 60px;
   color: white;
   background: #444;
   font-weight: normal;
}

Personalização de todo o site
É muito fácil personalizar os formulários em todo o site depois de ter os snippets CSS que pretende utilizar.
Tudo o que precisa de fazer é copiar os snippets de CSS que pretende utilizar e colá-los no seu site utilizando o personalizador de temas do WordPress ou o editor de temas.
Um método ainda mais fácil é utilizar um plugin como o WPCode, que lhe permite colar diferentes tipos de fragmentos de código no seu sítio.

Também pode ter vários formulários no seu sítio Web e pretender alterar o estilo de apenas um deles. Vamos mostrar-lhe como fazer isto a seguir.
Como personalizar os designs dos formulários de contacto
Antes de começar, certifique-se de que o WPForms está instalado e ativado no seu site WordPress e que verificou a sua licença.
Em seguida, crie um novo formulário e adicione-o a uma página ou post. No editor de blocos, clique no formulário para abrir opções de estilo adicionais para o bloco WPForms.





Pode alterar o tema da cor, os campos de formulário, as etiquetas, os botões e os estilos do contentor e do fundo sem escrever qualquer CSS nas definições do bloco WPForms.


Pode escolher um tema de cores predefinido na definição Temas para alterar o estilo dos campos, etiquetas, botões, contentores e fundos do seu formulário.
Na secção Estilos de campo, encontrará as opções para ajustar o tamanho, o contorno, o tamanho do contorno, o raio do contorno e as cores dos campos do formulário.
É possível alterar o tamanho e a cor das etiquetas do formulário na secção Estilos de etiqueta. As opções de tamanho disponíveis incluem Pequeno, Médio e Grande.
Em Estilos de botões, pode alterar o tamanho, a cor, o contorno, o tamanho do contorno, o raio do contorno e o estilo do contorno dos seus botões.
As definições de Estilos de contentor permitem-lhe alterar a cor, a sombra, o preenchimento, o estilo, o tamanho e o raio do contorno à volta do contentor do formulário.
As definições de Estilos de fundo permitem-lhe controlar a imagem e a cor de fundo do seu formulário para lhe dar um toque de marca.

Depois de ter estilizado o seu formulário de contacto, clique no separador Avançado. Aqui, pode copiar o código CSS que contém todos os estilos que adicionou.

Sempre que criar um novo formulário, basta colar o fragmento de código e o design do formulário utilizará os estilos do formulário anterior.
Do mesmo modo, pode conceber as suas notificações por correio eletrónico com modelos prontos a usar, o que é uma excelente forma de elevar o nível da sua marca em todos os canais de comunicação.
Certifique-se apenas de que adiciona um logótipo bem proporcionado ao seu e-mail (e sítio Web) para garantir uma clareza e capacidade de resposta perfeitas em todos os dispositivos.
Estilize o seu formulário de contacto agora
Perguntas frequentes sobre Designs de formulários de contacto
A conceção de formulários de contacto é um tópico de interesse popular entre os nossos leitores. Aqui estão as respostas a algumas perguntas comuns sobre o assunto:
É possível personalizar o WPForms?
Sim, você pode personalizar o WPForms extensivamente. O WPForms permite criar modelos personalizados e modificar estilos diretamente no Editor de Blocos do WordPress.
Esta flexibilidade permite-lhe adaptar os seus formulários ao design do seu sítio Web e às suas necessidades específicas. Consulte este guia para obter mais informações.
Como posso personalizar o meu formulário de contacto?
Para personalizar seu formulário de contato no WordPress usando o WPForms, comece selecionando um modelo ou criando um formulário do zero.
Pode adicionar, remover e reorganizar campos conforme necessário. Use o construtor de formulários WPForms para ajustar configurações como rótulos, espaços reservados e tamanhos de campo para personalização adicional.
Como estilizar um formulário de contacto no WordPress?
Para estilizar um formulário de contacto no WordPress, utilize o WPForms e o Editor de Blocos do WordPress. Com o WPForms, pode escolher entre modelos de formulários pré-concebidos e personalizáveis.
No Editor de blocos, pode adicionar CSS personalizado diretamente aos blocos de formulários para alterar tipos de letra, cores, preenchimento e muito mais, de modo a corresponder ao estilo do seu sítio.
Como alterar o design do formulário no WordPress?
Altere o design do seu formulário no WordPress usando o WPForms. Selecione o formulário que pretende editar e, em seguida, personalize o seu design no construtor de formulários.
Para um estilo detalhado, utilize o Editor de blocos do WordPress, onde pode alterar o tema do formulário, os estilos de campo, os estilos de etiqueta, os estilos de botão, os estilos de fundo e muito mais.
A seguir, saiba como criar um modelo de formulário com a marca
Os formulários de marca que reflectem as cores, o logótipo e o estilo da sua marca tornam os seus formulários mais pessoais e profissionais, aumentando o envolvimento e a confiança dos utilizadores.  Consulte este guia para obter instruções sobre como criar um modelo de formulário com a sua marca.
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.