Como Criar um Formulário de Contato Responsivo Com Múltiplas Colunas

Criar um formulário de contato responsivo com várias colunas parece que deveria ser simples, mas quando você começa a trabalhar nele, as coisas podem ficar complicadas rapidamente.

Você pode se perguntar: “Eu realmente consigo fazer este formulário ficar bom em todos os dispositivos sem quebrar o design?” Esta é uma preocupação válida, especialmente se você já lutou com formulários que não se encaixam bem ou parecem desajeitados no celular.

A boa notícia é que você pode usar o WPForms para configurar um formulário de contato responsivo com várias colunas. Siga as etapas deste guia para começar!

Crie Seu Formulário de Várias Colunas Agora! :)

Como Criar um Formulário de Várias Colunas no WPForms

Criar um formulário de várias colunas no WPForms é incrivelmente fácil. Antes de começar, certifique-se de ter uma licença WPForms Pro, pois você obterá o campo Layout junto com toneladas de recursos úteis com este plano.

Quando você tiver comprado a licença e instalado o WPForms em seu site, basta seguir as etapas abaixo para criar layouts de colunas em seu formulário.

Etapa 1. Crie um Novo Formulário

Vamos começar criando um novo formulário com um layout de colunas. Para fazer isso, abra seu painel do WordPress e vá para WPForms » Adicionar Novo.

Isso abrirá a interface do construtor de formulários do WPForms. Você pode inserir um nome que gostaria de dar ao seu formulário e selecionar um modelo.

Para este exemplo, vamos criar um formulário do zero. Isso nos permitirá primeiro escolher um layout de formulário de várias colunas e, em seguida, atribuir diferentes campos a cada coluna conforme acharmos adequado.

No entanto, o WPForms tem vários modelos prontos que usam várias colunas, como o modelo de formulário de contato de várias colunas.

Para criar um formulário do zero, passe o cursor sobre Formulário em Branco (este deve ser o primeiro item na lista de modelos) e pressione Criar Formulário em Branco.

O WPForms agora carregará um formulário em branco que você pode começar a construir usando controles simples de arrastar e soltar.

Agora, vamos adicionar alguns campos a este formulário e organizá-los em um layout de várias colunas.

Etapa 2. Adicione Campos ao Layout de Colunas

Para dividir uma área do seu formulário em várias colunas, você só precisa adicionar o campo Layout.

Simplesmente procure na seção Campos Elegantes no painel esquerdo e arraste e solte o campo Layout no formulário à sua direita.

Agora, vamos adicionar os campos Nome, E-mail e Telefone na coluna da esquerda e um campo Endereço na coluna da direita.

A maneira mais fácil de fazer isso é clicando em uma coluna para torná-la ativa e, em seguida, clicando nos campos que queremos adicionar a essa coluna.

Vamos começar atribuindo campos à coluna da esquerda primeiro. Clicaremos na coluna da esquerda para defini-la como ativa (conforme indicado pela seta para cima).

Agora, clicaremos nos campos Nome, E-mail e Telefone para que eles sejam adicionados diretamente à coluna ativa, um por um.

Em seguida, repetiremos o mesmo processo para a coluna da direita e adicionaremos o campo Endereço a ela.

Ótimo! Este formulário de 2 colunas agora está com uma boa aparência.

Mas e se você quisesse larguras diferentes para as duas colunas? Ou talvez até mais de 2 colunas?

O WPForms torna tudo isso possível, como mostramos na próxima etapa.

Leia também: Formulários de Coluna Única: Exemplos e Inspiração

Etapa 3. Personalize o Layout do Formulário

Por padrão, o campo Layout cria 2 colunas de tamanhos iguais em seu formulário. Mas você pode escolher entre 8 layouts diferentes e adicionar até 4 colunas em um único formulário.

Para selecionar um preset de layout, basta clicar no campo Layout após ele ser adicionado ao seu formulário.

Depois disso, basta selecionar um layout que funcione melhor para você. Por exemplo, se você quisesse uma coluna estreita à esquerda, mas uma mais larga à direita, você pode usar a terceira opção de layout.

Se você quiser ter 4 colunas em seu formulário, basta escolher a opção de layout correspondente no painel esquerdo e arrastar e soltar os campos em suas respectivas colunas.

Recomendamos experimentar diferentes layouts e visualizar seu formulário no frontend para verificar se tudo está correto. Nosso guia para projetar layouts de formulário lhe dará um bom começo.

