Como criar um formulário de contato Divi versátil com lógica condicional

Nem todo visitante chega ao seu site pelo mesmo motivo. Você provavelmente oferece uma variedade de produtos ou serviços, não apenas uma única opção para clientes e clientes. É por isso que ter vários formulários de contato direcionados pode ajudar a suavizar a experiência do usuário do seu site para que seus clientes (e potenciais) possam entrar em contato com você sobre exatamente o que precisam com o mínimo de atrito possível. Usando o módulo de formulário de contato Divi e nosso recurso de lógica condicional, vamos orientá-lo na criação do melhor canal possível entre você e seus usuários.

Visualização do formulário de contato condicional

Quando tudo estiver dito e feito, você terá algo semelhante a isso em seu site, pronto para ser usado pelos visitantes.

Área de Trabalho

Móvel

O que é lógica condicional?

Primeiro, queremos abordar brevemente o que entendemos por lógica condicional . O que faremos neste tutorial é configurar uma série de formulários de contato que aparecem com base nas escolhas que o usuário faz ou não.

Por exemplo, você pode ter um único formulário de contato que se ajusta com base no serviço ou produto de que o visitante precisa. Dessa forma, você pode obter as informações no formato de que precisa, em vez de eles precisarem escrevê-las. A lógica condicional em formulários de contato pode aprimorar a comunicação e agilizar sua capacidade de fornecer aos seus usuários.

Com isso em mente, vamos nos aprofundar na criação dos formulários de contato direcionados.

Como criar formulários de contato usando lógica condicional

Carregue o Divi Builder

Como estamos usando o módulo Divi Contact Form, vamos precisar entrar no Divi Builder. Usaremos o pacote de layout de Manutenção de Paisagem como exemplo neste tutorial. Você pode usar qualquer layout ou design que desejar, mas precisará ser capaz de usar e estilizar o Módulo de formulário de contato Divi.

Para começar, entre no Divi Builder a partir do backend do seu site WordPress. Dentro do Editor de página, você verá um botão roxo que diz Use Divi Builder (ou Editar com Divi Builder se você já tiver criado a página).

Adicionar ou localizar o módulo de formulário de contato

Então você vai querer encontrar o Módulo de Formulário de Contato que já existe na página ou clicar no ícone Preto + Círculo e encontrar o Formulário de Contato no menu suspenso.

Insira as configurações do formulário de contato

O módulo Formulário de contato Divi vem com 3 campos por padrão: Nome , E-mail e Mensagem . O que vamos fazer é criar um formulário de contato onde essas opções não apareçam até que o visitante nos forneça informações suficientes para poder direcionar sua consulta.

Adicione a primeira pergunta condicional

Na guia Conteúdo e abaixo de todos os campos já existentes no formulário, você verá o botão Adicionar novo campo . Clique nisso.

Isso abre a janela Configurações do campo e você deve ver os locais para as entradas de ID do campo e Título . O Field ID é para você. Isso é o que aparece dentro das configurações do módulo para você acompanhar. O Título é o texto que seus visitantes verão no front end do formulário. (O título também aparecerá no e-mail que você receber quando o formulário for enviado.)

Rotulamos o ID do campo como “Condicional” porque esta é a primeira pergunta que o visitante verá no formulário. A resposta deles determinará o que eles verão a seguir. Essa é uma maneira fácil de rastrear o fluxo de perguntas e respostas do formulário.

Adicionar opções de campo

Em seguida, role na guia Conteúdo para a seção Opções de campo . É aqui que você adicionará as opções para o usuário escolher. Cada um deles será um gatilho para certas perguntas de acompanhamento. Para este exemplo, estamos usando Caixas de seleção como nosso tipo de entrada. Isso significa que o usuário pode escolher quantos quiser.

Além das caixas de seleção , o Divi também permite outras opções: Campo de entrada e área de texto para as respostas digitadas pelo próprio usuário, Selecionar lista suspensa e botões de rádio para as opções individuais fornecidas, bem como Campo de e-mail para entrada de endereço de e-mail. O campo Nome padrão é um Campo de entrada e Mensagem é uma área de texto .

