Resumo de IA
Procura inspiração para o design de formulários de contacto para o seu website? Com alguns ajustes simples, pode criar formulários online como desejar.
Neste artigo, vou mostrar-lhe alguns exemplos de design de formulários de contacto interessantes e dar dicas úteis para criar um no seu website.
Também lhe mostrarei um método sem código muito útil para alterar o layout dos seus formulários. Pronto? Vamos a isso!
Estilize o Seu Formulário de Contacto Agora! 😀
8 Designs de Formulários de Contacto Que Pode Copiar
Agora, vamos analisar alguns exemplos interessantes e as táticas chave que utilizam para se inspirar e recriá-los no seu site.
1. WPForms
Queria começar com a página de contacto da WPForms, pois acredito que é um excelente exemplo para produtos SaaS, websites 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 inquéritos de pré-venda.
Leia Também: Como Permitir Que os Visitantes Dupliquem Campos de Formulário
Por Que 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 'Complete a Form' (Preencher um Formulário) na secção 'I have a basic question' (Tenho uma questão básica).
Esta escolha de design minimiza o tamanho da página e garante que os novos potenciais clientes utilizam o formulário principalmente, uma vez que só é acessível através da secção de pré-venda.
Esta estratégia ajuda a direcionar rapidamente os utilizadores para a secção apropriada, otimizando o processo tanto para a empresa como para os indivíduos que entram em contacto.
Na parte inferior da página, há também um convite discreto para os visitantes se juntarem ao WPForms VIP Circle, que é uma forma agradável e sem pressão de incentivar as pessoas a aderir a uma comunidade sem sobrecarregar o fluxo de contacto.
Como Criar uma Página de Contacto Como Esta
- Formulário de Contacto Pop-up: Desenhe uma página de contacto onde o formulário aparece apenas quando um botão específico é clicado. 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 uma wiki ou base de conhecimento no seu site WordPress. Isto serve como uma área de autoajuda para clientes existentes, abordando questões e problemas comuns.
- Utilização de Modelos: Escolha entre mais de 2.100 modelos de formulários WordPress para vários fins, como feedback, marketing e operações comerciais. Estes modelos ajudam a configurar rapidamente formulários de aspeto profissional e funcionais. (experimente também estes modelos ocultos do WPForms para situações especiais).
- Tradução de Formulários: Para websites que servem falantes não ingleses ou públicos multilíngues, o WPForms permite tradução fácil de formulários de contacto para satisfazer diversas necessidades linguísticas.
Crie o Seu Formulário WordPress Agora! 🙂
2. Stripe
Decidi focar-me na página de contacto de vendas da Stripe porque é um exemplo primordial de uma página de contacto especializada que lida eficientemente com inquéritos comerciais.
Para tornar o formulário de contato mais conciso, a Stripe utiliza um Formulário de Várias Etapas na sua página de contato, o que certamente ajuda a reduzir a sua taxa de abandono de formulários.
Por que Considero Esta Página de Contato Destacada
O que torna este formulário de contato único é que ele se concentra na recolha de informações relevantes para a equipa de vendas da Stripe. Utiliza uma abordagem de Formulário de Várias Etapas que primeiro pede o seu e-mail de trabalho e país/região para capturar as suas informações.
Depois de clicar no botão continuar, o formulário de contato da Stripe visa obter uma boa compreensão da sua empresa e de como a Stripe pode ajudá-lo.
Ao perguntar sobre o tamanho da sua empresa, receita e necessidades de integração, permite-lhes encaminhar o seu pedido para a pessoa mais adequada.
Como Criar uma Página de Contacto Como Esta
- Add-on WPForms Lead Forms: Use o campo Quebra de Página ou o add-on Lead Forms para dividir o seu formulário em secções separadas.
- Foco em informações relevantes: Considere que informações sobre potenciais clientes seriam mais úteis para a sua equipa de vendas.
- Mantenha a simplicidade: Não sobrecarregue os utilizadores com demasiados campos de formulário. Peça apenas as informações essenciais de que necessita 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 o Seu Formulário de Várias Etapas Agora! 🙂
3. Legalia
O formulário de contato na página "Contact Us" da Legalia Corp é uma interface bem pensada, concebida para facilitar a comunicação fluida entre a empresa e os seus clientes.
O que se destaca nesta página é o 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 Contacto se Destaca
O uso de um layout de várias colunas é particularmente eficaz, pois divide o formulário de forma organizada em duas secções distintas.
Isto permite aos utilizadores separar visualmente a informação geográfica dos campos de contato, o que é uma abordagem interessante.
Sinto também que a inclusão de um mapa não só ajuda a localizar facilmente a empresa, mas também aumenta a legitimidade e acessibilidade do negócio.
O formulário em si é também bastante direto, pedindo informações essenciais sem sobrecarregar o utilizador.
Como Criar uma Página de Contacto Como Esta
- Planeie o Seu Layout: Comece por decidir um layout que equilibre a interface do utilizador 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 o seu negócio tem uma localização física, incorporar um mapa na página de contato pode aumentar significativamente a confiança do utilizador e simplificar o processo de localização. Utilize ferramentas como o Google Maps para uma fácil integração.
- Simplifique o Formulário: Mantenha os seus campos de formulário no mínimo para evitar dissuadir 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 contacto na página “Contacte-nos” do Search Engine Journal destaca-se pelas suas funcionalidades abrangentes, adaptadas a uma variedade de necessidades dos utilizadores.
Este formulário incorpora funcionalidades avançadas como captcha para segurança, uma opção de carregamento de ficheiros e categorização de consultas.
Por Que Acho Que Este Formulário de Contacto se Destaca
A categorização é a parte que quero destacar. O SEJ pergunta desde o início se está a escrever sobre publicidade, um problema técnico ou outra coisa.
Essa única lista pendente provavelmente poupa à equipa deles uma enorme quantidade de tempo de triagem, porque o encaminhamento acontece antes de a mensagem chegar a qualquer caixa de entrada.
O CAPTCHA está a fazer o trabalho aborrecido mas necessário de manter o volume de spam baixo. Um site com o tráfego do SEJ seria inundado por bots caso contrário.
E o campo de carregamento de ficheiros é genuinamente útil para o tipo de submissões que um editor recebe, capturas de ecrã, apresentações de propostas, por vezes artigos em rascunho.
Como Criar uma Página de Contacto Como Esta
- Implementar Funcionalidades de Segurança: Inclua medidas de segurança como um CAPTCHA com a ajuda do WPForms para proteger o seu site de spam e abuso, o que ajudará a manter a integridade das suas comunicações.
- Foco na Experiência do Utilizador: Desenhe o seu formulário com o utilizador em mente. Certifique-se de que é fácil de navegar, os campos estão claramente rotulados e as instruções são diretas para evitar confusão. Utilize um campo de lista pendente para a categorização das consultas dos utilizadores.
- Adicionar um Campo de Carregamento de Ficheiros: Se quiser dar às pessoas que o contactam a oportunidade de anexar ficheiros às suas consultas, pode usar o WPForms para adicionar um campo de Carregamento de Ficheiros ao seu formulário, que é bastante fácil de usar.
Configure o CAPTCHA no seu Formulário WordPress! :)
5. Marvel
A Marvel é uma empresa de design de software que utiliza um layout de várias colunas no seu formulário de contacto com uma imagem à direita. O design é limpo e moderno, garantindo que os utilizadores podem encontrar a informação de que necessitam sem complicações.
Por Que Acho Que Este Formulário de Contacto se Destaca
O design de várias colunas é o que realmente diferencia este formulário de contacto, e dá-lhe essa sensação de desorganização e espaço.
Permite aos utilizadores digitalizar rapidamente a página e encontrar exatamente o que precisam sem ter de peneirar muita informação.
A imagem no lado direito do formulário não é apenas visualmente apelativa, mas também relevante para o negócio da Marvel, mostrando o seu compromisso com o design.
Como Criar uma Página de Contacto Como Esta
- Layout de Várias Colunas: Comece por decidir um layout que equilibre a interface do utilizador 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 a sua marca e se relacionem com o propósito da página. Adicionar uma imagem ao seu formulário de contacto pode torná-lo mais envolvente e interativo no geral.
Adicione Imagens ao seu Formulário de Contacto! :)
6. Medium
A experiência de contacto do Medium é interessante porque não é realmente um formulário de contacto. É um centro de ajuda primeiro, e só se não conseguir encontrar o que precisa é que terá a opção de submeter um pedido.
A página começa com links diretos para tópicos de ajuda populares, pesquisa e FAQs. Pode categorizar que tipo de ajuda necessita antes de mais nada.
Por que Considero Esta Página de Contato Destacada
A página de contacto de média inclui tipicamente menus suspensos ou caixas de seleção que permitem aos utilizadores categorizar as suas questões. Muitos centros de ajuda fornecem links para perguntas frequentes ou artigos relacionados antes de permitir o envio 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 utilizadores que precisam urgentemente de contactar as suas equipas de apoio.
Como Criar uma Página de Contacto Como Esta
- Incorpore Opções de Autoajuda: Integre a sua página de contacto com a sua base de conhecimento. Forneça artigos ou links para FAQs relacionados com as seleções ou introduções do utilizador, resolvendo potencialmente a questão.
- Mostre o formulário de qualquer forma: Não enterre o formulário tão profundamente que os casos de apoio reais desistam. Um link visível "Ainda preciso de ajuda" na parte inferior é a válvula de segurança.
7. White Frontier
A White Frontier é uma cervejaria artesanal suíça, e a sua página de contacto utiliza um formulário transparente sobreposto a uma imagem de fundo. Se quiser um formulário de contacto que não fique numa caixa branca simples, este é o padrão a observar.
Por que Considero Esta Página de Contato Destacada
Um formulário transparente mantém a personalidade visual da marca na página. Não se perde a fotografia de fundo num enorme contentor de formulário cinzento. Para estilo de vida, hotelaria, alimentação e bebidas, ou qualquer lugar onde a imagem da marca tenha muito peso, isso importa.
A imagem de fundo tem de suportar texto legível, ou o formulário torna-se ilegível. A White Frontier utiliza uma fotografia de cerveja escurecida, que dá às legendas do formulário branco contraste suficiente para permanecerem legíveis. Se 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 Contacto Como Esta
- Estilize com CSS: O WPForms permite-lhe ajustar os estilos do contentor, fundo e campos diretamente do editor de blocos, sem necessidade de CSS. Para aspetos totalmente personalizados, consulte o nosso guia para iniciantes sobre como estilizar os 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 em telemóvel, onde o fundo geralmente é cortado de forma diferente do que no desktop.
- Guarde os seus estilos para reutilização: Assim que tiver ajustado as suas definiçõ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 contacto da HubSpot oferece várias formas de entrar em contacto 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 apoio.
Este é o padrão correto quando tem compradores e clientes existentes com necessidades muito diferentes, e não quer que nenhum grupo se sinta como um pensamento posterior.
Por que Considero Esta Página de Contato Destacada
A HubSpot trata o contacto como um problema de encaminhamento primeiro. A página está organizada por aquilo que quer fazer (falar com vendas, falar com apoio, obter uma demonstração, encontrar um recurso), e cada opção tem a sua própria chamada clara para ação. Não há um mega-formulário único a fingir servir toda a gente.
O chat de vendas fica lado a lado com o formulário de vendas, o que é um reconhecimento silencioso de que alguns compradores querem redigir uma consulta detalhada e outros querem fazer uma pergunta rápida antes de se comprometerem. Oferecer ambos não é redundante, é abranger o espectro.
Para pequenas empresas, isto pode ser excessivo. Mas o princípio é escalável. Mesmo num site pequeno, distinguir "Quero comprar" de "Preciso de ajuda com o que já comprei" antes de o formulário de contacto carregar melhora ambos os fluxos.
Como recriá-lo no WordPress
- Canais com separadores ou agrupados: Utilize um bloco com separadores ou uma grelha simples de cartões de CTA para permitir aos visitantes escolher o 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 "Pedido de Suporte" com números de encomenda 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 preferirão sempre saltar o formulário, e oferecer a alternativa reduz a frustração sem prejudicar os envios do formulário.
Como Personalizar os Designs dos Seus 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 formulário 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 de cor, os campos do formulário, os rótulos, 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 cor pré-definido na definição Temas para alterar o estilo dos campos, rótulos, botões, contentores e fundos do seu formulário.
- Na secção Estilos de Campo, encontrará as opções para ajustar o tamanho, a borda, o tamanho da borda, o raio da borda e as cores dos seus campos de formulário.
- Alterar o tamanho e a cor dos rótulos do seu formulário é possível na secção Estilos de Rótulo. As opções de tamanho disponíveis incluem Pequeno, Médio e Grande.
- Em Estilos de Botão, pode alterar o tamanho, a cor, a borda, o tamanho da borda, o raio da borda e o estilo da borda 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 da borda à volta do contentor do seu formulário.
- As definições de Estilos de Fundo dão-lhe controlo sobre a imagem e a cor de fundo do seu formulário para dar um toque de marca ao seu formulário.
Depois de estilizar 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 trecho de código e o design do formulário utilizará os estilos do formulário anterior.
Da mesma forma, pode desenhar as suas notificações por e-mail com modelos prontos, o que é uma ótima maneira de elevar a sua marca em todos os canais de comunicação.
Apenas certifique-se de adicionar um logótipo bem proporcionado ao seu e-mail (e website) para garantir clareza e responsividade perfeitas em todos os dispositivos.
Perguntas Frequentes Sobre o Design de Formulários de Contacto
O design de formulários de contacto é um dos tópicos sobre os quais me perguntam mais. Aqui estão as respostas às perguntas que surgem repetidamente.
O que torna um bom design de formulário de contacto?
Um bom design de formulário de contacto mantém os campos no mínimo que um visitante consegue suportar, rotula cada entrada claramente, parece integrado com o resto do seu site e coloca o botão de envio num local óbvio. O estilo visual importa menos do que as escolhas estruturais à sua volta.
Quantos campos deve ter um formulário de contacto?
Três a cinco campos é o ponto ideal para a maioria dos formulários de contacto de pequenas empresas. Nome, e-mail, mensagem é o básico. Adicione um assunto ou um menu suspenso de tipo de consulta se lidar com diferentes tipos de pedidos e adicione um campo de telefone apenas se realmente ligar de volta às pessoas.
É possível personalizar o WPForms?
Sim, o WPForms é construído para ser personalizado sem código. Pode ajustar estilos de campo, estilos de rótulo, estilos de botão, estilos de contentor e fundo diretamente no editor de blocos do WordPress. Para alterações mais profundas, também pode colar CSS personalizado ou construir os seus próprios modelos de formulário.
Como personalizo o meu formulário de contacto?
Comece por escolher um modelo ou construir um formulário do zero no construtor de formulários WPForms. Adicione, remova e reorganize campos conforme necessário. Em seguida, ajuste rótulos, placeholders e tamanhos de campo a partir do construtor de formulários e utilize os controlos de estilo do editor de blocos para definir as cores e formas que correspondem à sua marca.
Como estilizo um formulário de contacto no WordPress?
O WPForms e o editor de blocos do WordPress tratam da maior parte do estilo do formulário sem qualquer código. Escolha um tema de cores pré-construído para começar, depois ajuste campos, rótulos, botões e fundos a partir do editor de blocos. Para designs únicos, 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, depois personalize o design a partir do construtor de formulários para o layout e arranjo de campos, e do editor de blocos para os estilos visuais. Para um estilo detalhado, utilize os controlos de tema, campo, rótulo, botão e fundo do editor de blocos.
Em seguida, Crie uma Página de Contacto Excecional à Volta do Seu Formulário
Se estiver pronto para juntar tudo o que cobrimos aqui, o meu guia para criar uma página de Contacto excecional orienta-o através dos elementos de suporte (títulos, sinais de confiança, canais alternativos) que rodeiam o próprio formulário.
Se ainda não criou o seu formulário, o local mais rápido para começar é o modelo de formulário de contacto simples do WPForms. Pode criar um formulário de contacto simples no WordPress em cerca de cinco minutos a partir daí.
Crie o Seu Formulário de Contato Agora
Pronto para construir o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
