Como adicionar formulário de várias etapas no WordPress em 5 etapas fáceis

Você sabia que converter seu formulário WordPress de etapa única em formulário de várias etapas WordPress pode aumentar sua conversão em quase 60% ? Na verdade, em alguns casos, a taxa de conversão pode chegar a 300% .

Sim. Porque hoje em dia as pessoas estão muito ocupadas e têm pouco tempo de atenção. Além disso, se você pedir que eles preencham um formulário longo de uma etapa, é mais provável que eles saiam do seu site, deixando o formulário incompleto.

No entanto, você pode alterar esse cenário usando um formulário de várias etapas para o seu site WordPress. Mas a questão é como?

Bem, é por isso que estou aqui para mostrar um guia passo a passo sobre como adicionar um formulário de várias etapas no WordPress.

Continue lendo para descobrir como você pode criar facilmente um formulário de várias etapas no site WordPress em apenas alguns minutos….

O que é um formulário de várias etapas?

Bem, como o nome sugere, é um formulário com várias etapas, onde os campos de perguntas/entradas são divididos em etapas diferentes, em vez de colocar tudo em apenas uma etapa. Se você está procurando uma definição, veja como o HubSpot define o formulário de várias etapas.

Um formulário de várias etapas é um formulário longo que é dividido em várias partes. Eles são usados ​​para tornar os formulários longos menos intimidantes e assustadores.

– Ponto central

Os formulários de várias etapas são basicamente um substituto para formulários longos com muitos campos de entrada. Se você tiver um formulário comparativamente menor, poderá se ater a um formulário de uma etapa.

Agora que você sabe o que é um formulário de várias etapas, vamos ver algumas das razões pelas quais você deve considerar adicionar um formulário de várias etapas ao seu site WordPress.

Por que usar o formulário de várias etapas no WordPress?

Bem, a resposta simples é disparar sua taxa de conversão. Atualmente, os formulários de várias etapas estão se tornando extremamente populares em sites com usos como formulários de registro, formulários de reserva, formulários de pedido de comida etc. Algumas das razões pelas quais você também deve considerar o uso do formulário de várias etapas em seu site incluem:

• Formulários de várias etapas funcionam melhor quando se trata de chamar a atenção do usuário. Como resultado, as pessoas se envolvem mais e completam o envio de formulários com mais frequência.
• Os usuários consideram o multistep mais fácil de usar e oferece melhor facilidade de uso do que um formulário longo de um passo não.
• Como há uma barra de navegação/barra de progresso com um formulário de várias etapas, os usuários se sentem mais encorajados a preencher um formulário de várias etapas.
• Os formulários condicionais de várias etapas são ótimos para coletar apenas dados relevantes de que você precisa.
• Como resultado de todos os aspectos positivos mencionados acima, os formulários de várias etapas aumentam a taxa de conversão.

Agora que você sabe que deve usar formulários de várias etapas no site WordPress, é hora de criar a configuração perfeita necessária para criar seu formulário de várias partes.

Configure você precisa para construir um WordPress Multi Step Form

Junto com o WordPress, você precisaria de mais dois plugins para criar formulários de várias etapas no WordPress com facilidade. Esses plugins do WordPress são:

1. Elementor (versão gratuita)
2. MetForm (gratuito e profissional)

O Elementor é o melhor construtor de páginas do WordPress e o MetForm é um dos plugins de formulário de várias etapas do WordPress que mais cresce. Se precisar de ajuda para instalar o MetForm, consulte nossa documentação sobre como instalar o MetForm.

Depois de concluir a instalação, você precisa criar uma página com o construtor de páginas Elementor antes de poder usar o Metform. Para isso, vá para Dashboard ⇒ Page ⇒ Add New .

Agora, forneça um título adequado, selecione Elementor Full Width as Template, clique em Publis h. Depois disso, clique em Editar com Elementor.

Por fim, você está pronto para criar seu formulário de várias etapas. Então, vamos passar para o processo principal.