Às vezes, o layout de formulário escolhido pode não combinar com o layout da sua página e causar problemas de alinhamento. Mas se você fizer bem o seu teste de formulário e verificar tudo antes de publicar, isso não deve ser um problema.

Etapa 4. Configure a Notificação e Confirmação do Seu Formulário

Configurar notificações garante que você esteja sempre atualizado sobre novas entradas de formulário. Vá para Configurações e depois Notificações no construtor de formulários.

A partir daqui, edite as configurações de notificação padrão, como a linha de assunto, ou altere os e-mails dos destinatários conforme necessário.

Agora você pode selecionar Confirmações no menu Configurações para configurar respostas para envios de formulário bem-sucedidos.

Escolha o Tipo de Confirmação que melhor se adapta ao seu site – uma mensagem, exibição de página ou um redirecionamento.

Lembre-se de salvar suas alterações para manter seu formulário e suas configurações atualizadas. Agora você está pronto para publicar o formulário em seu site WordPress!

Etapa 5. Publique Seu Formulário de Várias Colunas

Agora, é hora de ir para a etapa final de publicação. Para iniciar o processo de incorporação, clique no botão Incorporar ao lado de Salvar.

Após pressionar o botão Incorporar, você verá um modal perguntando se você deseja incorporar seu formulário em uma página existente ou criar uma nova. Vamos com a opção Criar Nova Página, mas os passos são muito semelhantes em ambos os casos.

Dê um nome à sua página e pressione Vamos Lá.

Você encontrará o formulário incorporado nesta nova página. Faça quaisquer edições usando o editor do WordPress aqui e, quando estiver satisfeito, pressione Publicar.

Veja como um formulário de várias colunas publicado ficará quando visto do frontend:

E é isso! Agora você pode criar facilmente formulários de várias colunas no WPForms sem código. Não se esqueça: você também pode estilizar seus formulários no editor de blocos com facilidade.

Perguntas frequentes sobre como criar um formulário de várias colunas no WordPress

Qual é o benefício de um layout de formulário de várias colunas?

Formulários de várias colunas podem ser muito benéficos do ponto de vista da experiência do usuário. Um cenário comum em que formulários de várias colunas são úteis é quando você tem um formulário longo o suficiente para ter uma rolagem vertical.

Nesse cenário, você pode reduzir o comprimento do formulário e torná-lo mais compacto, organizando seus campos em duas ou mais colunas.

Da mesma forma, ao incorporar um formulário longo em uma barra lateral, ele pode caber melhor e reduzir a rolagem vertical se você usar um layout de colunas.

Não existe uma abordagem única para um design de formulário eficaz, e é por isso que é tão importante ter diferentes opções de layout disponíveis para diferentes cenários.

Como crio um formulário de várias colunas?

Para criar um formulário de várias colunas no WordPress, você pode usar o WPForms e seu construtor de arrastar e soltar. Depois que seu formulário estiver configurado, você pode facilmente dividir os campos em várias colunas usando o campo Layout.

O WPForms garante automaticamente que o formulário seja responsivo, portanto, ele se ajustará em telas menores para uma experiência de usuário tranquila.

Como divido os dados em várias colunas?

Com o WPForms, dividir dados em várias colunas é simples.

Ao criar seu formulário, basta selecionar os campos que deseja exibir lado a lado e usar a funcionalidade de arrastar e soltar para adicioná-los a um campo de Layout.

O WPForms cuidará do resto, garantindo que suas colunas sejam exibidas corretamente em todos os dispositivos.

Em seguida, utilize o Net Promoter Score para pesquisas

Se você está tentando avaliar os níveis de satisfação do cliente, o melhor instrumento de pesquisa que você pode usar para isso é o Net Promoter Score (NPS). O WPForms torna muito fácil criar formulários de pesquisa com a Escala Net Promoter, como explicamos neste guia.

Se você está tendo alguns desafios com usuários que não inserem seus endereços de e-mail corretamente, veja como adicionar um campo de confirmação de e-mail para evitar isso. Além disso, você pode achar nosso guia sobre as principais perguntas de pesquisa 'como você nos conheceu' interessante.

E, se você não tem certeza sobre qual ferramenta de prevenção de spam usar em seus formulários, veja nossa comparação sobre Akismet vs reCAPTCHA.

Crie Seu Formulário WordPress 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.