Como Criar um Formulário de Contato Inline com Divi

A seção principal (ou acima da dobra) da página inicial é o principal imóvel. E como a maioria dos incorporadores imobiliários, você deseja maximizar seu espaço. É aí que um formulário de contato embutido se torna útil. Um formulário embutido é basicamente um formulário no qual todos os seus campos ou controles ficam lado a lado, embutidos e alinhados à esquerda. Este layout compacto é ótimo para aumentar as conversões em uma homepage ou landing page.

Hoje vou mostrar como criar um formulário de contato embutido para o seu site usando o Divi's Visual Builder. O trabalho necessário para fazer isso é, na verdade, ajustar a largura e o alinhamento dos campos do formulário. Para fazer isso, aproveitaremos os recursos de design do módulo de contato e também adicionaremos CSS personalizado na guia Avançado.

Se você é novo no Divi, não deixe que a guia Avançado o impeça de seguir este tutorial. Tentei o meu melhor para manter as coisas simples e claras.

Aproveitar.

Aqui está um exemplo de como será o formulário de contato embutido

O conceito e inspiração

Se você já teve que comprar um seguro de carro ou pesquisar uma nova casa online, provavelmente viu um formulário embutido que é propositalmente compacto com campos de entrada mínimos para que você (o usuário) esteja mais inclinado a fazer a bola rolar em um nova cotação. Então, eu queria criar um formulário de contato em linha simples que fizesse algo semelhante para os usuários Divi. Embora este formulário de contato não seja capaz de fazer coisas como gerar uma cotação ou obter uma lista de casas, ele atende à necessidade de proprietários de empresas ou blogueiros que desejam fornecer uma maneira fácil para clientes ou usuários entrarem em contato.

Implementando o Design com Divi

Inscreva-se no nosso canal no Youtube

Começamos adicionando uma seção regular com uma única linha de estrutura de coluna.

Como o resto de nossos elementos será difícil de ver em um fundo branco, vamos prosseguir e adicionar a cor de fundo à nossa seção indo para Section Settings e atualizando o seguinte:

Opções de conteúdo

Cor de fundo: # 006ea5

Salvar configurações

Agora podemos adicionar nosso Módulo de formulário de contato à linha.

Atualize as configurações do formulário de contato da seguinte maneira:

Opções de conteúdo

Texto do botão de envio: “Obter cotação”
Email: [Insira o endereço de e-mail para onde as mensagens devem ser enviadas]
Exibir Captcha: NÃO
Cor de fundo do formulário: rgba (255,255,255,0)

Opções de Design

Fonte do campo do formulário: Lato
Tamanho da fonte do campo do formulário: 24px
Cor do texto do campo do formulário: #ffffff
Raio da borda de entrada: 3px
Borda de uso: SIM
Cor da borda: #ffffff
Largura da borda: 1px
Tamanho do texto do botão: desktop 24px, tablet 20px, smartphone 20px
Cor do texto do botão: # 0c71c3
Cor de fundo do botão: # f4f11f
Largura da borda do botão: 3px
Raio da borda do botão: 3

Salvar configurações

Volte para a guia Conteúdo e exclua o campo da mensagem clicando no ícone da lixeira à direita da barra de campo. Em seguida, adicione um novo campo clicando no botão de círculo cinza com o sinal de mais branco localizado sob as barras de campo individuais. Este será o campo Telefone.

Atualize as configurações de campo da seguinte forma:

Opções de conteúdo

ID do campo: “Telefone”
Título: Telefone

Opções de Design

Faça largura total: NÃO
Símbolos permitidos: apenas números (0-9)

Opções avançadas

Insira o seguinte CSS personalizado dentro da caixa Elemento principal :

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

Salvar configurações

Agora volte para a guia Conteúdo das configurações do formulário de contato e duplique o campo Telefone que você acabou de criar e transforme-o em um campo de CEP.

Atualize as configurações de campo da seguinte forma:

Opções de conteúdo

ID do campo: “Zip”
Título: CEP

Opções avançadas

Insira o seguinte CSS personalizado dentro da caixa Elemento principal :

Max-width: 17%;
Margin-top: -1.5%;

Salvar configurações

Até agora, ajustamos a largura e o alinhamento dos campos Telefone e CEP. Agora precisamos fazer o mesmo para os campos Nome e Email.

Vá para as configurações do campo Nome e atualize as Opções avançadas com o seguinte CSS personalizado dentro da caixa Elemento principal :

Max-width: 20%;
Margin-top: -1.5%;