Com as caixas de seleção selecionadas, inseriremos as opções que desejamos para acionar opções diferentes posteriormente. Em seguida, queremos ter certeza de que este é um campo obrigatório para que o usuário não possa enviar o formulário prematuramente.

É importante observar aqui que não adicionamos Lógica Condicional a esta etapa. Este é o gatilho, então ele aparece para o usuário de qualquer maneira.

Adicionar novos campos para respostas condicionais

Em seguida, entretanto, adicionaremos Lógica Condicional para os novos Campos que adicionamos como respostas de acompanhamento. Como incluímos 3 opções para a pergunta inicial, adicionaremos 3 novos campos correspondentes ao formulário . Você repetirá as etapas a seguir para cada um.

Nomeie as respostas condicionais nos novos campos

Observe que usamos uma convenção de nomenclatura de Condicional 1 (para indicar o primeiro gatilho condicional) e, em seguida, 1a , 1b e 1c para respostas de acompanhamento. Também os rotulamos apropriadamente para que possamos acompanhar o que são.

Como a primeira pergunta, também inseriremos o Título como a pergunta que o visitante verá.

Adicionar lógica condicional aos campos de resposta

Depois disso, role para baixo até a seção Lógica condicional na guia Conteúdo desse campo. Habilite a alternância para Lógica condicional . Em seguida, escolha a relação para esta, o que significa que você pode defini-la como qualquer (qualquer número de respostas pode fazer essa opção aparecer) ou todas (apenas a combinação específica de respostas faz este campo aparecer).

Se você estiver usando apenas uma única regra de gatilho como nós, qualquer uma ou todas funcionarão.

Em Regras , você verá o campo que aciona este e, à direita, pode selecionar qual opção o acionará. O centro é o qualificador, como igual, não é igual, é menor que, é maior que e assim por diante. Para este campo específico, estamos selecionando a pergunta que definimos como Condicional 1 e, em seguida, a opção dentro dela que aciona especificamente esse campo para aparecer.

Repita isso para todas as respostas condicionais

Como adicionamos três respostas diferentes à nossa única pergunta condicional, repetiremos esse mesmo processo para os outros campos também. Apenas criando as respostas correlativas apropriadas para essa seleção.

Defina o 'Nome / e-mail / mensagem' do formulário de contato para aparecer

Depois de configurar as respostas para a lógica condicional, queremos que o visitante possa realmente enviar o formulário. Para isso, vamos ajustar a lógica condicional nos campos Nome , Email e Mensagem . A configuração para cada um deles é exatamente a mesma, então, mais uma vez, você repetirá isso 3 vezes.

Nas configurações dos campos Nome , E-mail e Mensagem , vá para Lógica condicional . Ative-o e adicione quantas respostas finais você tiver para suas perguntas de acompanhamento condicional. Em nosso caso, temos 3 perguntas de acompanhamento, portanto, estamos usando 3 regras.

Para cada regra, escolha a pergunta de acompanhamento como o gatilho. Defina o qualificador como não está vazio , o que significa que, enquanto o visitante responder à pergunta, a condição será atendida. A caixa final ficará acinzentada, indicando que qualquer resposta é suficiente.

Salve suas alterações e repita isso para todos os campos que deseja exibir para permitir o envio do formulário . E é isso! Seu formulário se ajustará às necessidades de seus usuários imediatamente.

Resultados finais

Você pode ver abaixo como a lógica condicional funciona na prática.

Área de Trabalho

Móvel

Empacotando

O formulário de contato é um dos elementos mais onipresentes de um site. Quase todo site tem um, e quase todo site precisa de um. Mas nem todo usuário acessa seu site pelo mesmo motivo. Usando o recurso de lógica condicional do Divi, você pode personalizar seus formulários de contato em uma ferramenta versátil para os usuários se comunicarem.

Que tipos de formulários você fez usando o recurso Divi Conditional Logic?

Imagem de destaque do artigo por Kubko / shutterstock.com