Observação: neste tutorial, mostrarei como adicionar um formulário de várias etapas a uma página. Mas você também pode adicionar facilmente formulários criados com o MetForm em um pop-up modal.

Como criar um formulário de várias etapas no WordPress

Neste blog, você aprenderá a criar um formulário de várias etapas com aparência moderna a partir do zero em apenas 5 etapas fáceis:

Etapa 1: arraste e solte o MetForm

Quando estiver no modo Editar com Elementor , procure por MetForm e arraste e solte no local onde deseja que o formulário apareça.

Etapa 2: criar um novo formulário

Clique na seção do formulário para ir para as opções Editar MetForm . Clique no botão Editar formulário .

Uma vez que novos pop-ups de janela

• Selecione Novo (criar novo formulário)
• Forneça um nome de formulário para o formulário
• Escolha o modelo em branco,
• e clique no formulário Editar

Etapa 3: criar um formulário de várias etapas do zero usando o MetForm e o construtor de páginas Elementor

Depois de clicar em Editar formulário, você terá acesso a outra nova janela com o construtor de páginas Elementor para criar seu formulário do zero. Para construir uma única etapa do formulário de várias etapas, você precisa seguir estas quatro etapas:

Adicionar uma nova seção

Arraste e solte os campos de entrada de acordo com os requisitos

Arraste e solte o botão Prev/Next/Submit dependendo da frase do formulário

Forneça um nome próprio para a seção

Para este blog, vou criar uma demonstração do formulário de várias etapas de reserva de hotel em 3 etapas usando as etapas mencionadas acima. As três etapas do formulário incluirão informações pessoais, informações de reserva e informações adicionais

Formulário de Reserva Passo Um - Informações Pessoais:

• Para a seção Informações pessoais, clique no ícone Elementor + e escolha uma estrutura com duas colunas iguais .

• Procure o campo de entrada de texto e arraste e solte o campo de formulário na coluna da esquerda.

• Agora para editar o atributo deste campo de entrada, clique no sinal de edição, vá em Conteúdo ⇒ conteúdo e edite as seguintes opções:
  • Mostrar rótulo: ative esta opção para mostrar o rótulo do campo de entrada.
  • Posição: Você pode optar por posicionar a etiqueta na parte superior ou esquerda.
  • Rótulo: Dê um nome ao seu rótulo. Vou usar “Nome”.
  • Nome: O campo Nome é obrigatório e deve ser exclusivo. Portanto, certifique-se de dar um nome diferente para cada campo e substitua o espaço por sublinhado/hífen.
  • Espaço reservado: forneça um texto de espaço reservado.
  • Texto de Ajuda: Caso você queira fornecer um texto de ajuda para os usuários, você pode fazê-lo aqui.

• Em seguida, vá para Conteúdo ⇒ Configurações para modificar as seguintes opções:
  • Obrigatório: Para tornar este campo de formulário obrigatório, ative esta opção.
  • Tipo de validação: você pode definir diferentes tipos de validação para o campo de texto com base no comprimento do caractere, comprimento da palavra e expressão.
  • Mensagem de aviso: Aqui você pode definir a mensagem de aviso que aparecerá se o requisito não for atendido.

Observação: usarei o recurso de lógica condicional na segunda etapa deste formulário.

Assim como o nome, adicione outro campo de entrada de texto para o sobrenome. Como parte da etapa de informações pessoais, aqui vou adicionar mais dois campos; E-mail e número de celular.

Quando terminar de modificar as configurações do campo E-mail e número de celular. Pesquise e arraste e solte o botão Next Step . Você pode alterar diferentes configurações de botão, como rótulo, alinhamento de botão, ícone, posição do ícone, etc.

• Agora a seção para o primeiro passo está pronta, para dar um nome próprio ao primeiro passo
  • Clique no ícone de seis pontos para abrir a opção de configurações e vá para layout ⇒ multistep .
  • Forneça um nome na opção Título da guia de várias etapas
  • Escolha um ícone da biblioteca ou carregue um SVG.
  • Clique em atualizar para salvar.