Salvar configurações

Em seguida, vá para as configurações do campo E - mail e atualize as Opções avançadas com o seguinte CSS personalizado dentro da caixa Elemento principal :

Max-width: 20%;
Margin-top: -1.5%;

Salvar configurações

Nota importante: Observe que o CSS personalizado usado para cada um dos campos tem uma propriedade de largura máxima definida para uma determinada porcentagem. Essa porcentagem determina a largura de seus campos em relação à largura de sua área de conteúdo. Por exemplo, a área de conteúdo padrão da Divi é 1080px, então o campo de nome é 20% de 1080px. É importante saber se você deseja criar mais espaço para o seu formulário embutido. Tudo que você precisa fazer é ajustar o valor da porcentagem para a propriedade max-width conforme necessário.

Quase terminado. Agora, tudo o que precisamos fazer é limpar o espaçamento da seção e da linha que contém o formulário. Vá para as Configurações da seção , na guia Design , e atualize o seguinte:

Preenchimento personalizado: 12 px superior, 14 px inferior

Salvar configurações

Agora vá para Configurações de linha , na guia Design , e atualize o seguinte:

Preenchimento personalizado: 48px superior, 0px direito, 0px inferior, 0px esquerdo

Salvar configurações

Tornando-o responsivo

Por ser um formulário horizontal, os campos do formulário precisarão ser ajustados em dispositivos móveis. Para consertar isso, basta um pequeno trecho de CSS customizado. Vá para Configurações da página , na guia Avançado , e o seguinte na caixa CSS personalizado :

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

Veja como o formulário responde aos diferentes tamanhos de tela.

Criação de um formulário de contato embutido de três campos

Agora que criou um formulário embutido com quatro campos, você pode convertê-lo facilmente em um campo de três formulários, atualizando algumas opções. Aqui estão as etapas:

1. Edite o formulário embutido que você acabou de criar ou duplique-o.
2. Excluir campo de CEP (agora você só tem três campos)
3. Atualize as configurações do campo do telefone (ou qualquer que seja o terceiro campo), na guia Avançado, com o seguinte CSS personalizado no

   Main Element box:max-width: 25%;
   float:left;
   margin-top: -1.5%;
   clear: none !important;

4. Atualize as configurações do campo de e-mail (ou qualquer que seja o segundo campo), na guia Avançado, com o seguinte CSS personalizado na caixa Elemento principal:

   max-width: 25%;
   margin-top: -1.5%;

5. Atualize as configurações do campo de nome (ou qualquer que seja o primeiro campo), na guia Avançado, com o seguinte CSS personalizado na caixa Elemento principal:

   max-width: 25%;
   margin-top: -1.5%;

Nota: Observe que a propriedade max-width para cada um dos campos agora é 25% para aumentar a largura dos campos.

Criação de um formulário de contato embutido de dois campos

Você também pode converter seu formulário embutido em um formulário de dois campos, atualizando algumas opções. Aqui estão as etapas:

1. Edite o formulário embutido que você acabou de criar ou duplique o formulário.
2. Exclua o campo do CEP e o campo do telefone para que você tenha apenas dois campos (nome e e-mail)
3. Atualize as configurações do campo de nome (ou qualquer que seja o primeiro campo), na guia Avançado, com o seguinte CSS personalizado na caixa Elemento principal:

   max-width: 37%;
   margin-top: -1.5%;

4. Atualize as configurações do campo de e-mail (ou qualquer que seja o segundo campo), na guia Avançado, com o seguinte CSS personalizado na caixa Elemento principal:

   max-width: 37%;
   margin-top: -1.5%;
   clear: none !important;

Adicionando Outros Tipos de Campo

Este tutorial é principalmente para tipos de campo de entrada regulares, mas você pode facilmente alterá-lo para um tipo de campo diferente. Por exemplo, se você deseja usar um tipo de campo suspenso selecionado, pode aplicar o mesmo estilo que aplicou para os outros campos. No entanto, você precisará adicionar uma cor de fundo (# 006ea5) a esse campo específico para que possa ver as opções.

Aqui está a aparência de um campo suspenso ...

Pensamentos finais

Na minha experiência, os formulários de contato em linha podem ser uma ferramenta poderosa para o seu negócio. Existem plug-ins mais avançados por aí, com opções mais robustas prontas para usar, mas se outro plug-in não for a sua preferência e uma solução mais simples fizer sentido, experimente. Espero que você goste.

Ansioso por ouvir de você nos comentários.