Como Criar um Formulário de Múltiplas Etapas no WordPress em 10 Minutos 

Quer criar um formulário de múltiplas etapas no WordPress que seja fácil de preencher e converta melhor?

Descobri que dividir formulários longos em etapas menores pode realmente melhorar a experiência do usuário. Em vez de mostrar tudo de uma vez, você guia as pessoas por campos pequenos que parecem menos assustadores.

Neste guia, mostrarei exatamente como criar um formulário de múltiplas etapas usando o WPForms, um dos melhores construtores de formulários de arrastar e soltar disponíveis.

Resposta rápida: Para criar um formulário de múltiplas etapas no WordPress, instale o WPForms Pro, crie um novo formulário, arraste o campo Quebra de Página entre as seções para dividi-lo em etapas, ative a barra de progresso nas configurações do formulário e incorpore o formulário em qualquer página. Todo o processo leva cerca de 10 minutos e não requer codificação.

Quando Usar Formulários de Múltiplas Etapas

Nem todo formulário precisa ser dividido em várias etapas, mas alguns tipos de formulário veem um aumento claro nas conclusões quando você adiciona quebras de página. Aqui estão os cenários onde isso faz a maior diferença:

• Formulários de registro com muitos campos – Inscrições para eventos ou formulários de associação que solicitam nome, endereço, preferências e detalhes de pagamento de uma vez se beneficiam de serem divididos em grupos lógicos.
• Formulários de geração de leads estilo quiz – Formulários que qualificam leads com base nas respostas (orçamento, cronograma, tipo de projeto) parecem uma conversa quando você mostra uma pergunta por vez.
• Fluxos de checkout de várias páginas – Formulários de pedido que coletam informações de contato, detalhes de envio e pagamento em etapas separadas reduzem a carga cognitiva em cada estágio.
• Formulários de candidatura de emprego – Candidaturas com informações pessoais, histórico de trabalho e perguntas sobre disponibilidade são adequadas para uma estrutura de três etapas.
• Pesquisas – Pesquisas mais longas com várias áreas temáticas são mais fáceis de concluir quando agrupadas em seções temáticas, em vez de serem mostradas como uma única página longa.

Dicas para um Melhor Design de Formulários de Múltiplas Etapas

Antes de começar a construir, algumas decisões de design tornarão seu formulário muito mais fácil de preencher. Eu já vi essas dicas fazerem uma diferença real nos formulários que configurei com o WPForms.

• Mantenha cada etapa com no máximo 3-5 campos. Mais de cinco campos por página começa a parecer um formulário longo novamente.
• Rotule a barra de progresso com nomes de etapas, não apenas números. “Etapa 2: Seus Detalhes de Contato” é mais tranquilizador do que “Etapa 2 de 4”.
• Use rótulos de botão claros. “Próxima Etapa” ou “Continuar para o Frete” informa aos usuários exatamente o que acontecerá quando eles clicarem.
• Ative o botão Anterior. Os usuários precisam de uma maneira de voltar e corrigir respostas anteriores sem perder o que já preencheram.
• Salve entradas parciais sempre que possível. O WPForms Pro suporta o salvamento de entradas parciais, para que você possa entrar em contato com usuários que começaram, mas não terminaram.

Melhor Maneira de Criar um Formulário de Múltiplas Etapas no WordPress

Neste tutorial, usaremos o WPForms para criar formulários de várias partes no WordPress. O WPForms é o melhor plugin de criação de formulários WordPress com recurso de arrastar e soltar. E com mais de 3 milhões de instalações ativas, é a ferramenta mais amigável para iniciantes disponível.

Melhor ainda, ele tem uma versão gratuita e uma paga, mas hoje usaremos a versão Pro do WPForms para criar um formulário de várias páginas no WordPress.

Por que não conferir esta análise do WPForms detalhada para todos os detalhes?

Então, vamos começar com o primeiro passo, que é criar um novo formulário.

Antes de começar: O campo Page Break que possibilita os formulários de várias etapas está disponível apenas no WPForms Pro ou superior. A versão gratuita do WPForms não inclui este recurso. Se você tem a versão gratuita instalada, precisará fazer um upgrade antes de seguir os passos abaixo.

Etapa 1: Crie um Novo Formulário no WordPress

A primeira coisa a fazer é instalar e ativar o plugin WPForms. Se você não tem certeza de como fazer isso, pode seguir este guia passo a passo para instalar plugins do WordPress para iniciantes.

Com o WPForms, você pode dividir qualquer tipo de formulário em várias partes, então vamos criar um formulário de contato simples.

Vá para WPForms » Adicionar Novo para criar um novo formulário e ver os modelos disponíveis.

Em seguida, nessa tela, dê um nome ao seu formulário e escolha o modelo Formulário de Contato Simples.

O WPForms agora abrirá o modelo no construtor de formulários de arrastar e soltar para você editar.

O formulário de contato simples vem com os seguintes campos já adicionados ao seu formulário:

• Nome
• E-mail
• Comentário ou Mensagem

