Como criar um formulário de múltiplos passos no WordPress [Plugin e código]

Formulários de múltiplas etapas facilitam para os usuários a conclusão de tarefas longas, como registros, pesquisas ou submissões detalhadas. Se você estiver pronto para implementar um em seu site WordPress, este guia mostrará como criar um formulário em várias etapas no WordPress usando um plugin de formulário de várias etapas do WordPress da Claspo ou código personalizado. 

O que é um formulário de várias etapas e quando ele funciona melhor?

Um formulário de várias etapas é um formulário que divide perguntas ou campos de entrada em várias etapas ou páginas, em vez de apresentá-los todos de uma vez. Essa abordagem torna formulários longos menos intimidantes e mais fáceis de completar para os usuários, dividindo seu formulário em seções menores.

Formulários de várias etapas são ideais para tarefas como registros, agendamentos, pesquisas e outras submissões de formulários detalhadas. Você pode facilmente criar formulários de múltiplas etapas para vários propósitos, seja um formulário conversacional, um formulário de contato simples ou um fluxo mais complexo de geração de leads. Essa flexibilidade permite que você divida o formulário em várias etapas conforme suas necessidades. Veja por que vale a pena usá-los:

• Engajamento do usuário aprimorado: dividindo seu formulário em várias partes gerenciáveis, eles se tornam menos opressivos e mantêm os usuários mais engajados.
• Usabilidade melhorada: indicadores de progresso guiam os usuários e mostram quanto do formulário ainda falta, fazendo com que o processo pareça mais curto e estruturado.
• Taxas de conclusão mais altas: os usuários têm mais probabilidade de finalizar os formulários quando eles são mais fáceis de visualizar e não parecem muito longos.
• Lógica condicional: formulários de múltiplas etapas podem coletar apenas as informações relevantes ao se adaptarem dinamicamente com base nas entradas do usuário.
• Conversões aumentadas: ao reduzir a fadiga do formulário e criar uma experiência perfeita, formulários de múltiplas etapas podem aumentar significativamente as taxas de submissão.

Como criar um formulário de múltiplas etapas no WordPress com Claspo

Claspo é um construtor simples e flexível de formulários de múltiplas etapas para tarefas diárias no WordPress. Você pode criar um formulário de múltiplas etapas gratuito para WordPress que fica ótimo em qualquer dispositivo, suporta vários idiomas e se integra com ferramentas populares de marketing. Com Claspo, você não apenas adiciona o formulário, você cria um fluxo de trabalho que atrai clientes potenciais e constrói relações com eles.

Passo 1: Instalar o plugin Claspo

Primeiro, você precisa integrar o plugin construtor de formulário Claspo ao seu painel do WordPress. Claspo funciona como um assistente de formulário do WordPress, tornando fácil configurar e personalizar seus formulários sem codificação. Eis o que você precisa fazer: 

1. Crie uma conta para usar nosso criador de widgets para seu site.
2. Vá até a loja de plugins do WordPress, procure por “Claspo” e clique em Download.
3. Faça login no painel administrativo do WordPress.
4. Navegue até Plugins > Upload.
5. Selecione e envie o arquivo.
6. Uma vez instalado, vá até Claspo e encontre o ID do Script. No painel lateral esquerdo, navegue até <>Script.
7. Verifique a integração e você está pronto!

Passo 2: Acesse Claspo e crie um novo formulário

Faça login em sua conta Claspo e vamos começar. Clique no botão Novo Widget e selecione Biblioteca de Modelos. Se você estiver se sentindo criativo, pode começar com um formulário em branco e construir seu próprio layout.

Você será apresentado ao nosso catálogo de modelos. No filtro Recursos, selecione Multi-Passo, e verá todos os modelos de formulários multi-passo. Escolha o tema do formulário multi-passo para o seu site WordPress.

Passo 3: Desenhe seu formulário multi-passo

Para fins de demonstração, usaremos o seguinte modelo:

Experimente este modelo

Este formulário de contato do WordPress já possui três etapas: 

