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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Hamza é redator da equipe do WPForms e também é especializado em tópicos relacionados a marketing digital, segurança cibernética, plug-ins do WordPress e sistemas ERP.Saiba mais
O melhor plug-in de criação de formulários de arrastar e soltar para WordPress
Fácil, rápido e seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.
Quer melhorar seu jogo de mídia social? Conectar seu site do WordPress às suas contas de mídia social pode ajudá-lo a otimizar suas tarefas de marketing de mídia social e criar uma marca on-line mais integrada. Neste artigo, compartilhamos os principais plugins de mídia social para WordPress para ajudá-lo a manter seu site e suas redes sociais em sincronia!
Você não está recebendo notificações por e-mail dos seus formulários de contato do WordPress? Infelizmente, o problema do formulário de contato do WordPress não enviar e-mail é muito comum.
No entanto, você pode corrigir rapidamente esse problema e começar a receber esses e-mails configurando o Simple Mail Transfer Protocol (SMTP) em seu site. Este tutorial mostra exatamente como corrigir o problema de envio de e-mail do formulário de contato do WordPress.
Usado para armazenar dados de variáveis personalizadas no nível do visitante.
2 anos
__utmz
Armazena a origem do tráfego ou a campanha que explica como o usuário chegou ao seu site.
6 meses
_ga
Usado para distinguir usuários.
2 anos
_gat
Usado para limitar a taxa de solicitação.
1 minuto
_gid
Usado para distinguir usuários.
24 horas
__utma
Usado para distinguir usuários.
Persistente
__utmb
Usado para determinar novas sessões/visitas.
30 minutos
__utmc
Usado para determinar se o usuário está em uma nova sessão/visita.
Sessão
__utmt
Usado para limitar a taxa de solicitação.
10 minutos
Os cookies de marketing são usados para acompanhar os visitantes dos sites. A intenção é mostrar anúncios que sejam relevantes e atraentes para o usuário individual.
OptinMonster é uma poderosa ferramenta de geração de leads que ajuda empresas a converter visitantes em assinantes e clientes.
Esse cookie é definido pela X para identificar e rastrear o visitante do site. Registra se um usuário está conectado à plataforma X e coleta informações sobre preferências de anúncios.
2 anos
personalization_id
Valor exclusivo com o qual os usuários podem ser identificados pela X. As informações coletadas são usadas para personalizar os serviços da X, incluindo tendências, histórias, anúncios e sugestões da X.
2 anos
referenciador externo
Nosso site usa botões X para permitir que nossos visitantes sigam nossos feeds X promocionais e, às vezes, incorporem feeds em nosso site.
