Resumo de IA
Procurando inspiração para o design de formulários de contato para o seu site? Com alguns ajustes simples, você pode criar formulários online do jeito que quiser.
Neste artigo, mostrarei alguns exemplos legais de design de formulários de contato e darei dicas úteis para criar um no seu site.
Também mostrarei um método sem código muito útil para alterar o layout dos seus formulários. Pronto? Vamos lá!
Estilize Seu Formulário de Contato Agora! 😀
8 Designs de Formulário de Contato Para Você Copiar
Agora, vamos analisar alguns exemplos legais e as táticas principais que eles usam para se inspirar e recriá-los no seu site.
1. WPForms
Eu queria começar com a página de contato do WPForms, pois acredito que é 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 consultas de pré-venda.
Leia Também: Como Permitir que Visitantes Dupliquem Campos de Formulário
Por Que Acho Que Este Formulário de Contato Se Destaca
O formulário de contato não está imediatamente visível, 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 novos prospects usem o formulário principalmente, já que ele só é acessível pela seção de pré-venda.
Essa estratégia ajuda a direcionar rapidamente os usuários para a seção apropriada, otimizando o processo tanto para a empresa quanto para os indivíduos que entram em contato.
Na parte inferior da página, há também um convite sutil para os visitantes se juntarem ao WPForms VIP Circle, que é uma ótima maneira de baixa pressão para incentivar as pessoas a se juntarem a uma comunidade sem sobrecarregar o fluxo de contato.
Como Criar uma Página de Contato Assim
- Formulário de Contato Pop-up: Crie uma página de contato onde o formulário aparece apenas quando um botão específico é clicado. Isso mantém a página organizada e destaca outros elementos até que a interação seja necessária.
- Base de Conhecimento para Suporte ao Cliente: Implemente uma wiki ou base de conhecimento no seu site WordPress. Isso serve como uma área de autoajuda para clientes existentes, abordando perguntas e problemas comuns.
- Uso de Modelos: Escolha entre mais de 2.100 modelos de formulários WordPress para diversos fins, como feedback, marketing e operações comerciais. Esses modelos ajudam a configurar rapidamente formulários profissionais e funcionais. (experimente também estes modelos ocultos do WPForms para situações especiais).
- Tradução de Formulários: Para sites que atendem a falantes não nativos de inglês ou a públicos multilíngues, o WPForms permite a tradução fácil de formulários de contato para atender às diversas necessidades linguísticas.
Crie Seu Formulário WordPress Agora! 🙂
2. Stripe
Decidi focar na página de vendas da Stripe porque é um exemplo principal de uma página de contato especializada que lida eficientemente com consultas comerciais.
Para fazer o formulário de contato parecer curto, a Stripe usa um Formulário de Múltiplas Etapas em sua página de contato, o que certamente ajuda a reduzir sua taxa de abandono de formulário.
Por que Acho que Esta Página de Contato se Destaca
O que torna este formulário de contato único é que ele se concentra em coletar informações relevantes para a equipe de vendas da Stripe. Ele usa uma abordagem de Formulário de Múltiplas Etapas que primeiro pergunta 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 da Stripe visa obter uma boa compreensão de sua empresa e como a Stripe pode ajudá-lo.
Ao perguntar sobre o tamanho do seu negócio, receita e necessidades de integração, eles podem direcionar sua consulta para a pessoa mais apropriada.
Como Criar uma Página de Contato Assim
- Addon de Formulários de Leads do WPForms: Use o campo Quebra de Página ou o addon Formulários de Leads para dividir seu formulário em seções separadas.
- Foco 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. Apenas peça as informações essenciais que você precisa para qualificar leads.
- Rótulos e instruções claras: Use rótulos claros e concisos para cada campo e forneça quaisquer instruções necessárias para evitar confusão.
Crie Seu Formulário de Múltiplas Etapas Agora! 🙂
3. Legalia
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 o escritório e seus clientes.
O que se destaca nesta página é seu layout de várias colunas, com um mapa à esquerda para fornecer clareza de 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 sinto que incluir um mapa não só ajuda a localizar o escritório facilmente, mas também aumenta a legitimidade e acessibilidade do negócio.
O formulário em si também é bastante direto, solicitando informações essenciais sem sobrecarregar o usuário.
Como Criar uma Página de Contato Assim
- Planeje Seu Layout: Comece decidindo 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ção, mantendo-os na mesma página.
- Incorpore Mapas: Se sua empresa tem um local físico, incorporar 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 uma integração fácil.
- Simplifique o Formulário: Mantenha os campos do seu formulário no mínimo para evitar desencorajar contatos potenciais. Solicite apenas as informações mais críticas, como nome, e-mail e uma caixa de mensagem breve, o que acredito ser bastante suficiente.
Adicione um Mapa ao Seu Formulário de Contato! 🙂
4. Search Engine Journal
O formulário de contato na página "Fale Conosco" do Search Engine Journal se destaca por seus recursos abrangentes, adaptados a uma variedade de necessidades dos usuários.
Este formulário incorpora funcionalidades avançadas, como captcha para segurança, opção de upload de arquivos e categorização de consultas.
Por Que Acho Que Este Formulário de Contato Se Destaca
A categorização é a parte que quero destacar. O SEJ pergunta de antemão se você está escrevendo sobre publicidade, um problema técnico ou outra coisa.
Esse único menu suspenso provavelmente economiza uma enorme quantidade de tempo de triagem para a equipe deles, pois o roteamento ocorre antes que a mensagem chegue a qualquer caixa de entrada.
O CAPTCHA está realizando o trabalho chato, mas necessário, de reduzir o volume de spam. Um site com o tráfego do SEJ é bombardeado por bots caso contrário.
E o campo de upload de arquivos é genuinamente útil para o tipo de envios que uma editora recebe: capturas de tela, apresentações, às vezes rascunhos de artigos.
Como Criar uma Página de Contato Assim
- Implemente 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.
- Foco na Experiência do Usuário: Projete seu formulário pensando no usuário. Certifique-se de que seja fácil de navegar, os campos estejam claramente rotulados e as instruções sejam diretas para evitar confusão. Use um campo suspenso para categorização das consultas do usuário.
- Adicione um Campo de Upload de Arquivo: Se você deseja dar às pessoas que entram em contato a oportunidade de anexar arquivos às suas consultas, você pode usar o WPForms para adicionar um campo de Upload de Arquivo ao seu formulário, que é bastante fácil de usar.
Configure o CAPTCHA no 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 complicações.
Por Que Acho Que Este Formulário de Contato Se Destaca
O design de várias colunas é o que realmente diferencia este formulário de contato, dando-lhe essa sensação descomplicada e arejada.
Ele permite que os usuários escaneiem rapidamente a página e encontrem exatamente o que precisam sem ter que peneirar um monte de 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 Assim
- Layout de Várias Colunas: Comece decidindo um layout que equilibre a interface do usuário e a estética do design. Um layout de várias colunas pode ser muito eficaz para separar visualmente diferentes tipos de informação, mantendo-os na mesma página.
- Uso Estratégico de Imagens: Escolha imagens que reflitam sua marca e se relacionem com o propósito da página. Adicionar uma imagem ao seu formulário de contato pode torná-lo mais envolvente e interativo no geral.
Adicione Imagens ao Seu Formulário de Contato! 🙂
6. Medium
A experiência de contato da Medium é interessante porque não é realmente um formulário de contato. É um centro de ajuda primeiro, e só se você não encontrar o que precisa, você terá a opção de enviar uma solicitação.
A página apresenta links diretos para tópicos de ajuda populares, pesquisa e FAQs. Você pode categorizar o tipo de ajuda que precisa antes de qualquer outra coisa.
Por que Acho que Esta Página de Contato se Destaca
A página de contato da Medium geralmente inclui menus suspensos ou caixas de seleção que permitem aos usuários categorizar suas consultas. Muitos centros de ajuda fornecem links para perguntas frequentes ou artigos relacionados antes de permitir o envio do formulário.
No entanto, a principal desvantagem da página é que a Medium não usa um formulário de contato. Isso pode ser frustrante para usuários que precisam urgentemente entrar em contato com suas equipes de suporte.
Como Criar uma Página de Contato Assim
- Incorpore Opções de Autoajuda: Integre sua página de contato com sua base de conhecimento. Forneça artigos ou links para FAQs relacionados às seleções ou entrada do usuário, potencialmente resolvendo a consulta.
- Mostre o formulário de qualquer maneira: Não enterre o formulário tão profundamente que casos de suporte reais desistam. Um link visível "Ainda preciso de ajuda" na parte inferior é a válvula de escape.
7. White Frontier
A White Frontier é uma cervejaria artesanal suíça, e sua página de contato usa um formulário transparente sobreposto a uma imagem de fundo. Se você deseja um formulário de contato que não fique em uma caixa branca simples, este é o padrão a ser observado.
Por que Acho que Esta Página de Contato se Destaca
Um formulário transparente mantém a personalidade visual da marca na página. Você não perde a fotografia de fundo para um contêiner de formulário cinza gigante. Para estilo de vida, hospitalidade, alimentos e bebidas, ou qualquer lugar onde a imagem da marca tenha muito peso, isso importa.
A imagem de fundo deve suportar texto legível, ou o formulário se torna ilegível. A White Frontier usa uma fotografia de cerveja escurecida, o que dá aos rótulos brancos do formulário contraste suficiente para permanecerem legíveis. Se você copiar este padrão sobre uma fotografia movimentada, precisará de uma sobreposição para manter as coisas legíveis.
Como Criar uma Página de Contato Assim
- Estilize com CSS: O WPForms permite ajustar estilos de contêiner, fundo e campo diretamente do editor de blocos, sem necessidade de CSS. Para looks totalmente personalizados, consulte nosso guia para iniciantes sobre como estilizar seus formulários com CSS.
- Escolha um fundo que suporte texto: Uma foto de baixo contraste ou uma com uma sobreposição escura aplicada. Teste no celular, onde o fundo geralmente é cortado de forma diferente do desktop.
- Salve seus estilos para reutilização: Depois de ajustar suas configurações de estilo, copie o CSS que o editor de blocos gera e reutilize-o em todos os formulários do site para que o design permaneça consistente.
8. HubSpot
A página de contato da HubSpot oferece várias maneiras de entrar em contato na mesma página: um formulário de vendas, um chat de vendas, um número de telefone e links para a base de conhecimento de suporte.
Este é o padrão correto quando você tem compradores e clientes existentes com necessidades muito diferentes, e você não quer que nenhum dos grupos se sinta como uma reflexão tardia.
Por que Acho que Esta Página de Contato se Destaca
O HubSpot trata o contato como um problema de roteamento primeiro. A página é organizada pelo que você deseja fazer (falar com vendas, falar com suporte, obter uma demonstração, encontrar um recurso), e cada opção tem sua própria chamada clara para ação. Não há um único mega-formulário fingindo servir a todos.
O chat de vendas fica ao lado do formulário de vendas, o que é um reconhecimento silencioso de que alguns compradores querem digitar uma consulta detalhada e outros querem fazer uma pergunta rápida antes de se comprometerem. Oferecer ambos não é redundante, é cobrir o espectro.
Para empresas menores, isso pode ser exagero. Mas o princípio se aplica em menor escala. Mesmo em um site pequeno, distinguir "quero comprar" de "preciso de ajuda com o que já comprei" antes que o formulário de contato carregue torna ambos os fluxos melhores.
Como recriar isso no WordPress
- Canais com abas ou agrupados: Use um bloco com abas ou uma grade simples de cartões de CTA para permitir que os visitantes escolham seu caminho. Cada cartão leva ao seu próprio formulário ou página.
- Formulários diferentes para intenções diferentes: Tenha um formulário "Falar com Vendas" com campos de qualificação de vendas e um formulário "Solicitação de Suporte" com números de pedido e nomes de produtos. Não os misture.
- Mostre alternativas perto do formulário: Um número de telefone, um endereço de e-mail, um link de chat. Alguns visitantes sempre preferirão pular o formulário, e oferecer a alternativa reduz a frustração sem prejudicar o envio de formulários.
Como Personalizar os Designs do Seu Formulário de Contato
Antes de começar, certifique-se de que o WPForms está instalado e ativado em seu site WordPress e que você verificou sua licença.
Em seguida, crie um novo formulário e adicione-o a uma página ou postagem. No editor de blocos, clique no formulário para abrir opções de estilo adicionais para o bloco WPForms.
Você pode alterar o tema de cores, campos do formulário, rótulos, botões e os estilos de contêiner e 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 seu formulário.
- Na seção Estilos de Campo, você encontrará as opções para ajustar o tamanho, borda, espessura da borda, raio da borda e cores dos campos do seu formulário.
- Alterar o tamanho e a cor dos rótulos do seu formulário é possível na seção Estilos de Rótulo. As opções de tamanho disponíveis incluem Pequeno, Médio e Grande.
- Em Estilos de Botão, você pode alterar o tamanho, cor, borda, espessura da borda, raio da borda e estilo da borda dos seus botões.
- As configurações de Estilos de Contêiner permitem que você altere a cor, sombra, preenchimento, estilo, tamanho e raio da borda ao redor do contêiner do seu formulário.
- As configurações de Estilos de Plano de Fundo oferecem controle sobre a imagem e a cor de fundo do seu formulário para dar a ele uma aparência de marca.
Depois de estilizar seu formulário de contato, clique na guia Avançado. Aqui, você pode copiar o código CSS contendo todos os estilos que você adicionou.
Sempre que 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 estilizar suas notificações por e-mail com modelos prontos, o que é uma ótima maneira de aprimorar sua marca em todos os canais de comunicação.
Apenas certifique-se de adicionar um logotipo bem proporcionado ao seu e-mail (e site) para garantir clareza e responsividade perfeitas em todos os dispositivos.
Perguntas Frequentes Sobre o Design de Formulários de Contato
O design de formulários de contato é um dos tópicos sobre os quais mais me perguntam. Aqui estão as respostas para as perguntas que surgem repetidamente.
O que torna um bom design de formulário de contato?
Um bom design de formulário de contato mantém os campos no mínimo que um visitante pode suportar, rotula cada entrada claramente, parece integrado ao restante do seu site e coloca o botão de envio em um local óbvio. O estilo visual importa menos do que as escolhas estruturais ao redor dele.
Quantos campos um formulário de contato deve ter?
Três a cinco campos é o ponto ideal para a maioria dos formulários de contato de pequenas empresas. Nome, e-mail, mensagem é o básico. Adicione um assunto ou um menu suspenso de tipo de consulta se você lida com diferentes tipos de solicitação e adicione um campo de telefone apenas se você realmente ligar de volta para as pessoas.
É possível personalizar o WPForms?
Sim, o WPForms é construído para ser personalizado sem código. Você pode ajustar estilos de campos, estilos de rótulos, estilos de botões, estilos de contêineres e plano de fundo diretamente no editor de blocos do WordPress. Para alterações mais profundas, você também pode colar CSS personalizado ou criar seus próprios modelos de formulário.
Como personalizo meu formulário de contato?
Comece escolhendo um modelo ou construindo um formulário do zero no construtor de formulários do WPForms. Adicione, remova e reorganize campos conforme necessário. Em seguida, ajuste rótulos, placeholders e tamanhos de campos no construtor de formulários e use os controles de estilo do editor de blocos para definir as cores e formas que correspondem à sua marca.
Como estilizo um formulário de contato no WordPress?
O WPForms e o editor de blocos do WordPress cuidam da maior parte da estilização do formulário sem nenhum código. Escolha um tema de cores pré-construído para começar, depois ajuste campos, rótulos, botões e planos de fundo no editor de blocos. Para designs exclusivos, cole CSS personalizado no seu bloco de formulário.
Como altero o design do formulário no WordPress?
Abra o formulário que deseja editar no WPForms, personalize o design no construtor de formulários para layout e arranjo de campos, e no editor de blocos para estilos visuais. Para estilização detalhada, use os controles de tema, campo, rótulo, botão e plano de fundo do editor de blocos.
Em seguida, Crie uma Página de Contato Excepcional ao Redor do Seu Formulário
Se você está pronto para juntar tudo o que cobrimos aqui, meu guia para criar uma página de Contato excepcional o orienta pelos elementos de suporte (títulos, sinais de confiança, canais alternativos) que cercam o próprio formulário.
Se você ainda não criou seu formulário, o lugar mais rápido para começar é o modelo de formulário de contato simples do WPForms. Você pode criar um formulário de contato simples no WordPress em cerca de cinco minutos a partir daí.
Crie Seu Formulário de Contato Agora
Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