Você também pode mover os campos do formulário e adicionar campos extras arrastando-os da coluna da esquerda para a coluna da direita. Simplesmente clique em qualquer campo do formulário para editar o conteúdo e arraste-o para reorganizar sua posição.

Se você quiser adicionar mais do que um formulário de contato ao seu site WordPress, você também pode criar os seguintes tipos de formulário com o WPForms:

• Formulário de pesquisa
• Formulário de pedido online
• Formulário estilo Type-form
• Formulário de upload de arquivos

A maioria desses tipos de formulário são mais longos do que os formulários de contato padrão, então dividi-los em várias etapas pode melhorar as conversões.

Etapa 2: Divida seu Formulário em Múltiplas Partes

Depois de personalizar seu formulário e adicionar os campos necessários, adicione o campo Quebra de Página para dividir seu formulário em páginas diferentes.

Você pode fazer isso procurando na seção Campos Especiais e arrastando o campo de formulário Quebra de Página para o painel direito.

Em seguida, solte o campo em seu formulário onde você deseja que ele divida.

Repita isso para cada seção onde você gostaria de dividir seu formulário em outra página. A partir daí, continue a personalizar seu formulário adicionando os campos necessários para completá-lo.

Embora o WPForms permita que você adicione quantos formulários desejar, é crucial evitar sobrecarregar os usuários com muitas informações. Fazer isso pode fazer com que eles abandonem seu formulário, o que é o oposto do que você deseja alcançar.

Etapa 3: Personalize a Barra de Progresso do seu Formulário

Para aumentar o fluxo do seu formulário, você pode incluir uma barra de progresso. Uma barra de progresso informa às pessoas sobre as diferentes seções do seu formulário e é um ótimo indicador visual de quanto resta para completar.

O WPForms vem com 3 barras de indicadores de progresso diferentes para formulários de várias etapas, que são as seguintes:

1. Conectores – Barras de conexão e títulos de página para cada etapa do seu formulário.
2. Círculos – Círculos numerados e títulos de página para cada etapa do formulário.
3. Barra de Progresso – Indicador do progresso do usuário à medida que ele completa as etapas do formulário.

Cada opção oferece aos usuários uma experiência visual diferente. A Barra de Progresso mostra um preenchimento baseado em porcentagem que avança à medida que os usuários completam cada etapa. As opções Círculos e Conectores mostram contagens de etapas ("Etapa 2 de 4") com rótulos nomeados, que funcionam bem quando cada etapa tem um tema claro como "Seus Detalhes" ou "Pagamento".

Os nomes das etapas valem o minuto extra para configurar. Um rótulo como "Etapa 2: Endereço de Entrega" informa aos usuários exatamente onde eles estão no processo, o que reduz a desistência mais do que uma barra sem rótulo. Da perspectiva do usuário, etapas com rótulos parecem profissionais e menos intimidantes do que um indicador de progresso genérico.

Para alterar a barra de progresso e o título da página da primeira página do seu formulário de várias páginas, clique no campo Primeira Página.

Em seguida, você verá um novo painel onde pode escolher o tipo de progresso para o seu formulário. Nessa área, você também pode alterar a cor usada para destacar o indicador de progresso, se desejar.

Se você selecionar as opções de círculos ou conectores, também poderá alterar o título da página. Fazer isso ajuda os usuários a saber em qual parte do formulário eles estão, para que não se percam. Mas se você preferir não fazer isso, uma barra de progresso padrão será exibida aos usuários para guiá-los no preenchimento do seu formulário.

Em seguida, você pode alterar o botão e o texto Próxima Página, que levam os usuários para a próxima página do seu formulário.

Para fazer isso, clique na seção Quebra de Página que você adicionou ao criar seu formulário.

Além disso, você pode adicionar um botão Página Anterior clicando no alternador para a posição Ligado. Dessa forma, os usuários podem voltar se esqueceram de adicionar alguma informação.

Depois de personalizar sua barra de progresso, clique em Salvar e siga para a próxima etapa.

Etapa 4: Edite as Configurações do seu Formulário

Agora, vamos editar as configurações do seu formulário. Para fazer isso, vá para Configurações » Geral.

Nesta seção, você pode definir as seguintes opções:

• Nome do Formulário – Dê um novo nome ao seu formulário, se desejar.
• Descrição do Formulário – Adicione uma descrição ao seu formulário para referência.
• Texto do Botão Enviar – Altere o texto do seu botão de envio.
• Configurações de Spam – Ative a opção de honeypot anti-spam para impedir que spammers enviem envios indesejados.
• Recursos do GDPR – Desative o armazenamento das informações inseridas em seus formulários, como endereços IP e outros dados sensíveis, para cumprir o GDPR.

Quando suas configurações estiverem configuradas, clique em Salvar.

Etapa 5: Defina as Notificações do seu Formulário

As configurações de notificação no WPForms enviam um e-mail quando um formulário é enviado em seu site WordPress.

Você pode encontrar as configurações de notificação clicando em Configurações » Notificações.

