Como construir um formulário de lógica condicional elementar em 5 etapas

Adicionar lógica condicional ao formulário Elementor pode aumentar as taxas de envio de formulários.

Como? Bem, porque o formulário Elementor de lógica condicional pode garantir que seus clientes não precisem preencher campos desnecessários. Como resultado, oferece uma melhor experiência ao usuário.

Você sabe qual é a melhor parte da forma lógica condicional Elementor?

Bem, a melhor parte é que construir a forma lógica condicional do Elementor é uma tarefa realmente fácil. Especialmente se você seguir este artigo. Porque neste blog você aprenderá como construir a forma lógica condicional Elementor em apenas 5 passos.

Além disso, você aprenderá sobre as vantagens de usar a forma lógica condicional Elementor e quando usá-la.

Então, continue lendo….

O que é lógica condicional em formulários?

A lógica condicional em formulários é uma maneira de controlar como um formulário age com base na entrada do usuário. Você pode ocultar campos de formulário específicos ou vários campos e torná-los visíveis apenas depois que o usuário realizar uma determinada ação ou escolher um determinado valor em seus formulários.

É uma prática comum nos formulários do WordPress hoje em dia. Vá para a próxima seção para descobrir por que a lógica condicional é popular e quando as pessoas costumam usar isso em seus formulários.

Por que e quando usar a lógica condicional na forma elementar?

Os formulários condicionais são realmente muito eficazes para garantir que seus clientes tenham a melhor experiência ao preencher seus formulários. Além disso, garante que você obtenha a quantidade exata de dados de que precisa.

Quer saber como?

Bem, os clientes não gostam particularmente de preencher formulários. Vamos enfrentá-lo, não é realmente o hobby de ninguém!

Além disso, se você pedir a eles que forneçam informações que não sejam particularmente úteis/relevantes para eles, é óbvio que seus usuários ficarão irritados.

E é exatamente aí que a lógica condicional nos formulários é útil. Porque com a lógica condicional, você pode garantir que seus formulários solicitarão aos usuários apenas que preencham as informações relevantes e não todos os campos do formulário.

Basicamente, a forma condicional no Elementor segue a lógica “If condition”. Por exemplo, se a condição A for verdadeira, a Ação X ocorrerá, caso contrário, não. Você também pode configurar muitas condições para uma única ação. Por exemplo, a Ação X só ocorrerá se a Condição A e a Condição B forem verdadeiras, ou se uma delas for verdadeira.

Vamos falar sobre um exemplo da vida real, suponha que de uma forma você queira saber quantas crianças levarão para um evento.

Agora você não precisa pedir para todos preencherem o número de filhos. Você pode perguntar primeiro se eles planejam trazer crianças e, uma vez que eles digam que sim, você pode mostrar a opção no formulário para selecionar quantas crianças eles levarão.

Dessa forma, aquelas pessoas que não vão trazer nenhuma criança não terão que preencher o número de campos filho. Na verdade, eles terão um formulário mais curto que os motivará a terminar de preencher o formulário em vez de abandoná-lo no meio do caminho.

Para resumir, aqui estão as vantagens de usar lógica condicional na forma Elementor:

• Economiza tempo dos usuários, pois os usuários só precisam preencher os campos que são destinados a eles.
• Melhora a experiência do usuário, pois os formulários condicionais são mais convenientes.
• Incentiva os usuários a preencher o formulário, pois são mais curtos do que os sem lógica condicional.
• Você obtém todas as informações relevantes e uma maior taxa de envio de formulários.

Agora que você sabe como a lógica condicional pode ser útil, vamos para a próxima seção, onde você aprenderá como adicionar lógica condicional ao formulário Elementor.

Como construir o formulário Elementor de lógica condicional: guia passo a passo

Siga todas as etapas corretamente para criar seu formulário Elementor de lógica condicional em alguns momentos.

Passo 1: Instale os plugins necessários

Para adicionar lógica condicional a um formulário Elementor, juntamente com a versão gratuita do Elementor, você precisa instalar um construtor de formulários Elementor MetForm. Você vai precisar dos dois

1. MetForm (Gratuito)
2. MetForm Pro

Você pode dar uma olhada na documentação se precisar de ajuda com o processo de instalação e ativação do MetForm.

Nota : Você não precisa da versão Elementor Pro para seguir este processo.

Etapa 2: arraste e solte o widget MetForm na sua página Elementor

Agora vá para a página onde você deseja adicionar seu formulário de lógica condicional Elementor. Você pode adicionar o formulário condicional a uma página existente ou criar uma nova página. No entanto, certifique-se de estar no modo Editar com Elementor .

Agora procure por MetForm, assim que encontrar o widget, arraste e solte na página.

Etapa 3: criar/adicionar um formulário à sua página

Agora, você pode escolher um formulário existente ou criar um novo. Para criar um novo formulário ou adicionar um já existente, clique no botão Editar formulário.

Eu já criei um formulário de reserva de demonstração, então vou

• Escolha “Selecionar formulário”
• Selecione meu formulário existente chamado "Formulário Elementor de lógica condicional" no menu suspenso
• em seguida, clique em Editar formulário.

Etapa 4: adicionar lógica condicional aos campos de formulário do Elementor