• A primeira etapa do formulário coleta informações pessoais.
• A segunda parte do formulário coleta email e idade.
• A próxima etapa do formulário captura detalhes de contato e a data desejada da aula.

Vamos personalizar cada uma das seções do seu formulário juntos. Vamos começar com o formulário de solicitação principal.

Vamos substituir o campo de sobrenome por um campo para os usuários compartilharem sua idade. Isso nos dará uma ideia de qual público está interessado em nossas aulas e pode ajudar a preparar os grupos. Também substituiremos o texto sob o cabeçalho por uma cópia mais envolvente que adiciona escassez.

Vamos mover para a próxima página. Pediremos o e-mail do usuário e descobriremos seu estilo de dança preferido. Assim como no primeiro formulário, removeremos um campo padrão e o substituiremos por uma entrada de texto. Também adicionaremos algum texto sob o cabeçalho para explicar melhor por que estamos pedindo essa informação. Como já pedimos o nome da pessoa, podemos adicionar uma tag de mesclagem para personalizar esta etapa.

E por que não substituir a imagem para tornar o formulário ainda mais dinâmico? Imagine que nosso negócio ensina diferentes estilos — esta é uma ótima oportunidade para reforçar isso.

E para a página final, também substituiremos o texto e a imagem padrão e tornaremos o campo de telefone opcional.

É inteligente adicionar um botão Voltar aqui caso os usuários queiram alterar algo que inseriram anteriormente. Basta adicionar um segundo botão ao passo, clicar nele, abrir a guia Geral e selecionar 'Página anterior' em 'Ação ao clicar'. Assim, os usuários podem voltar e fazer edições a qualquer momento.

É isso. Agora, só precisamos personalizar as páginas de sucesso e erro. Vamos adicionar mais detalhes sobre o que esperar em seguida e incluir uma tag de mesclagem com o primeiro nome para personalizar as entradas do formulário.

Passo 4: Ajustar as regras de exibição

Agora que o design está pronto, vamos falar sobre as configurações de exibição. Este formulário específico no front end é destinado a ser usado para prevenir a saída do site, portanto, vamos ativar a opção de Intenção de saída.

No entanto, você pode usar este widget e qualquer outro tipo de formulário como um formulário de inscrição. As regras da Claspo oferecem muita flexibilidade para tornar seu direcionamento super preciso. Por exemplo, você pode escolher em quais páginas o popup aparece ou segmentar usuários por país ou cidade. Por que não criar popups únicos com recompensas especiais para diferentes locais? Você pode até usar parâmetros UTM para garantir que o popup pareça uma parte natural de uma campanha maior.

Você pode ter notado três gatilhos adicionais disponíveis:

• Gatilho de inicialização: uma inicialização é um pequeno ícone que fica no canto inferior da página. Usuários podem clicar nele para abrir o popup sempre que quiserem. Você pode configurá-lo durante a primeira etapa de criação do popup ou adicioná-lo posteriormente. É perfeito para dar mais controle aos usuários.
• Gatilho de clique HTML: isso permite que você use qualquer elemento clicável na página para mostrar o popup. Por exemplo, ele pode aparecer quando alguém clica em uma imagem, botão ou link de texto.
• Gatilho de API: esta opção permite controlar programaticamente quando e como os popups são exibidos. É ideal para personalizações avançadas, integração com outros serviços ou melhorar a experiência do usuário, mas requer algum conhecimento técnico.

Assim, cabe a você decidir como usar o formulário; seguiremos com a prevenção de saída para este guia. 

Passo 5: Integre seus formulários com ESP ou CRM

O passo final é conectar o Claspo às suas outras ferramentas, como um CRM ou provedor de serviços de e-mail. Isso permite que as informações coletadas através do formulário criem automaticamente leads em seu CRM ou disparem campanhas de e-mail. Assim que os usuários enviarem o formulário, todos os dados coletados são processados e transferidos com segurança.

O Claspo se integra a muitas ferramentas de software populares. Basta escolher as que você precisa e mapear os campos para garantir que todas as informações sejam salvas corretamente.

Se um fornecedor de software não está na lista, você pode criar um webhook e transferir informações do formulário para praticamente qualquer sistema.