Agora que a primeira seção está pronta, vamos construir a Segunda Etapa.

Formulário de Reserva Passo Dois – Informações de Reserva:

• Para a segunda etapa, você precisa escolher uma nova seção. Vou escolher uma nova seção com uma única coluna e depois adicionar uma nova seção interna com duas colunas iguais.
• Após escolher a coluna arraste e solte o campo de entrada de 2 datas para as opções de check-in e check-out.

Regra obrigatória: você deve escolher uma nova seção para iniciar a nova etapa , caso contrário, qualquer campo de entrada adicionado será adicionado à etapa anterior. Portanto, lembre-se sempre, novas etapas exigem uma nova seção, mesmo que tenha o mesmo layout.

• Junto com a opção de configurações mencionada para o campo de texto, você obtém as seguintes configurações para o campo de entrada Data em Conteúdo ⇒ Configurações
  • Definir data atual como data mínima: Ative esta opção para definir a data atual como data mínima.
  • Defina a data mínima manualmente: se você não quiser definir a data atual como a data mínima, também poderá definir a data mínima manualmente.
  • Definir a data máxima manualmente: Aqui você pode definir a data máxima.
  • Desabilitar lista de datas: Você pode usar esta opção para desabilitar algumas datas. Para desabilitar qualquer data clique no botão +ADICIONAR ITEM e selecione a data.
  • Entrada de data de intervalo: Ao ativar esta opção, você pode permitir que os usuários selecionem um intervalo de datas. Mas para este formulário, deixarei essa opção desativada.
  • Entrada de ano: Ative esta opção para usar um ano como parte da entrada de data.
  • Entrada de mês: Para habilitar o mês como parte da entrada de data, ative esta opção.
  • Entrada de data: ative esta opção para obter uma data (dia) como parte da entrada de data
  • Formato da data: Defina aqui o formato da data de entrada.
  • Localização: escolha o local no menu suspenso com base em sua preferência.
  • Deseja inserir o tempo com ele: Ative esta opção para obter o tempo junto com os dados como entrada. Se você ativar essa opção, obterá outra opção que é Ativar hora 24 horas. Usando esta opção, você pode habilitar o formato 24 horas.

Agora, finalmente, vamos usar o recurso de formulário condicional para o campo Check Out. Para tornar o campo de check-out visível apenas quando o campo de check-in estiver vazio,

• Copie o valor do campo Nome do campo de entrada Check-In.
• Em seguida, vá para Conteúdo ⇒ Condicional , ative a opção de habilitar
• Escolha E no menu suspenso Critérios de correspondência de condição.
• Nas opções suspensas Ação, escolha Mostrar este campo .
• Clique em + ADICIONAR ITEM , no campo de entrada if, cole o valor do nome do campo de check-in que você copiou.
• Escolha “ não vazio ” na lista suspensa de Correspondência ( comparação ).

Agora clique no botão de visualização para ver. O campo Check-out só deve ficar visível quando você escolher uma data de Check-in.

Adicione uma nova seção interna para que o formulário não pareça ruim quando a opção condicional ocultar o check-out inicialmente. Arraste e solte o campo do formulário Número duas vezes para criar mais dois campos para o número de salas e o número de pessoas.

E como é a etapa do meio, precisamos incluir os botões Prev e Next .

Assim que você terminar de editar as configurações de todos os campos adicionados para esta seção, altere o nome da seção/etapa de layout ⇒ multistep como você fez com a primeira seção. Estou nomeando-o Informações de Reserva.

Agora o segundo passo está pronto, vamos para o terceiro passo

Formulário de Reserva Passo Três - Informações Adicionais

Para a terceira etapa, vamos adicionar uma nova seção com uma única coluna. E adicione um campo de texto e nomeie-o como Informações Adicionais.