Usando o recurso condicional do MetForm, você pode ocultar/mostrar o campo de formulário com base em várias condições , como se o campo dependente estiver vazio, não vazio, igual (corresponde a algum valor), diferente de, maior que, maior que igual, menor que , etc. Além disso, você pode personalizar se todas as condições precisam ser verdadeiras ou se qualquer uma delas precisa ser verdadeira para que a ação ocorra.

Neste artigo, vou aplicar algumas dessas condições, você pode seguir as mesmas etapas para aplicar todas as condições. Para aplicar qualquer condição , você precisa seguir os seguintes passos:

Edite o campo e ative a lógica condicional

Para isso, no campo do formulário, clique no ícone de edição no canto superior direito , depois no painel de configurações esquerdo e role um pouco para baixo, depois expanda a opção Condition Logic e por fim ative o botão Enable.

  Defina os critérios e Ação

Agora, escolha os critérios de correspondência de condição como AND /OR e o tipo de ação como Mostrar este campo/ocultar este campo no menu suspenso.

Defina a condição

Agora é hora de definir a condição, definir uma condição

• Clique no + ADICIONAR NOVO item
• No campo If , adicione o nome do campo ao qual você deseja adicionar a condição
• Na lista suspensa Corresponder (comparação) , escolha a condição.

Por exemplo, quero tornar o campo Email visível apenas quando o campo Nome Completo não estiver vazio. Como resultado, quando alguém preencher apenas o nome, o campo Email aparecerá visível. Para isso, vou

• Copie o nome do campo de texto do nome completo
• Volte para a seção de lógica condicional do campo de email e cole-a no “campo If”
• Por fim, escolha não vazio na lista suspensa Corresponder (comparação).

Siga estas etapas exatas para adicionar lógica condicional a todos os campos de formulário do formulário condicional Elementor ou a alguns, dependendo de seus requisitos.

Nota : Se você deseja definir condições para campos de formulário como Rádio ou Caixa de seleção onde você tem várias opções, você precisa colocar o nome do campo no campo Se e definir o valor das opções de rádio/caixa de seleção no campo Valor de correspondência.

Por exemplo, para fazer com que o campo Outro Status apareça apenas quando alguns escolhem outros como seu status de material, você precisa  

• Escolha Match (comparação) como iguais
• Copie o nome do campo Estado civil
• Cole -o na opção “If” da lógica condicional do Other Status
• Copie o valor da opção Outros do campo Razão do Estado Civil
• em seguida , cole- o na opção “Match value” da lógica condicional de Other Status

Eu segui os mesmos passos para tornar o formulário Need Pet sitters visível apenas quando o Number of Pets for maior que 1 .

Etapa 5: personalize as configurações do formulário relacionadas à confirmação, notificação a ser concluída

Quando terminar de adicionar toda a lógica condicional ao seu formulário Elementor, clique em CONFIGURAÇÕES DE FORMULÁRIO para personalizar diferentes configurações. Você pode

• Personalize o título, a mensagem de sucesso, o login obrigatório, as visualizações de contagem, etc. nas configurações gerais.
• Você pode personalizar opções como Ativar a confirmação, definir Assunto do e-mail, E-mail de, De e-mail e Mensagem de agradecimento, etc., nas configurações de confirmação.
• Nas configurações de notificação, você receberá opções de notificação por e-mail, como Ativar o e-mail de notificação para o administrador, Assunto do e-mail, E-mail para, E-mail de, Nota do administrador etc.

Você também pode definir as diferentes integrações de Pagamento e CRM, se desejar. Para obter mais detalhes sobre esses tópicos, confira a documentação. Depois de fazer todas as alterações, role para baixo e clique em Salvar alterações.

Clique em UPDATE & CLOSE para salvar o formulário condicional que você acabou de criar.

Agora, se você clicar no botão de visualização, deverá ver seu formulário condicional Elementor como o mostrado abaixo:

Como usar o modelo pré-construído do MetForm para adicionar o formulário condicional no Elementor

Agora, se você estiver procurando por um modelo pré-fabricado de forma lógica condicional Elementor, não poderá encontrar uma opção melhor que o MetForm. Porque este construtor de formulários do WordPress fornece mais de 6 modelos de formulários de lógica condicional Elementor pré-fabricados.

Para usar os formulários condicionais pré-construídos do MetForm, ao chegar à terceira etapa do processo mencionado acima , role um pouco para baixo para encontrar todos os formulários condicionais. Para escolher o formulário de sua preferência, clique no formulário e, em seguida, clique em Editar formulário.

Quando o formulário carregar, clique em UPDATE & CLOSE e, finalmente, salve sua página. Aqui está uma prévia do formulário de lógica condicional Elementor pré-fabricado pelo MetForm:

Palavras finais

Parabéns! Agora você sabe como adicionar lógica condicional aos formulários Elementor. Espero que agora você use esse processo para criar um formulário de lógica condicional Elementor amigável ao usuário em seu site WordPress.

Lembre-se de que seu trabalho é garantir que os usuários façam o mínimo esforço para preencher seu formulário. E é com isso que os recursos condicionais do MetForm funcionam surpreendentemente. Além disso, o MetForm também suporta shortcode.

Não se esqueça dos modelos de formulário de lógica condicional Elementor pré-construídos. Além disso, eu recomendo que você confira todos os recursos incríveis do MetForm. Os recursos avançados deste plug-in do WordPress ajudarão você a criar formulários Elementor mais otimizados.