Como construir um formulário de várias etapas do WordPress com barra de progresso

Rifat Tutoriais do WordPress Jun 21, 2023

Criar um formulário envolvente e fácil de usar é um aspecto vital para o sucesso de qualquer site, especialmente quando se trata de coletar informações valiosas ou gerar leads. Uma abordagem eficaz para aprimorar a experiência do usuário e melhorar as taxas de conclusão do formulário é implementar um formulário de várias etapas com uma barra de progresso. Esse design de formulário dinâmico divide processos longos ou complexos em etapas gerenciáveis, orientando os usuários em cada estágio e fornecendo uma indicação clara de seu progresso.

Se você é um usuário do WordPress e está interessado em incorporar este poderoso recurso de formulário em seu site, você está no lugar certo. Neste guia, vamos orientá-lo no processo de criação de um formulário de várias etapas com uma barra de progresso usando os recursos versáteis do WordPress.

Aproveitando a flexibilidade do WordPress e seu vasto ecossistema de plug-ins e ferramentas, você pode facilmente criar e personalizar formulários de várias etapas para atender às suas necessidades específicas. Se você deseja coletar feedback do usuário, reunir informações do cliente, realizar pesquisas ou facilitar compras on-line, um formulário de várias etapas com uma barra de progresso pode melhorar significativamente a experiência do usuário e aumentar as taxas de conclusão do formulário.

Importância do formulário de várias etapas

Os formulários de várias etapas ganharam popularidade significativa no design e desenvolvimento da Web devido à sua eficácia em aprimorar a experiência do usuário e aumentar as taxas de conversão. Ao contrário dos formulários tradicionais de página única, os formulários de várias etapas dividem processos complexos em seções menores e mais gerenciáveis, orientando os usuários por uma série de etapas sequenciais.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

A principal razão pela qual os formulários de várias etapas se tornaram tão populares é sua capacidade de melhorar o envolvimento do usuário e as taxas de conclusão. Ao apresentar informações de maneira estruturada e progressiva, essas formas reduzem a sobrecarga cognitiva e tornam a experiência geral mais intuitiva e amigável. Os usuários tendem a se sentir menos sobrecarregados quando confrontados com um formulário longo e intimidador, resultando em taxas de conclusão mais altas e abandono de formulário reduzido.

Além disso, os formulários de várias etapas oferecem uma excelente oportunidade para coletar informações mais detalhadas e precisas dos usuários. Ao segmentar o formulário em seções lógicas, cada uma com foco em detalhes específicos, é mais provável que os usuários forneçam respostas precisas e preencham o formulário inteiro. Isso leva a uma melhor qualidade dos dados e permite que as empresas tomem decisões mais informadas com base nas informações coletadas.

Além dos benefícios da experiência do usuário, os formulários de várias etapas podem afetar significativamente as taxas de conversão. Ao dividir o processo de conversão em etapas menores, as empresas podem posicionar estrategicamente frases de chamariz (CTAs) atraentes no final de cada seção. Essa abordagem permite uma melhor segmentação, pois os CTAs podem ser personalizados para se alinharem ao progresso e à intenção do usuário. Além disso, ao fornecer uma barra ou indicador de progresso, os usuários são motivados a continuar nas etapas, aumentando a probabilidade de conversões bem-sucedidas.

Considerando a importância dos formulários de várias etapas para melhorar a experiência do usuário, aumentar as taxas de conclusão e aumentar as taxas de conversão, é crucial que os indivíduos envolvidos no desenvolvimento da Web, principalmente no WordPress, possuam o conhecimento e as habilidades para criar esses formulários. Ser capaz de criar formulários de várias etapas com barras de progresso no WordPress permite que desenvolvedores e proprietários de sites otimizem seus formulários online, resultando em maior satisfação do usuário, aumento de conversões e, finalmente, melhores resultados de negócios.

Crie um formulário de várias etapas com barra de progresso no WordPress