Em seguida, adicione uma seção interna de duas colunas dentro da seção. Depois disso, arraste e solte um botão anterior e, em seguida, um botão de envio para envio de formulário.

Observação: você pode adicionar quantas seções internas desejar. Mas para criar uma nova etapa, você deve adicionar uma nova seção.

Para dar um nome à terceira seção, vá para layout ⇒ multistep e adicione o título “ Informações Adicionais ” e adicione um ícone.

Por fim, terminamos de criar nosso formulário de várias etapas do WordPress com 3 etapas. Agora clique em atualizar para salvar e fechar a janela para passar para as configurações de várias etapas.

Etapa 4: habilitar a opção de formulário de várias etapas do MetForm

Agora que temos nosso formulário, é hora de convertê-lo em um formulário funcional de várias etapas. Para fazer isso

• Vá para Conteúdo ⇒ Configurações de várias etapas
• Ative a opção habilitar várias etapas para ativar as opções de várias etapas
• Habilite o Display Multistep Nav para que o menu Section apareça na parte superior. Você também pode editar as diferentes configurações, como Adaptive Form Container Height, Enable scroll to the top, etc.
• Depois de fazer todas as alterações, clique em atualizar para salvar

Etapa 5: configurar confirmação, notificação e outras configurações para concluir

Agora que você projetou seu formulário de várias etapas. Vamos configurar todas as configurações de formulário que o MetForm tem a oferecer. Para modificar as configurações do MetForm no painel do WordPress, vá para MetForm ⇒ Forms ⇒ Clique na opção Edit do formulário que você acabou de criar.

Nota: Aqui você também encontrará o código de acesso do formulário que você criou, que você acabou de copiar e colar para adicionar seu formulário em qualquer lugar do site. Você também pode acessar as configurações do formulário na opção Editar formulário .

Aqui você encontrará as seguintes configurações:

Em geral:

Como parte das configurações gerais, você pode modificar o título, a mensagem de sucesso, o login obrigatório, as visualizações de contagem etc. Você também pode definir qualquer URL personalizado que deseja que os usuários acessem após o envio do formulário.

Confirmação:

Você pode enviar um e-mail de confirmação para seus usuários com uma cópia do formulário enviado com este plug-in do construtor de formulários. Ative a opção de confirmação e, em seguida, você pode definir Assunto do e-mail, E-mail de, De e-mail, Resposta de e-mail para e Mensagem de agradecimento.

Configurações de notificação:

Você também pode enviar e-mails de notificação de formulário para o administrador com o MetForm. Habilite a opção Email de notificação para o administrador. Em seguida, defina o Assunto do e-mail, E-mail para, E-mail de, Nota do administrador etc.

Depois de fazer todas as edições, role para baixo e clique em salvar alterações para atualizar as configurações.

Além das configurações que abordei neste blog, você também obtém integração como API REST, Mail Chimp, Google Sheet , etc. Além disso, integração de gateway de pagamento como PayPal, Stripe. Integração de CRM que inclui HubSpot, Zoho, etc. Você também tem opções de autenticação como login e registro . Para obter mais detalhes sobre essas configurações, consulte nossa documentação do MetForm.

Se você seguiu as etapas mencionadas corretamente, deverá obter um formulário de reserva em várias etapas, como o abaixo:

Embrulhar

Lá, você acabou de criar seu formulário de várias etapas do WordPress em alguns minutos. Se você acha que este formulário é simples, não se preocupe. O principal objetivo deste blog foi mostrar como você pode criar um formulário de várias etapas no WordPress usando o MetForm.

Agora que você sabe como criar um formulário de várias etapas do WordPress, você pode criar seu formulário e lógica personalizados. Espero que você utilize os recursos do MetForm para criar formulários de várias etapas maravilhosos. Caso você enfrente algum problema ao longo do caminho, compartilhe conosco, nossa equipe responderá o mais rápido possível.

Não se esqueça de conferir todos os recursos incríveis que o MetForm tem a oferecer.