Nem todos os visitantes do seu site têm a mesma finalidade. Você provavelmente fornece uma variedade de itens ou serviços para clientes e clientes, em vez de apenas um. É 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 futuros clientes) possam contatá-lo com o mínimo de atrito possível sobre exatamente o que precisam. Orientaremos você na construção do pipeline ideal entre você e seus usuários usando o módulo de formulário de contato Divi e nossa funcionalidade de lógica condicional.
Uma espiada no formulário de contato condicional
Quando tudo estiver dito e feito, você terá algo semelhante a isso em seu site, pronto para ser utilizado pelos visitantes.
O que exatamente é Lógica Condicional?
Para começar, gostaríamos de definir a lógica condicional sucintamente. Nesta lição, configuraremos uma sucessão de formulários de contato que aparecem dependendo das escolhas que o usuário faz ou não.
Por exemplo, você pode ter um único formulário de contato que muda dependendo de qual serviço ou produto o visitante precisa. Dessa forma, em vez de eles terem que escrever, você pode obter as informações de que precisa no formato que desejar. A lógica condicional do formulário de contato ajuda a melhorar a comunicação e a acelerar sua capacidade de dar aos usuários.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agoraCom isso em mente, vamos começar a desenvolver os formulários de contato direcionados.
Como usar a lógica condicional para criar formulários de contato
Abra o Divi Builder.
Precisamos entrar no Divi Builder porque estamos usando o módulo Divi Contact Form. Neste tutorial, usaremos o pacote de layout de Manutenção de paisagem como exemplo. Você pode usar qualquer layout ou design que desejar, mas deve ser capaz de usar e estilizar o Módulo de formulário de contato Divi.
Para começar, navegue até o Divi Builder no backend do seu site WordPress. Dentro do Editor de página, você notará um botão roxo chamado "Use Divi Builder" (ou Editar com Divi Builder se você já tiver criado a página).
Insira ou localize o Módulo do formulário de contato.
Em seguida, identifique um Módulo de formulário de contato existente na página ou clique no ícone Círculo preto \ 002B e selecione Formulário de contato no menu suspenso.
Preencha as configurações do formulário de contato
Por padrão, o módulo Formulário de contato Divi inclui três campos: Nome, E-mail e Mensagem. Faremos um formulário de contato para que essas opções não apareçam até que o visitante nos forneça informações suficientes para direcionar sua consulta.
Adicionando a primeira pergunta condicional
Preencha os espaços em branco com a primeira pergunta condicional. O botão " Adicionar novo campo " pode ser encontrado na guia Conteúdo , abaixo de qualquer campo existente no formulário. Basta clicar nele.
Isso abre a caixa Configurações do campo , onde você deve ver os campos para ID e título do campo . O ID de campo é destinado a você. Isso é o que aparece nas configurações do módulo para você monitorar. O Título é o texto que os visitantes verão na interface do formulário. (O título também será exibido no e-mail que você receber após enviar o formulário.)
O ID do campo é marcado como "Condicional", pois esta é a primeira pergunta que o visitante verá no formulário. O que eles verão a seguir será determinado por sua reação a isso. Essa é uma maneira simples de acompanhar o fluxo de perguntas e respostas do formulário.
Adicionar opções de campo
Role para baixo até a seção Opções de campo abaixo da guia Conteúdo. É aqui que você colocará as opções para o usuário escolher. Cada um deles servirá como um prompt para questionamentos adicionais. As caixas de seleção são usadas como tipo de entrada neste exemplo. Isso significa que o consumidor tem a opção de selecionar quantos quiser.
Além das caixas de seleção, o Divi oferece suporte aos seguintes recursos adicionais: 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 e Campo de e-mail para entrada de endereço de e-mail. O campo Nome padrão é um Campo de entrada, enquanto o campo Mensagem padrão é uma área de texto.
Com as caixas de seleção marcadas, inseriremos as opções que desejamos acionar posteriormente. Então, para evitar que o usuário envie o formulário prematuramente, queremos torná-lo um Campo Obrigatório .
É importante notar que não usamos Lógica Condicional neste estágio. Como esse é o gatilho, ele aparecerá para o usuário de qualquer maneira.
Criar novos campos de resposta condicional
No entanto, para os novos Campos que adicionarmos como respostas de acompanhamento, adicionaremos a seguir a Lógica Condicional. Como incluímos três opções para a primeira pergunta, adicionaremos três novos campos equivalentes ao formulário. Você precisará repetir as etapas abaixo para cada um.
Nomeie as respostas condicionais nos novos campos
Utilizamos a prática de nomenclatura de Condicional 1 (para denotar o primeiro gatilho condicional) seguido por 1a, 1b e 1c para respostas de acompanhamento. Também os rotulamos adequadamente para sabermos o que são.
Da mesma forma que na primeira pergunta, inseriremos o Título como a pergunta que o visitante verá.
Adicionando lógica condicional aos campos de resposta.
Depois disso, vá até a seção Lógica condicional da guia Conteúdo desse campo. Ative o botão de alternância Lógica condicional . Então, para este, selecione o Relacionamento, o que significa que você pode defini-lo como qualquer (qualquer número de respostas pode fazer com que essa escolha apareça) ou todos (apenas a combinação específica de respostas faz este campo aparecer).
Se você estiver usando apenas uma regra de gatilho, como nós, qualquer uma ou todas funcionarão.
Você notará o campo que ativa este em Regras, e à direita, você pode escolher qual opção irá acioná-lo. O qualificador, como igual, não é igual, é menor que, é maior que e assim por diante, está localizado no centro. Para este campo, estamos escolhendo a questão Condicional 1 e, em seguida, a escolha dentro dela que faz com que esse campo apareça explicitamente.
Repita essa etapa para todas as respostas condicionais.
Como introduzimos três respostas possíveis para nossa única pergunta condicional, faremos o mesmo para os outros campos. Apenas as respostas correlativas adequadas para essa seleção são criadas.
Defina o 'Nome / E-mail / Mensagem' dos campos do formulário de contato para aparecer
Depois de configurar as respostas para a lógica condicional, queremos que o visitante possa enviar o formulário. Para fazer isso, modificaremos a lógica condicional nos campos Nome , E-mail e Mensagem . Como a preparação para cada um deles é a mesma, você repetirá isso três vezes.
Vá para Lógica condicional nas configurações dos campos Nome, E-mail e Mensagem. Habilite-o e insira quantas respostas finais você tiver para suas perguntas de acompanhamento condicional. Neste exemplo, temos três consultas de acompanhamento, portanto, aplicamos três regras.
Selecione a pergunta de acompanhamento como o gatilho para cada regra. Defina o qualificador como não está vazio, o que significa que a condição é atendida, desde que o visitante responda à pergunta. A caixa final ficará acinzentada, sugerindo que qualquer resposta é adequada.
Salve suas alterações e repita para quaisquer outros campos que você deseja que apareçam para permitir o envio do formulário. Isso é tudo que há para fazer! Seu formulário se adaptará automaticamente às necessidades de seus consumidores.
Os resultados finais
Você pode ver como a lógica condicional funciona na prática no vídeo abaixo.
Pensamentos finais
Uma das partes mais comuns de um site é o formulário de contato. Quase todo site tem um, e quase todo site precisa de um. No entanto, nem todas as pessoas visitam seu site pelo mesmo motivo. Você pode transformar seus formulários de contato em uma ferramenta dinâmica para seus usuários se comunicarem usando a função lógica condicional do Divi.