Quando se trata de criar um formulário de várias etapas no WordPress, utilizar um dos plugins WordPress disponíveis é a solução mais simples. Entre as inúmeras opções, o WPForms se destaca como a melhor ferramenta para o trabalho, tornando-se o melhor plugin de formulário de contato do WordPress no mercado.

Reconhecido por sua abordagem amigável para iniciantes, o WPForms já deixou sua marca em mais de 5 milhões de sites. Este poderoso plug-in permite que você crie formulários WordPress para várias finalidades sem esforço, eliminando a necessidade de codificação. Se você procura formulários de registro fáceis de usar, formulários de inscrição, formulários de pesquisa, formulários de upload de arquivos, formulários de pedido ou formulários de inscrição, o WPForms o cobre.

Graças ao seu criador de formulários intuitivo de arrastar e soltar e uma variedade de modelos de formulários pré-construídos, a criação de formulários personalizados se torna muito fácil. Além disso, o WPForms oferece complementos convenientes para processadores de pagamento populares como Stripe e PayPal, permitindo a aceitação de pagamento perfeita em sua loja WooCommerce.

Além disso, o WPForms integra-se perfeitamente com os principais plugins de criação de páginas do WordPress, como Elementor, Divi e SeedProd. Isso garante uma exibição de formulário sem problemas no front-end do seu site, eliminando a necessidade de codificação manual ou CSS.

Enquanto a versão gratuita do WPForms é suficiente para formulários de contato básicos, a versão WPForms Pro desbloqueia funcionalidades avançadas. Ao atualizar para o WPForms Pro, você obtém acesso a recursos como lógica condicional, formulários de pesquisa, modelos de formulário avançados e, principalmente, formulários de várias etapas—essenciais para nosso tutorial.

Para este guia, utilizaremos a versão WPForms Pro , equipada com todas as ferramentas necessárias para criar facilmente formulários de várias etapas no WordPress.

Crie um novo formulário de várias etapas no WordPress

Depois de instalar com sucesso o plug-in WPForms, você pode acessar facilmente seus recursos navegando até a seção Adicionar novo WPForms » no painel do WordPress. Essa ação exibirá imediatamente a página de modelos de formulário, concedendo a você uma seleção de diversos tipos de formulário para escolher.

Dividir qualquer formulário em um formulário de várias etapas pode ser feito sem esforço usando o plug-in WPForms. Para elucidar esse processo, vamos nos concentrar na transformação de um formulário de contato.

Comece atribuindo um nome ao formulário recém-criado e, em seguida, selecione o modelo "Formulário de contato simples".


Após a seleção, o WPForms continuará a carregar o modelo designado em seu criador de formulário intuitivo de arrastar e soltar.

Após a observação, torna-se evidente que o formulário de contato básico já incorpora campos de formulário para Nome, Email e Comentário ou Mensagem. Ao empregar a funcionalidade de clicar, arrastar e soltar, você tem a flexibilidade de modificar a sequência desses campos de acordo com suas preferências.

Além disso, o processo de complementar campos de texto adicionais ao formulário é fácil. Isso pode ser feito utilizando o painel esquerdo para selecionar o campo de texto desejado e, posteriormente, colocando-o no lado direito do formulário. A designação de campos obrigatórios pode ser realizada selecionando um campo e ajustando as configurações correspondentes.

Uma vez satisfeito com a disposição e seleção dos campos, prossiga para salvar as modificações e prossiga para a etapa seguinte.

Divida seu formulário em várias etapas

Para particionar seu formulário em etapas distintas, é necessário empregar o campo de formulário Quebra de página.

Para fazer isso, vá para a seção Fancy Fields localizada no painel esquerdo e selecione o campo Page Break. Posteriormente, arraste o campo escolhido para o local desejado dentro do seu formulário.

Para dividir seu formulário em um ponto específico, você tem a opção de colocar uma quebra de página estrategicamente.

Siga o procedimento mencionado acima para implementar as quebras de página desejadas em seu formulário. Posteriormente, você pode aumentar essas respectivas seções incorporando campos suplementares para finalizar o processo de criação do formulário.

