Gostaria de saber como criar um formulário em várias etapas com Elementor ?
Você conhece o Typeform? Ele é um criador de formas popular plataforma online conhecida por seu estilo interativo. No Typeform você pode criar um formulário jogo online interativo de várias etapas para uma ampla gama de propósitos.
Se você tiver um site baseado em WordPress, alimentado por Elementor, você pode facilmente integrar seu formas Digite formulário usando complementos essenciais.
Veja também: Como adicionar uma grade de preços no Elementor
Mas desde a versão 2.9, Elementor em si tem um recurso que você pode usar para criar formas em várias etapas. Neste artigo mostraremos como fazer isso com a ajuda deElementor.
Un formulário As várias etapas em si são uma ótima ideia para economizar espaço em seu design (seja uma página ou um modelo de criação de tema). Ele permite que você reduza um formato longo para um formato 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
- Passatempo
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).
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 Style para personalizar seu formulário. Existem 5 blocos de ajuste que você pode abrir.
- 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.
...
