Como criar um formulário de cotação com o módulo de formulário de contato da Divi

Um formulário de cotação (também conhecido como formulário de solicitação de cotação) é uma ótima solução para pequenas empresas que procuram obter leads qualificados sem o incômodo de atender telefones. Um bom formulário de cotação pode resolver os ovos podres que não estão prontos para o seu serviço, fazendo as perguntas de qualificação corretas. Também pode ajudar a identificar as necessidades de um cliente para que você possa preparar uma resposta / oferta eficaz e fechar a venda assim que recebê-la por telefone.

Existem vários plug-ins excelentes que são dedicados ao processamento de formulários. Mas se você está procurando uma solução simples e eficaz para o seu site Divi, o Módulo de formulário de contato atualizado da Divi é exatamente o que você precisa.

Hoje, vou orientá-lo no processo de construção de um formulário de cotação simples, mas poderoso, usando lógica condicional para qualificar melhor os leads. Também estarei adicionando alguns recursos de design avançados usando CSS personalizado que tornará o formulário ainda mais limpo e legível.

Vamos começar.

Implementando o Design com Divi

Construindo a seção do cabeçalho em tela cheia

O formulário de cotação pode ser adicionado a qualquer página, mas para este exemplo, vou usar uma página dedicada apenas para o formulário de cotação.

Para dar as boas-vindas ao visitante, estou usando um cabeçalho de tela inteira que força o usuário a clicar no botão ou rolar para ver o formulário. Esse é um recurso interessante que cria uma experiência mais pessoal e aquece o usuário para a ideia de rolar e clicar antes de ver o formulário. Em alguns casos, parece um pouco pouco convidativo e opressor quando chego a uma página com nada além de um longo formulário para preencher. Isso é opcional, claro, e eu definitivamente testaria para ver se ele converte melhor sem o cabeçalho de tela inteira.

Usando o Visual Builder, adicione uma seção de largura total e um módulo de cabeçalho de largura total ao topo de sua página.

Atualize as configurações do cabeçalho Fullwidth da seguinte forma:

Opções de conteúdo

Título: [insira o título; tente ser mais pessoal em vez de um título chato como "Formulário de cotação"]
Texto do subtítulo: [insira o texto do subtítulo]

Texto do Botão # 1: [insira o texto do botão; algo como “mostre-me” ou “vamos fazer isso”]
URL do botão # 1: #quote (será usado para ancorar o ID CSS que irá rolar para a seção que contém o formulário abaixo)
URL da imagem do logotipo: [inserir imagem do logotipo]
Sobreposição de fundo: rgba (0,0,0,0.7)
Imagem de fundo: [carregue sua imagem de fundo 1920 x 1080]

Opções de Design

Texto e orientação do logotipo: centro
Tornar tela inteira: SIM
Mostrar botão de rolagem para baixo: SIM
Ícone: [escolher o ícone]
Cor do ícone de rolagem para baixo: # 999999
Cor do Texto: Claro
Fonte do título: Ubuntu
Tamanho da fonte do título: 36px
Fonte do subtítulo: Ubuntu
Tamanho da fonte do subtítulo: 22 px
Use estilos personalizados para o botão um: SIM
Botão Um Tamanho do Texto: 20px
Botão de uma cor de texto: #ffffff
Cor de fundo do botão um: # e09900;
Botão One Border Color: # e09900
Espaçamento de uma letra do botão: 1px
Fonte do botão um: Ubuntu

Salvar configurações

Construindo o Formulário de Cotação

Agora, para o formulário de cotação, usaremos o Módulo de Formulário de Contato da Divi. Primeiro, precisamos adicionar uma seção regular com uma linha de largura total (1 coluna). Em seguida, adicione um 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?

Título: [defina um título para seu formulário de contato ou adicione instruções adicionais]
Texto do botão de envio: obter orçamento
E-mail: [digite o endereço de e-mail para onde as mensagens devem ser enviadas]
Ativar URL de redirecionamento: SIM (opcional, mas uma boa ideia)
URL de redirecionamento: [insira o URL de redirecionamento para uma página de agradecimento personalizada]

Opções de Design

Fonte do título: Ubuntu
Tamanho da fonte do título: 30px
Espaçamento entre letras de título: 1px
Fonte do campo do formulário: Ubuntu
Tamanho da fonte do campo do formulário: 24px
Cor do texto do campo do formulário: # e09900
Raio da borda de entrada: 5px
Borda de uso: SIM
Cor da borda: # 999999
Largura da borda: 1px
Use estilos personalizados para botão: SIM
Tamanho do texto do botão: 24px
Cor do texto do botão: #ffffff
Cor de fundo do botão: # e09900;
Cor da borda do botão: # e09900
Espaçamento entre letras dos botões: 1px
Fonte do botão: Ubuntu

Opções avançadas (CSS personalizado)

Campo Captcha:

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

Texto Captcha:

Font-size: 24px

Salvar configurações

Adicionando os Campos do Formulário de Cotação

Não o que você tem suas configurações no lugar, é hora de adicionar nossos itens de formulário. Por padrão, o formulário contém os campos “nome”, “email” e “mensagem”. Você pode excluir “mensagem”.

Campo da Empresa

No campo "e-mail", adicione um novo campo e atualize as configurações em Opções de conteúdo da seguinte forma:

ID de campo : empresa
Título : Qual é o nome da sua empresa?
Campo obrigatório : SIM

Campo de serviço

No campo “empresa”, adicione um novo campo e atualize as configurações em Opções de conteúdo da seguinte forma:

ID de campo : serviço
Título : Como podemos ajudá-lo hoje?
Tipo : botões de opção
Opções :

• Produção do site
• Desenvolvimento de aplicativos
• Direção da arte
• Criação de Vídeo

Campo obrigatório : SIM

Art Purpose Field

No campo “serviço”, adicione um novo campo e atualize as configurações em Opções de conteúdo da seguinte forma:

ID do campo : art_purpose
Título : Que tipo de direção de arte você precisa?
Tipo : botões de opção
Opções :

• Design gráfico
• Anúncio
• Branding
• Embalagem

Campo obrigatório : SIM
Habilitar lógica condicional
Relação : QUALQUER
Regras : Como podemos ajudá-lo hoje? > Igualdade> Direção de Arte

Nota : Esta lógica mostra este campo sempre que um usuário seleciona “Direção de Arte” na pergunta anterior.

Campo de propósito da web

No campo “art_purpose”, adicione um novo campo e atualize as configurações em Opções de conteúdo da seguinte forma:

ID do campo : web_purpose
Título : Que tipo de site você precisa?
Tipo : botões de opção
Opções :

• Comércio eletrônico
• Blog
• aplicativo web
• Landing Page

Campo obrigatório : SIM
Habilitar lógica condicional
Relação : QUALQUER
Regras : Como podemos ajudá-lo hoje? > Equals> Produção do site

Nota : Esta lógica mostra este campo sempre que um usuário seleciona “Produção Web” na questão anterior.

Campo de Vídeo

No campo “web_purpose”, adicione um novo campo e atualize as configurações em Opções de conteúdo da seguinte forma:

ID de campo : vídeo
Título : Em qual dispositivo você deseja que o vídeo seja exibido?
Tipo : botões de opção
Opções :

• Celular
• Tábua
• Monitor ou TV
• Projetor

Campo obrigatório : SIM
Habilitar lógica condicional
Relação : QUALQUER
Regras : Como podemos ajudá-lo hoje? > Igual a> Criação de Vídeo

Observação : esta lógica mostra este campo sempre que um usuário seleciona “Criação de vídeo” na pergunta anterior.

Campo de plataforma de aplicativo

No campo "vídeo", adicione um novo campo e atualize as configurações em Opções de conteúdo da seguinte forma:

ID de campo : app_platform
Título : Em qual plataforma você deseja que o aplicativo seja desenvolvido?
Tipo : botões de opção
Opções :

• iOS
• Android
• janelas
• Amora

Campo obrigatório : SIM
Habilitar lógica condicional
Relação : QUALQUER
Regras : Como podemos ajudá-lo hoje? > Equals> Desenvolvimento de aplicativos

Observação : essa lógica mostra este campo sempre que um usuário seleciona “Desenvolvimento de aplicativo” na pergunta anterior.

Campo de Orçamento

No campo “app_platform”, adicione um novo campo e atualize as configurações em Opções de conteúdo da seguinte forma:

ID de campo : orçamento
Título : Se você tem um orçamento em mente, informe-nos.
Tipo : botões de opção
Opções :

• Menos de $ 1k
• Cerca de $ 5k
• Maior que $ 10k

Campo obrigatório : NÃO
Habilitar lógica condicional
Relação : QUALQUER
Regras :
Como podemos te ajudar hoje? > Equals> Desenvolvimento de aplicativos
Como podemos te ajudar hoje? > Igual a> Criação de Vídeo
Como podemos te ajudar hoje? > Equals> Produção do site
Como podemos te ajudar hoje? > Igualdade> Direção de Arte

Salvar configurações

Adicione o ID CSS âncora

Volte e edite as Configurações da seção para a seção que contém o formulário. Na guia Avançado, insira a “citação” do ID CSS.

Isso corresponderá ao URL do botão no cabeçalho de largura total para que o botão role para a seção quando clicado.

Definir uma largura personalizada para a coluna do formulário de cotação

Em seguida, vá para Configurações de linha para a linha que contém o formulário de cotação e atualize as Opções de projeto da seguinte maneira:

Usar largura personalizada: SIM
Largura personalizada: 556 px

Customizações Adicionais de Design

Para este formulário de cotação, estamos usando botões de opção, uma vez que um botão de opção / círculo é clicado, a cor do preenchimento do círculo corresponde à cor de destaque do tema do seu site em Personalizador de tema> Configurações gerais> Configurações de layout>

Se você não quiser alterar a cor de destaque do tema em todo o site para a cor de preenchimento do botão de opção, vá para Configurações da página e insira o seguinte CSS personalizado na guia CSS:

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

Além disso, você pode adicionar o seguinte CSS para personalizar o texto do título das perguntas que contêm botões de opção:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

Por último, você pode adicionar uma borda estilizada às listas de botões de opção para combinar o estilo do formulário com o seguinte CSS:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

É isso.

Confira o resultado final:

Pensamentos finais

Este formulário de cotação é um exemplo simplificado do que você pode fazer com o formulário de cotação. Para o seu próprio formulário de cotação, você pode adicionar um campo adicional, como “Número de telefone”, para que possa ligar de volta para seus leads. Você também pode usar mais lógica condicional para obter informações mais específicas sobre as necessidades do cliente.

Como eu disse no início do artigo, existem plug-ins mais avançados por aí. Existem empresas inteiras que se especializam em soluções robustas de formulário de contato por um motivo. Espero que esta postagem tenha sido útil para mostrar como o Módulo de formulário de contato é mais do que capaz de atender à maioria das suas necessidades de formulário de contato padrão.