O WPForms oferece flexibilidade para gerar várias páginas de formulário de acordo com suas necessidades. No entanto, é aconselhável ter discrição e evitar inundar os visitantes do seu site com um número excessivo de seções de formulário. Recomenda-se incluir apenas solicitações de informações essenciais, pois quaisquer detalhes adicionais podem ser coletados posteriormente em um estágio posterior.

Personalize sua página múltipla na barra de progresso

Para atender aos seus requisitos específicos de negócios e sites, você pode considerar a implementação de uma barra de progresso em seus formulários. Os indicadores de progresso servem para informar aos usuários sobre o estágio atual em que se encontram no formulário e estimar o tempo restante necessário para concluí-lo.

Ao exibir o progresso para os usuários, você fornece a eles uma representação visual de seu progresso, o que pode motivá-los significativamente a finalizar e enviar o formulário. Essa abordagem aborda efetivamente a inclinação comum dos indivíduos de evitar deixar tarefas incompletas.


O WPForms oferece três barras de progresso distintas que podem ser incorporadas ao seu formulário de várias partes. Essas opções incluem:

  1. Conectores: esse estilo se assemelha a uma barra de navegação, que conecta visualmente as várias seções do formulário por meio de uma série de barras que exibem os títulos de página correspondentes.
  2. Círculos: Esta alternativa apresenta círculos individuais, cada um rotulado com o título da respectiva etapa do formulário. Os usuários podem acompanhar facilmente seu progresso observando os círculos preenchidos.
  3. Barra de Progresso: Com esta opção, uma barra parcialmente colorida é empregada para ilustrar o avanço do usuário dentro do seu formulário. Esta ajuda visual dinâmica fornece uma indicação clara de sua posição atual.

Para ativar e personalizar a barra de progresso em seu formulário de várias etapas, basta clicar na seção de quebra da primeira página. A partir daí, você pode acessar as configurações necessárias para modificar sua aparência de acordo com suas preferências.

Ao acessar o construtor de formulários, um novo painel ficará visível, permitindo que você selecione seu estilo e cor preferidos para o indicador de progresso.

Caso opte pelo estilo de indicador de progresso Conectores ou Círculos, você poderá modificar o título da página, indicando assim aos usuários em qual estágio do formulário eles estão atualmente.

Como alternativa, o estilo Barra de Progresso fornece uma barra de progresso convencional que orienta os usuários pelas etapas restantes necessárias para preencher o formulário.

Para personalizar o título da próxima página e o botão Avançar, que direciona o usuário para a próxima seção do formulário, basta clicar na seção Quebra de página que foi inserida durante a configuração inicial do formulário. As opções de personalização serão exibidas no painel esquerdo do construtor de formulários.


Para proporcionar aos usuários a opção de navegar para a página anterior, é possível incorporar um botão "Anterior". Isso pode ser feito ativando a caixa de seleção "Exibir anterior" e posteriormente personalizando o título do botão de acordo com sua preferência.

Depois de finalizar a colocação das quebras de página e indicadores de progresso a seu gosto, é aconselhável prosseguir selecionando o botão "Salvar".

Defina suas configurações de formulário de várias etapas

Nesta fase específica, examinaremos as opções de configuração do seu formulário de várias vias. Inicialmente, prossiga clicando na aba “Configurações” e posteriormente selecionando a opção “Geral”.

Nessa interface, você pode atribuir um novo nome e fornecer uma descrição para seu formulário. Além disso, a personalização do botão de envio também é viável, juntamente com a opção de ativar funcionalidades anti-spam, como o Google Recaptcha.

Além disso, você tem a opção de habilitar as configurações AJAX e desabilitar o armazenamento de informações para garantir a conformidade com os regulamentos GDPR.

Depois de ajustar satisfatoriamente as configurações desejadas, lembre-se de salvar suas alterações clicando no botão "Salvar".

Configurar suas notificações de formulário

Navegue até a seção Notificações localizada no lado esquerdo da página de configurações do WordPress. Nesta seção, você encontrará as opções para configurar notificações para seu formulário de várias páginas.

