Gostaria de saber como criar um formulário de várias etapas com Elementor?

Você conhece o Typeform? Ele é um popular criador de formulários online, conhecido por seu estilo interativo. No Typeform, você pode criar um formulário on-line interativo de várias etapas para uma ampla variedade de propósitos.

Se você tiver um site baseado em WordPress, alimentado por Elementor, você pode integrar facilmente seus formulários Typeform usando Addons essenciais.

Veja também: Como adicionar uma grade de preços no Elementor

Mas desde a versão 2.9, o próprio Elementor tem um recurso que você pode usar para criar formulários de várias etapas. Neste artigo, mostraremos como fazer isso com a ajuda do Elementor.

O próprio formulário de várias etapas é uma ótima ideia para economizar espaço em seu design (seja uma página ou um modelo de criador de tema). Ele permite que você encurte um formulário longo em um formulário mais simples.

Como criar um formulário com várias etapas no Elementor

Antes de começar, certifique-se de ter atualizado seu Elementor para a versão pro, caso ainda não tenha feito isso, pois o widget Form (o widget Elementor para criar formulários) está disponível apenas no pro.

Leia também: Como criar um formulário de contato no Elementor

Neste artigo, vamos pular direto para adicionar o widget Form. O formulário de várias etapas que iremos criar consiste em três etapas, como segue:

  • Etapa 1: nome e gênero
  • Etapa 2: telefone e e-mail
  • Etapa 3: botão de opção

Primeiro, arraste o widget Form para a caixa de edição do Elementor.

Vá para o painel de configurações no lado esquerdo para fazer as configurações. No bloco Campos do formulário em a guia Conteúdo, defina os campos de acordo com suas necessidades. No nosso caso, os campos são os seguintes:

  • Nome completo
  • Gênero
  • telefone
  • E-mail
  • Passatempo

crie um formulário em várias etapas

Quando terminar de adicionar e definir os campos de formulário de que você precisa, adicione outro campo e defina o tipo de campo para Passo.

Veja também: Como criar uma imagem arredondada no Elementor

Esta etapa adiciona automaticamente um novo campo na ordem superior e um novo campo na parte inferior. Você pode definir o rótulo do campo superior para algo como passo 1.

Em seguida, arraste o campo inferior e coloque-o logo acima do campo da segunda etapa (o campo Telefone, neste caso).

Adicione outro campo e defina o tipo de campo no degrau. Arraste-o e coloque-o logo acima do campo na terceira etapa (o campo Hobby neste caso).

crie um formulário em várias etapas

Aqui. Você pode visualizar o resultado antes de personalizar o formulário. Por padrão, o tipo de etapa é definido como número e texto.

Você pode editar a partir do bloco Parâmetros de etapa sob a guia Contente.

Você pode acessar a guia Estilo para personalizar seu formulário. Existem 5 blocos de ajuste que você pode abrir.

crie um formulário de várias etapas com Elementor

  • Contato : você pode abrir este bloco para definir o espaço entre as colunas e as linhas do formulário, a tipografia (família da fonte, tamanho da fonte, estilo da fonte, etc.) das etiquetas do formulário e a cor do texto deste último .
  • Campos : Você pode abrir este bloco para definir a tipografia dos campos do formulário, a cor do texto dos campos, o fundo, a largura da borda, a cor da borda e o raio da borda.
  • Botão: Você pode abrir este bloco para personalizar os botões. Quer seja o botão enviar, o botão anterior ou o botão seguinte. Você pode definir elementos como tipografia do texto, cor do texto, cor de fundo, etc.
  • mensagem: Você pode abrir este bloco para definir a tipografia das mensagens, bem como a cor do texto.
  • Passos: Você pode abrir este bloco para definir a tipografia das etapas, a cor, a largura do separador, o espaço do separador, etc ...

Quando terminar de editar seu modelo, você pode publicá-lo ou atualizá-lo.

Leia também: Como criar uma seção de membro da equipe com Elementor 

Se você deseja inserir o formulário que acabou de criar em uma página do Gutenberg (ou talvez deseja inseri-lo em uma postagem de blog), pode salvar o widget Form como um widget global. Você pode então importar o widget usando o plugin Elementor Blocks para Gutenberg.

Obtenha o Elementor Pro agora!

Conclusão

Aqui está ! É isso neste artigo que mostra como criar um formulário de várias etapas com o Elementor.  Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...

0 ações
ação
chilrear
Enregistrer