Passo 6: Testar e otimizar

O Claspo facilita o teste e a otimização de seus formulários avançados do WordPress. Você pode configurar testes A/B com apenas alguns cliques, e o Claspo reunirá estatísticas de desempenho de seus widgets de site. Isso ajuda a identificar pontos fracos, como abandono de formulários ou fadiga do usuário, permitindo que você ajuste seu design para obter melhores resultados.

Para obter insights ainda melhores, use ferramentas de mapa de calor ou outros softwares para ver como os usuários estão preenchendo o formulário e aplique esses dados para realizar testes mais eficazes no Claspo.

Etapa para criar um formulário passo a passo no WordPress com código personalizado

Criar um formulário multi-etapas no WP do zero é mais do que apenas uma tarefa de design; é um esforço colaborativo que requer a contribuição de vários papéis para garantir tanto a funcionalidade quanto uma experiência do usuário perfeita. Dependendo da complexidade do formulário usando código personalizado, você pode precisar de:

• Um designer de UI/UX para criar um design intuitivo.
• Um desenvolvedor frontend para implementar a interface e a lógica de navegação, incluindo qualquer configuração necessária de bloco de quebra de página do formulário.
• Um desenvolvedor backend para lidar com o armazenamento e processamento de dados.
• Um especialista em QA para testar o formulário em diversos dispositivos e cenários.

Para um formulário simples que você deseja construir, este processo pode levar uma pequena equipe de 20 a 40 horas. No entanto, formulários complexos com recursos avançados como validação em tempo real ou integrações podem exigir 60 a 100 horas ou mais, dependendo do escopo.

Etapa 1. Definindo o propósito e a estrutura

A base de um formulário multi-etapas começa com a compreensão de seu propósito. Isso requer a colaboração entre partes interessadas e gerentes de produto para identificar o objetivo do formulário e o tipo de informação necessária. A informação é então dividida em etapas lógicas para garantir um fluxo natural.

Etapa 2. Projetando a interface do usuário

Uma vez que a estrutura esteja delineada, o foco passa a ser o design de como o formulário se parece e funciona. Um designer de UI/UX cria um plano visual. A fase de design é crucial para garantir clareza e facilidade de uso, pois isso impacta diretamente o engajamento do usuário e as taxas de conclusão. 

Etapa 3. Desenvolvendo o Frontend

Nesta etapa, o formulário começa a tomar forma através do desenvolvimento frontend. Usando o design como guia, o desenvolvedor frontend cria o layout para cada etapa e implementa o sistema de navegação. Isso pode incluir a configuração de uma opção de contêiner de formulário para organizar elementos e etapas do formulário de forma ordenada. 

Etapa 4. Adicionando validação e feedback

A validação garante a precisão e integridade das informações coletadas. A validação de entrada pode ocorrer em tempo real no frontend ou após a submissão no backend. 

Por exemplo, o sistema pode verificar se os endereços de e-mail estão formatados corretamente ou se os campos obrigatórios do formulário não estão vazios. Fornecer feedback instantâneo mantém os usuários informados sobre erros ou detalhes faltantes, reduzindo a frustração e garantindo a qualidade dos dados.

Etapa 5. Implementando o manuseio de dados

Com a navegação e validação em vigor, a atenção se volta para o tratamento dos dados. O desenvolvedor backend garante que as informações submetidas pelos usuários sejam capturadas e armazenadas com segurança. 

Isso envolve configurar servidores ou APIs para receber os dados e salvá-los em um banco de dados seguro. Em casos onde o formulário é complexo ou se integra com ferramentas de terceiros, trabalho adicional de backend pode ser necessário para gerenciar essas conexões de forma perfeita.

Passo 6. Teste e refinamento

Antes que o formulário de múltiplas etapas esteja pronto para os usuários, ele deve ser rigorosamente testado para garantir que tudo funcione conforme o esperado. Os testes também identificam possíveis problemas de experiência do usuário, que são resolvidos durante esta fase. Refinar o formulário com base nessas informações garante um produto final polido.

Tipos de formulários que convertem melhor no layout de múltiplas etapas

