Como criar um formulário de contato no Click with Divi

Neste tutorial Divi, vamos mostrar como criar um formulário de contato que aparece depois de clicar em um botão (como uma sobreposição) usando nada mais do que Divi, algum código jQuery e código CSS.

Essa é uma ótima maneira de manter os visitantes de seu site focados na ação com a qual se comprometeram clicando em um botão. Isso não os leva para uma página diferente, mas os bloqueia nessa ação até que seja concluído.

Abaixo, você pode dar uma olhada rápida no que estaremos criando e, em seguida, pular para o tutorial!

Resultado na área de trabalho

Resultado no telefone e tablet

Inspiração

A inspiração para este post vem de um pedido de comentário e pode ser encontrada no B3multimedia. Embora estejam usando outro método para fazer isso funcionar, eles também têm uma maneira impressionante de criar um formulário de contato com um clique. Dê uma olhada no resultado:

Criar seção com módulo de botão

Normalmente, mostramos como fazer quase tudo no construtor visual de frontend do Divi. No post de hoje, porém, usarei o construtor de back-end. Por causa do código que estamos usando, é um pouco mais fácil. Dito isso, se você ama o editor de front-end tanto quanto nós, você pode concluir este tutorial com a mesma facilidade usando a visualização de “esqueleto” do frontend.

Ok, vamos entrar neste tutorial!

Inscreva-se no nosso canal no Youtube

A primeira coisa que precisamos fazer é adicionar uma nova seção onde colocaremos o botão que permitirá que o formulário de contato apareça. Basta adicionar uma seção padrão e selecionar uma linha de uma coluna. Depois de fazer isso, adicione um Módulo de botão a ele.

Você pode definir o estilo do botão como quiser, mas deve certificar-se de que o URL do botão comece com '#' seguido por outra coisa. Você não pode simplesmente deixá-lo em branco ou usar apenas o caractere '#'. Ao adicionar '#' e algum texto, a página não se moverá depois que você clicar no botão. Se você deixar em branco, a página será atualizada com um clique. E se você usar apenas '#', será enviado para o topo da página.

A próxima coisa importante que precisaremos fazer é atribuir uma classe CSS ao botão. Estaremos usando esta classe CSS posteriormente neste post no código jQuery para garantir que o formulário de contato apareça após o clique. A classe que precisaremos atribuir ao botão é simplesmente 'botão'.

Criar formulário de contato na área de trabalho ao clicar

A próxima coisa que precisaremos fazer é criar o formulário de contato na área de trabalho que aparecerá assim que alguém clicar no botão que criamos na parte anterior deste post. Mais tarde neste post, também mostraremos como criar a versão móvel.

Você pode basicamente criar qualquer desenho que desejar dentro de uma linha e fazê-lo aparecer como um pop-up se usar este método. Vamos apenas dar uma amostra do que você pode alcançar, mostrando como criar o seguinte exemplo:

Adicionar nova seção padrão

Comece adicionando uma nova seção padrão à página em que você está trabalhando. Vá para a guia Avançado da seção que você acabou de adicionar e adicione 'pop-up' ao campo Classe CSS. Role para baixo na mesma guia e coloque as seguintes linhas de código CSS no campo Antes da subcategoria CSS personalizada:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Ao adicionar isso, estamos garantindo que a seção ocupe toda a guia. Você pode ajustar a cor do plano de fundo no código CSS para criar a sobreposição de plano de fundo desejada. Nesse caso, estamos usando a cor preta com alguma transparência. Na mesma guia, adicione a seguinte linha de código CSS ao elemento principal também:

display: none;

A última coisa que precisaremos fazer na guia Avançado é desativar a seção no telefone e tablet na subcategoria Visibilidade.

Adicionar linha de duas colunas

Continue adicionando uma linha de duas colunas e vá para a guia Design. Comece modificando a largura da linha na subcategoria Dimensionamento. Neste exemplo, usamos uma largura personalizada de 1291 px.

Role para baixo na guia Design e use '30px' para o preenchimento superior, esquerdo e direito de ambas as colunas dentro da subcategoria Espaçamento.

Conclua indo para a guia Avançado. No elemento principal, adicione as seguintes linhas de código CSS:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Adicionar primeiro módulo de texto

Depois de fazer todas as alterações na seção e na linha, é hora de adicionar os diferentes módulos que você deseja exibir. A primeira coisa que adicionaremos é o título que aparece. Comece adicionando um novo Módulo de Texto à primeira coluna da linha, escrevendo o texto na guia Conteúdo e avançando para a guia Design. Na guia Design, usamos as seguintes configurações para a subcategoria Texto:

• Orientação do Texto: Centro
• Fonte do Texto: Lagosta
• Estilo da fonte: negrito
• Tamanho da fonte do texto: 37
• Cor do texto: # 002282
• Altura da linha de texto: 1,7em

Adicionar segundo módulo de texto

Continue adicionando um novo Módulo de Texto e digite o texto que você deseja que apareça na guia Conteúdo. Vá para a guia Design e faça com que as seguintes configurações se apliquem à Subcategoria de Texto:

• Orientação do Texto: Centro
• Fonte do Texto: Arial
• Tamanho da fonte do texto: 13
• Cor do texto: # 002282
• Altura da linha de texto: 1,7em

Adicionar Módulo de Acompanhamento de Mídia Social

