Procurando inspirações de design de formulários de contato para o seu site? Com alguns ajustes simples, você pode criar formulários on-line do jeito que quiser.
Neste artigo, mostrarei alguns exemplos interessantes de design de formulários de contato e darei dicas úteis para criar um em seu site.
Estilize seu formulário de contato agora! 🙂
Também mostrarei um método muito útil e sem código para alterar o layout de seus formulários. Pronto? Vamos mergulhar de cabeça!
Neste artigo
7 Designs de formulários de contato que você pode roubar
Agora, vamos examinar alguns exemplos interessantes e as principais táticas que eles usam para inspirá-los e recriá-los em seu site.
1. WPForms
Eu queria começar com a página de contato do WPForms, pois acredito que ela seja um excelente exemplo para produtos SaaS, sites de plugins e outras pequenas empresas.
A seção superior desta página é dividida em duas partes: uma para clientes existentes com perguntas técnicas e outra para perguntas de pré-venda.
Leia também: Como permitir que os visitantes dupliquem campos de formulário
Por que acho que este formulário de contato se destaca
O formulário de contato não fica visível imediatamente e só aparece quando alguém clica no botão "Preencher um formulário" na seção "Tenho uma pergunta básica".
Essa escolha de design minimiza o tamanho da página e garante que os novos clientes em potencial usem o formulário principalmente porque ele só pode ser acessado na seção de pré-venda.
Essa estratégia ajuda a direcionar rapidamente os usuários para a seção apropriada, simplificando o processo tanto para a empresa quanto para as pessoas que fazem contato.
Além disso, na parte inferior da página, há um link de chamada para ação (CTA) que convida os visitantes a participar do Círculo VIP do WPForms.
Como criar uma página de contato como esta
- Formulário de contato pop-up: Crie uma página de contato em que o formulário apareça somente quando um botão específico for clicado. Isso mantém a página organizada e enfatiza 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 em seu site WordPress. Isso serve como uma área de autoajuda para os clientes existentes, abordando questões e problemas comuns.
- Uso de modelos: Escolha entre mais de 2.000 modelos de formulários do 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 esses modelos ocultos do WPForms para situações especiais).
- Tradução de formulários: Para sites que atendem a públicos que não falam inglês ou multilíngues, o WPForms permite a fácil tradução de formulários de contato para atender a diversas necessidades linguísticas.
Crie seu formulário WordPress agora
2. Listras
Decidi me concentrar na página de vendas de contato do Stripe porque ela é um excelente exemplo de uma página de contato especializada que lida com eficiência com consultas comerciais.
Para que o formulário de contato pareça curto, a Stripes usa um formulário de várias etapas na página de contato, o que certamente ajuda a reduzir a taxa de abandono do formulário.
Por que acho que esta página de contato se destaca
O que torna esse formulário de contato único é que ele se concentra na coleta de informações relevantes para a equipe de vendas do Stripe.
Ele usa uma abordagem de formulário em várias etapas que primeiro solicita seu e-mail de trabalho e país/região para capturar suas informações.
Depois de clicar no botão continuar, o formulário de contato do Stripe tem como objetivo obter um bom entendimento da sua empresa e de como o Stripe pode ajudá-lo.
Ao perguntar sobre o tamanho da sua empresa, a receita e as necessidades de integração, eles podem encaminhar sua consulta para a pessoa mais adequada.
Como criar uma página de contato como esta
- Addon WPForms Lead Forms: Use o campo Page Break ou o complemento Lead Forms para dividir o formulário em seções separadas.
- Concentre-se em informações relevantes: Considere quais informações sobre clientes potenciais seriam mais úteis para sua equipe de vendas.
- Mantenha a simplicidade: Não sobrecarregue os usuários com muitos campos de formulário. Solicite apenas as informações essenciais de que você precisa para qualificar os leads.
- Rótulos e instruções claros: Use rótulos claros e concisos para cada campo e forneça as instruções necessárias para evitar confusão.
Crie seu formulário de várias etapas agora
3. Legalidade
O formulário de contato na página "Fale conosco" da Legalia Corp é uma interface bem pensada, projetada para facilitar a comunicação perfeita entre a empresa e seus clientes.
O que se destaca nessa página é o layout de várias colunas, com um mapa à esquerda para esclarecer a localização e um formulário de contato estruturado à direita.
Por que acho que este formulário de contato se destaca
O uso de um layout de várias colunas é particularmente eficaz, pois divide o formulário de forma organizada em duas seções diferentes.
Isso permite que os usuários separem visualmente as informações geográficas dos campos de contato, o que é uma abordagem interessante.
Também acho que a inclusão de um mapa não só ajuda a localizar facilmente a empresa, mas também aumenta a legitimidade e a acessibilidade do negócio.
O formulário em si também é bastante simples, solicitando informações essenciais sem sobrecarregar o usuário.
Como criar uma página de contato como esta
- Planeje seu layout: Comece decidindo sobre um layout que equilibre a interface do usuário e a estética do design. Um layout dividido pode ser muito eficaz para separar visualmente diferentes tipos de informações e, ao mesmo tempo, mantê-las na mesma página.
- Incorporar mapas: Se a sua empresa tiver um local físico, a incorporação de um mapa na página de contato pode aumentar significativamente a confiança do usuário e simplificar o processo de localização. Use ferramentas como o Google Maps para facilitar a integração.
- Simplifique o formulário: Reduza os campos do formulário ao mínimo possível para evitar a dissuasão de possíveis contatos. Solicite apenas as informações mais importantes, como nome, e-mail e uma breve caixa de mensagem, o que, na minha opinião, é suficiente.
Adicione um mapa ao seu formulário de contato
4. Jornal do mecanismo de pesquisa
O formulário de contato da página "Fale conosco" do Search Engine Journal se destaca por seus recursos abrangentes adaptados a uma variedade de necessidades do usuário.
Esse formulário incorpora funcionalidades avançadas, como captcha para segurança, uma opção de upload de arquivo e categorização de consultas.
Leia também: Como forçar o espaçamento entre os campos.
Por que acho que este formulário de contato se destaca
Gosto muito de como o Search Engine Journal introduziu várias opções de categorização com base no tipo de consulta do usuário.
Seja para publicidade, para relatar um problema técnico ou outras preocupações, há 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 cheguem à equipe do SEJ.
Por fim, os usuários podem anexar arquivos às suas consultas, o que é particularmente vantajoso para o envio de documentos que apoiem suas mensagens ou solicitações.
Como criar uma página de contato como esta
- Implementar recursos de segurança: Inclua medidas de segurança como um CAPTCHA com a ajuda do WPForms para proteger seu site contra spam e abuso, o que ajudará a manter a integridade de suas comunicações.
- Concentre-se na experiência do usuário: Projete o formulário tendo em mente o usuário. Verifique se ele é fácil de navegar, se os campos estão claramente identificados e se as instruções são diretas para evitar confusão. Use um campo suspenso para categorizar as consultas dos usuários.
- Adicionar um campo de upload de arquivo: Se quiser dar às pessoas que entrarem em contato com você a oportunidade de anexar campos às suas perguntas, poderá usar o WPForms para adicionar um campo de upload de arquivo ao seu formulário, o que é bastante fácil de usar.
Configure o CAPTCHA em seu formulário do WordPress
5. Marvel
A Marvel é uma empresa de design de software que usa um layout de várias colunas em seu formulário de contato com uma imagem à direita.
O design é limpo e moderno, garantindo que os usuários possam encontrar as informações de que precisam sem problemas.
Por que acho que este formulário de contato se destaca
O design de várias colunas é o que realmente diferencia esse formulário de contato e dá a ele uma sensação de desorganização e respiração.
Isso permite que os usuários examinem rapidamente a página e encontrem exatamente o que precisam, sem precisar examinar muito texto.
A imagem no lado direito do formulário não é apenas visualmente atraente, mas também relevante para os negócios da Marvel, mostrando seu compromisso com o design.
Como criar uma página de contato como esta
- Layout de várias colunas: Comece decidindo por um layout que equilibre a interface do usuário e a estética do design. Um layout com várias colunas pode ser muito eficaz para separar visualmente diferentes tipos de informações e, ao mesmo tempo, mantê-las na mesma página.
- Uso estratégico de imagens: Escolha imagens que reflitam sua marca e estejam relacionadas ao objetivo da página. Adicionar uma imagem ao seu formulário de contato pode torná-lo mais envolvente e interativo em geral.
Adicione imagens ao seu formulário de contato
6. Médio
A página de contato em uma central de ajuda como a do Medium é crucial para fornecer suporte direto e orientação aos usuários.
Ele contém links diretos para tópicos de ajuda e respostas populares. Os usuários podem enviar facilmente uma solicitação se não conseguirem encontrar respostas para suas perguntas.
Por que acho que esta página de contato se destaca
A página de contato média normalmente inclui menus suspensos ou caixas de seleção que permitem que os usuários categorizem suas consultas.
Muitas centrais de ajuda fornecem links para perguntas frequentes ou artigos relacionados antes de permitir o envio de formulários.
No entanto, a principal desvantagem da página deles é que o Medium não usa um formulário de contato. Isso pode ser frustrante para os usuários que precisam entrar em contato com suas equipes de suporte com urgência.
Como criar uma página de contato como esta
- Incorporar opções de autoajuda: Integre sua página de contato à sua base de conhecimento. Forneça artigos ou links para perguntas frequentes relacionadas às seleções ou entradas do usuário, possivelmente resolvendo a consulta.
7. Fronteira branca
Deseja colocar um formulário em cima de uma imagem de fundo? Está procurando um design de formulário de contato que use CSS? Eu tenho tudo o que você precisa!
A White Frontier usa um formulário transparente em sua página de contato, de modo que o formulário de contato combina perfeitamente com o design do plano de fundo.
Ao testar esse design em seu site, certifique-se de colocar uma imagem no plano de fundo. Caso contrário, você não conseguirá ver o formulário.
Como criar uma página de contato como esta
Para este exemplo, basta copiar o CSS de design do formulário de contato abaixo. Para obter mais detalhes, consulte nosso guia para iniciantes sobre como estilizar seus formulários com CSS.
Design do formulário de contato 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
Fazer personalizações em todo o site em seus formulários é muito fácil quando você tem os trechos de CSS que deseja usar.
Tudo o que você precisa fazer é copiar os trechos de CSS que deseja usar e colá-los em seu site usando o personalizador de temas do WordPress ou o editor de temas.
Um método ainda mais fácil é usar um plug-in como o WPCode, que permite colar diferentes tipos de trechos de código em seu site.
Você também pode ter vários formulários em seu site e desejar alterar o estilo de apenas um deles. Mostraremos a seguir como fazer isso.
Como personalizar os designs dos formulários de contato
Antes de começar, certifique-se de que o WPForms esteja instalado e ativado em seu site WordPress e que você tenha verificado 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 adicionais de estilo para o bloco WPForms.
Você pode alterar o tema de cores, os campos de formulário, os rótulos, os botões e os estilos do contêiner e do plano de fundo sem escrever nenhum CSS nas configurações do bloco WPForms.
- Você pode escolher um tema de cores predefinido na configuração Temas para alterar o estilo dos campos, rótulos, botões, contêineres e planos de fundo do formulário.
- Na seção Field Styles (Estilos de campo ), você encontrará as opções para ajustar o tamanho, a borda, o tamanho da borda, o raio da borda e as cores dos campos do formulário.
- É possível alterar o tamanho e a cor dos rótulos dos formulários na seção Label Styles (Estilos de rótulos ). As opções de tamanho disponíveis incluem Pequeno, Médio e Grande.
- Em Button Styles (Estilos de botão), você pode alterar o tamanho, a cor, a borda, o tamanho da borda, o raio da borda e o estilo da borda dos botões.
- As configurações de Container Styles permitem alterar a cor, a sombra, o preenchimento, o estilo, o tamanho e o raio da borda ao redor do contêiner do formulário.
- As configurações de Background Styles (Estilos de plano de fundo) permitem controlar a imagem e a cor do plano de fundo do formulário para dar a ele uma aparência de marca.
Depois de estilizar o formulário de contato, clique na guia Advanced (Avançado ). Aqui, você pode copiar o código CSS que contém todos os estilos que você adicionou.
Sempre que você criar um novo formulário, basta colar o trecho de código, e o design do formulário usará os estilos do formulário anterior.
Da mesma forma, você pode criar suas notificações por e-mail com modelos prontos, o que é uma ótima maneira de elevar o nível da sua marca em todos os canais de comunicação.
Certifique-se apenas de adicionar um logotipo bem proporcionado ao seu e-mail (e site) para garantir clareza e capacidade de resposta perfeitas em todos os dispositivos.
Estilize seu formulário de contato agora
Perguntas frequentes sobre Designs de formulários de contato
O design de formulários de contato é um tópico de interesse popular entre nossos leitores. Aqui estão as respostas para algumas dúvidas comuns sobre o assunto:
Você pode personalizar o WPForms?
Sim, você pode personalizar amplamente o WPForms. O WPForms permite que você crie modelos personalizados e modifique estilos diretamente no editor de blocos do WordPress.
Essa flexibilidade garante que você possa personalizar seus formulários para que correspondam ao design do seu site e atendam às suas necessidades específicas. Confira este guia para obter mais informações.
Como posso personalizar meu formulário de contato?
Para personalizar seu formulário de contato no WordPress usando o WPForms, comece selecionando um modelo ou criando um formulário do zero.
Você pode adicionar, remover e reorganizar os 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 contato no WordPress?
Para estilizar um formulário de contato no WordPress, use o WPForms e o WordPress Block Editor. Com o WPForms, você pode escolher entre modelos de formulários pré-projetados e personalizáveis.
No Block Editor, você pode adicionar CSS personalizado diretamente aos blocos de formulário para alterar fontes, cores, preenchimento e muito mais, de acordo com o estilo do seu site.
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 deseja editar e, em seguida, personalize seu design no construtor de formulários.
Para obter um estilo detalhado, use o WordPress Block Editor, onde você pode alterar o tema do formulário, os estilos de campo, os estilos de rótulo, os estilos de botão, os estilos de plano de fundo e muito mais.
Em seguida, saiba como criar um modelo de formulário com a marca
Os formulários de marca que refletem as cores, o logotipo e o estilo da sua marca fazem com que seus formulários pareçam mais pessoais e profissionais, aumentando o envolvimento e a confiança do usuário. Confira este guia para obter instruções sobre como criar um modelo de formulário com a sua marca.
Crie seu formulário WordPress agora
Pronto para criar seu formulário? Comece hoje mesmo com o plug-in de criação de formulários mais fácil do WordPress. O WPForms Pro inclui vários modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para obter mais tutoriais e guias gratuitos sobre o WordPress.