Assim como existem melhores usos para formulários simples de uma etapa, os formulários de múltiplas etapas do WordPress são ótimos para:

1. Formulários de inscrição

Vamos pegar um formulário de inscrição para newsletter. Com a ajuda de um formulário de registro multi-etapa gratuito do WordPress, você pode matar dois coelhos com uma cajadada: criar um processo de inscrição amigável e coletar informações valiosas para enviar newsletters que seus leitores querem ler.

Use este modelo

2. Formulários de geração de leads

Formulários de múltiplas etapas aprimoram os esforços de geração de leads permitindo que você colete informações detalhadas sobre os prospects sem sobrecarregá-los. Isso, por sua vez, facilita a avaliação e categorização dos prospects para determinar a probabilidade de se tornarem clientes pagantes.

Use este modelo

3. Pesquisas e feedbacks 

O número ideal de perguntas para um formulário de feedback em várias páginas varia dependendo do objetivo da pesquisa, público-alvo e tempo desejado de conclusão. No entanto, pesquisas sugerem que de 5 a 15 perguntas são geralmente adequadas para obter insights significativos. Se você agrupar suas perguntas sabiamente e dividir o formulário em etapas, facilitará o compromisso dos usuários.

Use este modelo

4. Formulários de pré-venda 

Usar formulários de múltiplas etapas no WordPress para coletar pré-vendas permite que os usuários validem facilmente as informações em cada etapa, o que pode ajudar a reduzir erros. Como cada etapa segue logicamente a anterior, é mais difícil perder campos críticos ou inserir dados incorretos.

Use este template

5. Formulário de registro multi-etapas no WordPress

Para registros, é melhor criar um formulário de múltiplas etapas em vez de sobrecarregar os usuários com formulários mais longos. Dividir o formulário em seções — como informações pessoais, configuração de conta e preferências — ajuda as pessoas a manter o foco e concluir.

Com o Claspo, criar formulários como este é fácil. Você controla todas as configurações do formulário: campos obrigatórios, etapas e fluxo. E se precisar de alterações, as atualizações são simples. No final, este formulário funciona melhor tanto para os usuários quanto para o seu negócio.

Use este template

Dicas de UX para tornar formulário WP com layout multi-etapa melhor em conversão

Mesmo se você estiver usando um plugin ou construtor gratuito, um bom design ainda faz a maior diferença. Abaixo estão dicas simples de UX para ajudá-lo a criar um formulário WordPress multi-etapas que não apenas parece ótimo, mas também converte visitantes em leads ou clientes.

Indicadores de progresso do formulário

Um elemento crucial de um formulário WP multi-etapas bem-sucedido é a indicação clara de progresso. Os usuários gostam de saber onde estão e quanto esforço ainda é necessário para terminar. Uma barra de progresso ou indicadores de etapas no topo do formulário multipartes são ótimas ferramentas para visualizar o progresso das páginas do formulário.

Se você está usando templates de formulário multi-etapas da Claspo, esta dica já está incluída. Todos os formulários vêm com indicadores de progresso, mas você pode ajustá-los conforme necessário. Por exemplo, em vez de uma barra de progresso, você pode adicionar páginas de checkpoint que informam aos usuários quão longe estão no progresso. 

Uma etapa = uma tarefa

Igualmente importante é a agrupação cuidadosa de informações relacionadas. Por exemplo, uma etapa pode se concentrar exclusivamente em detalhes pessoais, outra em informações de contato, e assim por diante. 

Você encontrará muitos exemplos de formulários multi-etapas seguindo essa abordagem — cada seção tem um propósito claro, permitindo aos usuários focar em completar uma tarefa por vez. Para apoiar isto, mantenha cada etapa concisa, idealmente com não mais que cinco a sete campos, e use cabeçalhos para indicar claramente o propósito de cada seção.

Dicas e instruções

Ao criar seu formulário multi-etapas no WordPress, forneça contexto e instruções claras. Os usuários são mais propensos a completar formulários quando entendem claramente por que certas informações estão sendo solicitadas e como preencher campos específicos.