Continuando, vamos adicionar o Módulo de Acompanhamento de Mídia Social à primeira coluna também. Nesse caso, escolhemos três ícones sociais; Facebook, Twitter e Instagram. Depois de adicionar esses ícones sociais na guia Conteúdo, altere a forma do link para 'Círculo' na subcategoria Ícone.

A última coisa que precisamos fazer é adicionar um preenchimento esquerdo a este módulo na guia Avançado. Adicione a seguinte linha de código CSS ao elemento principal:

padding-left: 40%;

Adicionar Módulo de Formulário de Contato

Então, podemos ir para a segunda coluna da linha. Nessa coluna, a primeira coisa que vamos colocar é o Módulo de formulário de contato. Para este exemplo, escolhemos apenas dois campos; o nome e o e-mail. Depois de adicionar o Módulo do formulário de contato, vá para a guia Design do Módulo do formulário de contato e faça as seguintes alterações na subcategoria Texto do campo do formulário:

• Tamanho da fonte do campo do formulário: 15
• Cor do texto do campo do formulário: # 002282
• Altura da linha do campo do formulário: 1,7em

Na mesma guia, faça as seguintes alterações se aplicam à subcategoria de Botão:

• Usar estilo personalizado para botão: Sim
• Tamanho do texto do botão: 20
• Cor do texto do botão: #FFFFFF
• Cor de fundo do botão: # 0086c4
• Largura da borda do botão: 2
• Raio do botão: 3

Vá para a guia Avançado e adicione um preenchimento superior de 5%.

Adicionar Módulo Blurb

Outra coisa que precisaremos adicionar à segunda coluna é um módulo do Blurb. A única coisa que precisamos para este módulo é o ícone de saída no canto superior direito do pop-up. Escolha o ícone a seguir na lista de ícones e deixe todas as outras coisas em branco.

Seguindo em frente, vá para a guia Avançado e digite 'fechar' como a classe CSS. Na mesma guia, adicione as seguintes linhas de código ao elemento principal da subcategoria CSS personalizada:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Aplicar fundo gradiente à linha

Por último, mas não menos importante, vamos adicionar um fundo gradiente de boa aparência à linha. Abra as configurações e faça as seguintes alterações aplicadas à opção de fundo gradiente:

• Cor do primeiro gradiente: #FFFFFF
• Segunda cor de gradiente: # 0c71c3
• Tipo de gradiente: Linear
• Direção do gradiente: 124deg
• Posição inicial: 50%
• Posição final: 50%

Criar formulário de contato para tablet e telefone com um clique

Agora que criamos a versão para desktop, a versão para tablet e telefone será muito mais rápida. A maioria dos módulos que usamos para a versão Desktop são os mesmos para a versão móvel. O resultado final no celular é assim:

Adicionar nova seção padrão

Comece adicionando outra seção padrão. Esta seção precisará ter as mesmas configurações da seção que criamos antes. Adicione 'pop-up' à classe CSS e adicione as seguintes linhas de código CSS ao campo Antes:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Adicione a seguinte linha de código CSS também ao elemento principal:

display: none;

Em vez de desativá-lo para telefone e tablet, como fizemos para a versão desktop, vamos desativá-lo no desktop na subcategoria Visibilidade:

Adicionar linha de uma coluna

Para o pop-up de telefone e tablet, precisaremos apenas de uma coluna. Para esta linha, não vamos usar largura personalizada. No entanto, vamos aplicar o preenchimento personalizado como fizemos para a versão para desktop; 30 px para o preenchimento superior, esquerdo e direito da coluna.

Também precisaremos garantir que as seguintes linhas de código CSS sejam adicionadas ao elemento principal na subcategoria CSS personalizada:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Clone o módulo de texto, acompanhamento de mídia social e formulário de contato

A próxima coisa que precisaremos fazer é clonar o primeiro Módulo de Texto que usamos para a versão Desktop junto com o Módulo de Acompanhamento de Mídia Social e Formulário de Contato. Depois de cloná-los, coloque-os na linha de uma coluna da nova seção que acabou de criar.

Clone o módulo do Blurb e altere o código CSS na guia avançada

Você também pode clonar o Módulo Blurb que foi usado para a versão desktop, mas é preciso haver uma pequena mudança no código CSS. Em vez de usar o código para desktop, use o seguinte:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Certifique-se de que a classe CSS 'close' também seja usada para o Módulo Blurb.

Aplicar fundo gradiente à linha

Para a versão móvel, estamos usando configurações diferentes para o fundo gradiente da linha:

• Cor do primeiro gradiente: #FFFFFF
• Segunda cor de gradiente: # 0c71c3
• Tipo de gradiente: Linear
• Direção do gradiente: 180 graus
• Posição inicial: 40%
• Posição final: 40%

Adicionar código jQuery às opções de tema

A última coisa que precisaremos fazer neste tutorial é adicionar o código jQuery. Você pode adicionar o código por meio das Opções de tema ou por meio de um Módulo de código que você coloca na página em que está trabalhando. Para este exemplo, vamos simplesmente colocá-lo nas Opções de tema.

Para fazer isso, vá para o painel do WordPress> Divi> Opções de tema> Integração> e cole as seguintes linhas do código jQuery no cabeçalho do seu site:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Resultado

Se você seguir a postagem, passo a passo, deverá conseguir o seguinte resultado no desktop:

E o seguinte resultado em tablets e telefones:

Pensamentos finais

Nesta postagem, mostramos como criar um formulário de contato no clique. Usar esse método para entrar em contato com seus visitantes é sutil, mas eficaz. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo.

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por La1n / shutterstock.com