Se você já trabalhou com formulários multistep usando o JetFormBuilder, sabe como pode ser frustrante não conseguir personalizar o label do último passo do formulário. Muitas vezes, o JetFormBuilder deixa esse label padrão, algo como “Final Step”, que não combina com a identidade do seu formulário ou com a experiência que você quer entregar ao usuário.
Eu sou Dante Testa, e neste artigo vou te mostrar uma solução simples, prática e nativa do próprio JetFormBuilder para personalizar o label do último step do seu formulário multistep, sem precisar recorrer a gambiarras, programação ou ferramentas externas. Se você quer dar um toque profissional e personalizado ao seu formulário, continue lendo e acompanhe o passo a passo completo.
O Problema Comum do Último Step no JetFormBuilder
Quando você cria um formulário multistep no JetFormBuilder, cada etapa pode ter um label, que aparece para o usuário como uma indicação do progresso. Por exemplo, no primeiro passo, pode estar escrito “Dados Pessoais”, no segundo “Credenciais”, e assim por diante.
O problema acontece quando você chega no último step: o JetFormBuilder, por padrão, coloca um label genérico, algo como “Final Step”. Isso quebra a personalização e pode deixar seu formulário com uma aparência pouco profissional. Muitos usuários acabam apelando para soluções complexas, como usar códigos personalizados, scripts ou até pedir ajuda em chats de suporte, mas isso não é necessário.
Como Personalizar o Label do Último Step de Forma Nativa
Vou te mostrar como resolver isso direto na interface do JetFormBuilder, sem precisar programar. O segredo está no uso correto dos componentes Form Page Break, Prev Page e Action Button, além de um truque especial para o último passo.
Passo 1: Configurando o Primeiro Step
Imagine que você já está dentro do JetFormBuilder, criando seu formulário multistep. O primeiro passo é adicionar um componente chamado Form Page Break. Para isso, basta pesquisar por form page break na lista de componentes e arrastar para o seu formulário.
Esse componente é responsável por dividir as etapas do formulário. No primeiro Form Page Break, você vai definir o label do progresso, por exemplo, Dados Pessoais. Esse label é o que aparecerá para o usuário indicando em qual etapa ele está.
Além disso, você pode configurar uma mensagem de validação para os campos obrigatórios desse passo. Assim, se o usuário tentar avançar sem preencher os dados essenciais, ele receberá um aviso personalizado.
Passo 2: Configurando o Segundo Step
No segundo passo, você adiciona mais campos, por exemplo, para login ou credenciais. Novamente, insira um Form Page Break para marcar o fim da segunda etapa.
Desta vez, ative tanto o botão de Próximo quanto o de Voltar. Assim, o usuário pode navegar entre as etapas livremente. No label do progresso, coloque um nome que faça sentido para essa etapa, como Credenciais.
Também configure mensagens de validação para garantir que o usuário preencha os campos necessários antes de avançar.
Passo 3: Configurando o Último Step com Label Personalizado
Agora chegamos na parte mais importante: o último passo do formulário. Aqui, você adiciona os últimos campos que o usuário precisa preencher, por exemplo, uma senha.
Para esse step, você deve usar o componente Prev Page para permitir que o usuário volte para o passo anterior, caso queira corrigir algo.
Depois, adicione um Action Button, que é o botão de submit do formulário. Você pode personalizar o texto desse botão para algo como Cadastrar, Registrar ou qualquer outro que combine com o seu formulário.
O truque final é adicionar mais um Form Page Break logo após o botão de submit, mas desta vez:
- Desative os botões Next (próximo) e Prev (voltar), para que não apareçam na tela.
- No campo Label of Progress, escreva o nome personalizado que você quer para o último step, como Senha ou qualquer outro texto que desejar.
- Configure também a mensagem de validação para esse último passo.
Com isso, o seu formulário terá três steps, cada um com um label personalizado e o último passo com o nome que você escolheu, sem aquele texto padrão do JetFormBuilder.
Resumo dos Componentes Usados
- Form Page Break: Divide as etapas do formulário e permite configurar o label do progresso e mensagens de validação.
- Prev Page: Botão para o usuário voltar para o passo anterior.
- Action Button: Botão para submeter o formulário.
Benefícios de Usar Essa Solução Nativa
Essa técnica simples traz várias vantagens:
- Sem programação: Não precisa escrever nenhum código, ideal para quem não tem experiência técnica.
- Personalização total: Você pode definir exatamente os nomes dos steps, deixando o formulário com a sua cara.
- Melhor experiência para o usuário: Labels claros e personalizados ajudam o usuário a entender onde está no processo.
- Evita gambiarras: Sem precisar usar hacks ou soluções improvisadas que podem quebrar com atualizações.
Onde Comprar o JetFormBuilder e Outras Dicas
Se você ainda não tem o JetFormBuilder Pro, recomendo comprar pela plataforma Full, que é uma empresa confiável que aluga plugins com segurança e praticidade.
Eu deixo um link especial com cupom de desconto para quem quiser adquirir o plugin:
- https://dantetesta.com.br/full
- Cupom de desconto: DANTEFULL
Além disso, já gravei um vídeo explicando detalhadamente como comprar plugins na Full, ativar e utilizar o sistema deles, para que você não tenha nenhuma dúvida durante a compra.
Aprenda Ainda Mais com o Treinamento Jetmaster
Se você quer dominar o universo do WordPress, Elementor, JetEngine e ainda usar inteligência artificial para potencializar seus projetos, eu tenho um treinamento completo chamado Jetmaster.
Esse curso é o melhor do mercado e conta com suporte ao vivo toda quarta-feira, onde eu tiro dúvidas ao vivo, olho no olho, e ajudo você a resolver qualquer problema que aparecer, inclusive questões como a personalização do último step no JetFormBuilder.
Quer saber mais ou se inscrever? Use o cupom de desconto JET15 para garantir um preço especial.
Você pode conferir tudo no site oficial:
Considerações Finais
Personalizar o último step do seu formulário multistep no JetFormBuilder é mais simples do que parece. Com o uso correto dos componentes nativos e algumas configurações simples, você consegue deixar seu formulário com um visual profissional e funcional, sem dores de cabeça e sem precisar programar.
Se você gostou dessa dica, não deixe de compartilhar, comentar e seguir aprendendo. Personalizar seus formulários é um passo importante para melhorar a experiência do usuário e aumentar a conversão dos seus projetos.
Obrigado por ler até aqui! Espero que essa solução tenha salvado seu dia e facilitado sua vida na criação de formulários multistep com JetFormBuilder.
FAQ
1. O que é o JetFormBuilder e para que serve?
O JetFormBuilder é um plugin para WordPress que permite criar formulários dinâmicos e multistep, integrados com o Elementor. Ele é ideal para construir formulários personalizados, como cadastros, pesquisas ou formulários de contato, com uma interface amigável e sem necessidade de programação.
2. Por que o último step do formulário multistep no JetFormBuilder aparece como “Final Step”?
Por padrão, o JetFormBuilder atribui um label genérico, como “Final Step”, ao último passo de um formulário multistep. Isso acontece porque o plugin não configura automaticamente um label personalizado para a última etapa, mas é possível alterá-lo usando os componentes nativos do plugin.
3. Como personalizar o label do último step sem programar?
Você pode personalizar o label do último step usando o componente Form Page Break. Após adicionar o botão de submit (Action Button), insira um Form Page Break, desative os botões “Next” e “Prev”, e defina o nome desejado no campo “Label of Progress” (ex.: “Senha” ou “Conclusão”). Isso substitui o label padrão.
4. Quais componentes do JetFormBuilder são necessários para criar um formulário multistep?
Os principais componentes são: Form Page Break: Divide as etapas do formulário e define os labels de progresso. Prev Page: Adiciona um botão para voltar à etapa anterior. Action Button: Cria o botão de envio (submit) do formulário, como “Cadastrar” ou “Enviar”.
5. É possível personalizar mensagens de validação para cada etapa?
Sim! No componente Form Page Break, você pode configurar mensagens de validação personalizadas para cada etapa, exibidas quando o usuário tenta avançar sem preencher campos obrigatórios.
6. Preciso de conhecimento em programação para personalizar o último step?
Não! A solução apresentada utiliza apenas os recursos nativos do JetFormBuilder, como os componentes Form Page Break, Prev Page e Action Button, sem necessidade de códigos ou scripts.
7. Onde posso comprar o JetFormBuilder Pro?
Você pode adquirir o JetFormBuilder Pro na plataforma Full, que oferece plugins com segurança. Acesse https://dantetesta.com.br/full e use o cupom DANTEFULL para obter desconto.
8. Existe algum curso para aprender mais sobre JetFormBuilder e WordPress?
Sim! O Jetmaster é um treinamento completo que cobre WordPress, Elementor, JetEngine e JetFormBuilder, com suporte ao vivo toda quarta-feira. Acesse https://www.cursojetmaster.com.br e use o cupom OFF10 para desconto.