No entanto, se você não desativar as notificações do formulário, receberá um e-mail para cada formulário enviado em seu site.

Por outro lado, você pode usar smart tags para enviar um e-mail para as pessoas que preenchem seu formulário. As smart tags são uma excelente maneira de informá-las que o formulário foi processado corretamente e que você o recebeu.

É ainda melhor usar esse recurso em formulários longos com várias etapas, pois eles podem levar mais tempo para serem preenchidos. Além disso, evita que os usuários fiquem se perguntando se tudo deu certo. Para obter mais ajuda, você pode ver a documentação sobre como configurar notificações de formulário aqui.

Quando terminar de configurar suas notificações, passe para a configuração da mensagem de confirmação do seu formulário.

Etapa 6: Defina a Mensagem de Confirmação do seu Formulário

Mensagens de confirmação de formulário são mensagens breves mostradas aos usuários quando eles enviam um formulário em seu site. É uma excelente maneira de informar às pessoas que o formulário está sendo processado e quais são os próximos passos.

Existem 3 tipos de mensagens de confirmação no WPForms, que incluem:

1. Mensagem – Uma mensagem simples informando aos usuários que o formulário foi enviado.
2. Mostrar Página – Envie os usuários para uma página diferente, como uma página de agradecimento após o envio do formulário.
3. Ir para URL (Redirecionar) – Envie os visitantes do site para um site diferente após o envio do formulário.

Para configurar sua mensagem de confirmação, clique em Configurações » Confirmação.

Em seguida, escolha o tipo de mensagem que você gostaria de mostrar aos seus visitantes após completar seu formulário. Para este tutorial, selecionaremos Mensagem.

Agora, personalize o texto da mensagem para atender às suas necessidades e clique em Salvar quando estiver satisfeito.

Agora você está pronto para adicionar seu formulário ao WordPress.

Etapa 7: Adicione seu Formulário ao WordPress

Depois de criar seu formulário de várias etapas, é hora de adicioná-lo ao seu site WordPress. Com o WPForms, você pode adicionar seu formulário a muitas áreas do seu site. Isso inclui a página ou postagem do seu site, sua barra lateral e quaisquer outras áreas prontas para widgets.

Vamos ver como adicionar seu formulário de várias etapas a uma página do WordPress.

Para começar, vá para sua área de administração do WordPress e clique em Páginas » Adicionar Nova.

Em seguida, clique no ícone de mais no editor do WordPress para adicionar um novo bloco de conteúdo. No campo de pesquisa, digite WPForms para encontrá-lo facilmente.

Agora clique no bloco WPForms para adicioná-lo à sua página.

Quando o WPForms aparecer dentro do seu bloco, clique na seta suspensa para selecionar seu formulário de várias etapas na lista e inseri-lo em sua página.

Em seguida, clique em Publicar para publicar a página no WordPress. Seu formulário de várias etapas agora aparecerá em seu site.

Adicione seu Formulário de Múltiplas Etapas a uma Landing Page do SeedProd

Você criou o formulário. Agora a verdadeira questão é onde colocá-lo. Adicionar seu formulário de várias etapas a uma página padrão do WordPress funciona, mas incorporá-lo em uma página de destino dedicada criada com SeedProd oferece controle total sobre o design ao redor do formulário, o que significa menos distrações e mais conversões.

SeedProd tem um bloco WPForms integrado que se conecta diretamente a qualquer formulário que você criou.

Veja como configurá-lo:

1. Abra sua página de destino no construtor de páginas SeedProd indo em SeedProd » Landing Pages e clicando em Editar Página.
2. No painel esquerdo, pesquise por WPForms e arraste o bloco WPForms para sua página onde você deseja que o formulário apareça.
3. Clique no bloco para abrir suas configurações, em seguida, use o menu suspenso para selecionar seu formulário de várias etapas na lista de formulários existentes.
4. Ajuste o layout da seção circundante, o título e os estilos dos botões para corresponder à sua campanha, em seguida, clique em Salvar e Publicar Página.

O formulário será renderizado exatamente como configurado no WPForms, incluindo a barra de progresso e o layout de várias etapas. Se você ainda não criou uma página de destino, o editor de arrastar e soltar do SeedProd torna simples criá-la a partir de um modelo sem tocar em nenhum código.

Perguntas Frequentes sobre Formulários de Múltiplas Etapas no WordPress

E é isso! Você aprendeu como criar um formulário de várias etapas no WordPress para que possa começar a melhorar o engajamento do usuário e as taxas de conversão de formulários rapidamente.

Se você gostou deste artigo, veja nossa vitrine dos melhores plugins do WordPress para usar em seu site também.

E para mais tutoriais de formulários, veja estes artigos:

• Como Criar um Formulário do WordPress com Upload de Arquivo
• Como Criar um Formulário Estilo Typeform
• Como Criar um Formulário de Contato no WordPress
• Como Criar um Formulário de Pedido Online no WordPress
• Como Criar um Formulário de Registro de Eventos no WordPress

E se desejar, siga-nos no Facebook e Twitter para mais dicas e tutoriais úteis.