Adicione descrições curtas e úteis no topo de cada etapa. Por exemplo, uma etapa que solicita detalhes de endereço pode incluir uma nota como, "Por favor, forneça o endereço onde gostaria que seus itens fossem entregues." 

Telas de confirmação e erro

Os momentos finais da interação de um usuário com seu formulário multi-etapas podem deixar uma impressão duradoura sobre o seu negócio. Uma tela de confirmação bem projetada oferece segurança e clareza, ajudando os usuários a saberem que suas ações foram bem-sucedidas. Se você criar formulários multi-etapas com um plugin de formulário multi-etapas para WordPress como o Claspo, você pode facilmente personalizar essas telas para coincidir com sua marca. 

Use um tom amigável que reflita sua marca e pistas visuais, como um ícone de marca de seleção verde ou de celebração, para reforçar o sucesso. Incluir uma chamada para ação (CTA) clara, como explorar a conta ou retornar à página inicial, pode guiar os usuários suavemente para o próximo passo.

Já as telas de erro, por outro lado, devem explicar claramente o que deu errado e fornecer passos acionáveis para resolver o problema. A especificidade é essencial — os usuários precisam de um caminho claro para seguir em frente. Use um tom de apoio e ofereça soluções como um botão "Tentar Novamente" ou dicas de resolução de problemas para reduzir a frustração e manter a confiança.

Como barras de progresso, essas telas são o padrão no Claspo. Nós simplesmente as adicionamos para cada página do seu formulário com múltiplas etapas. 

Usabilidade móvel

Tornar seus formulários de várias etapas amigáveis para dispositivos móveis não é negociável. Embora o tamanho médio da tela hoje varie de 6,1 polegadas a 6,7 polegadas na diagonal — o que pode parecer espaço suficiente — você precisa garantir que seu formulário seja fácil de interagir. 

Campos e botões devem ser grandes o suficiente para facilitar o toque e todos os elementos devem se empilhar verticalmente para evitar a rolagem horizontal. Você também pode querer desativar imagens ou vídeos grandes para economizar espaço.  

Dilema entre plugin de formulário multi-etapa para WordPress vs código personalizado

Então, você se depara com uma escolha: construir código personalizado ou usar um plugin de formulário de múltiplas etapas para WordPress como o Claspo. Vamos detalhar isso pela facilidade de uso, tempo para mercado e custo — três fatores-chave para os profissionais de marketing do dia a dia que precisam de resultados rápidos.

Facilidade de uso

Código personalizado requer habilidades de codificação, o que pode consumir tempo e ser complicado de gerenciar, especialmente para os profissionais de marketing que querem focar em suas campanhas. Em contraste, o Claspo oferece um construtor de formulários WordPress simples, sem código, que qualquer pessoa pode usar. Você não precisa de expertise técnica — basta arrastar, soltar e personalizar. Mesmo configurações mais complexas, como um formulário de múltiplas etapas com lógica condicional, podem ser facilmente feitas com a interface do Claspo.

Tempo para mercado

Construir formulários personalizados pode levar dias (ou até semanas) de desenvolvimento e teste. Com o Claspo, você pode lidar com a criação de formulários e lançar um formulário WP multi-etapa de graça e em menos de 15 minutos. Esta velocidade permite que você teste rapidamente novas ideias, ajuste conforme necessário e mantenha seus esforços de marketing ágeis.

Custo

Código personalizado requer um investimento substancial, considerando taxas de desenvolvedores e potenciais custos de manutenção. Por outro lado, o plugin de construtor de formulários WordPress do Claspo tem um plano gratuito para sempre, significando que você pode criar formulários sem custo algum. É uma opção econômica para profissionais de marketing que querem experimentar sem risco financeiro.

Conclusão

Para os profissionais de marketing do dia a dia, o plugin de formulário wizard para WordPress do Claspo é a escolha clara. É gratuito, fácil de usar e rápido, permitindo que você traga suas ideias à vida sem complicações. Por que gastar tempo e dinheiro em desenvolvimento personalizado quando você pode alcançar os mesmos (ou melhores) resultados em minutos com o Claspo?