As notificações referem-se às mensagens de e-mail enviadas a você sempre que os usuários enviam um formulário em seu site. Por padrão, WPForms permite notificações. No entanto, se preferir não receber notificações por e-mail, você pode selecionar a opção "Desativar" no menu suspenso.

Além disso, você tem a opção de utilizar Smart Tags, que permitem enviar um e-mail para o endereço de e-mail fornecido por cada usuário após o envio do formulário. Esse recurso pode ser útil para garantir aos usuários que suas respostas foram recebidas. Particularmente para formulários com vários estágios, os usuários podem apreciar muito essa confirmação, pois elimina qualquer incerteza sobre se o envio do formulário foi bem-sucedido.

Depois de configurar as notificações de formulário desejadas, lembre-se de clicar no botão Salvar para aplicar as alterações.

Mensagem de confirmação

A etapa subsequente envolve a seleção das mensagens de confirmação para seu formulário de vários estágios. Para acessar as opções, navegue até a página Configurações e clique no título Confirmações.

As confirmações de formulário servem para informar aos usuários que o envio do formulário foi bem-sucedido e fornecer instruções sobre as ações subsequentes que eles precisam realizar.

Dentro do WPForms, existem três tipos de confirmação disponíveis:

  1. Mensagem: Este é o tipo de confirmação padrão, que exibe uma mensagem direta de sucesso após o envio do formulário pelos usuários.
  2. Mostrar página: ao utilizar esse tipo de confirmação, os usuários serão direcionados para uma página diferente em seu site, como uma página de agradecimento.
  3. Ir para URL (Redirecionar): Ao usar esta mensagem de confirmação, você pode redirecionar os usuários para uma página em um site diferente do seu.

Agora, selecione o tipo de confirmação de sua preferência no menu suspenso fornecido e personalize-o adicionando a mensagem ou URLs desejados.

Quando estiver satisfeito com a aparência e as configurações, clique no botão Salvar.

Adicionar formulário de várias etapas ao WordPress

Depois de criar seu formulário de várias etapas, o próximo passo é incorporá-lo ao seu site WordPress. O WPForms oferece a flexibilidade de adicionar seu formulário a várias seções do seu site, como uma página, postagem, barra lateral ou até mesmo no tema do WordPress usando um shortcode.

A abordagem mais comumente usada é incorporar o formulário em uma postagem ou página do WordPress. Vamos agora explorar o processo de conseguir isso.

Para começar, crie uma nova postagem ou página no WordPress ou selecione uma já existente e clique na opção "Editar". Quando estiver dentro do editor do WordPress, clique no ícone de adição (+) para adicionar um novo bloco de conteúdo.

Role o menu pop-up até chegar à seção "Widgets" e clique no widget WPForms para incorporar o bloco ao WordPress.

Depois disso, clique no menu suspenso e escolha o formulário de várias etapas desejado.

O WPForms apresentará o formulário no editor do WordPress, permitindo que você visualize sua aparência antes de publicar.

Por fim, clique em "Publicar" ou "Atualizar" para ativar seu formulário. Aqui está um exemplo de como ele será exibido para seus usuários:

Empacotando


Os formulários de várias etapas provaram ser um meio eficaz de aprimorar as conversões de formulário no domínio do WordPress. Ao segmentar o formulário em estágios distintos, os usuários recebem uma experiência mais acessível e gerenciável, reduzindo assim a sensação de estar sobrecarregado e aumentando a probabilidade de conclusão do formulário. A pesquisa empírica demonstrou melhorias substanciais nas taxas de conversão com a implementação de formulários de várias etapas, principalmente quando o formulário compreende mais de três campos.

Concluindo, acreditamos que este artigo forneceu a você o conhecimento necessário para criar formulários de várias etapas no WordPress. O que é ainda mais notável é que você pode conseguir isso sem a necessidade de se aprofundar em uma única linha de código! WPForms , um plugin WordPress renomado, fornece uma plataforma amigável para gerar facilmente formulários de várias etapas, tornando o processo ainda mais simples e conveniente.

Divi WordPress Theme