Landing pages - Parte 4: Adicionando um formulário e usando opções avançadas

💡 É bom saber
Landing pages estão disponíveis para os planos Business e Enterprise.

Neste artigo, vamos explicar como adicionar um formulário à sua landing page e como usar as opções avançadas disponíveis no construtor de landing page. 

Criamos uma série de artigos para ajudar você a criar suas landing pages. 

Adicione um formulário à sua landing page

Formulários permitirão que você recupere endereços de e-mail e automaticamente os classifique em suas listas na Brevo.

Para adicionar um elemento Formulário à sua landing page:

Novo editor landing page Editor clássico de landing page
Adicione uma nova seção em Seções > Filtrar seções pré-criadas > Formulários e escolha uma seção pré-definida que possa ser editada para atender as suas necessidades. Ou comece do zero adicionando um novo elemento Formulário à sua landing page.
mceclip0.png mceclip3.png

Configure seu formulário

Depois de ter adicionado um elemento formulário à sua landing page, você pode escolher como configurá-lo:

Alinhamento

Essa configuração só está disponível no Novo construtor de landing pages.

A configuração Alinhamento está descrita na seção Configurações comuns em Parte 3: edite as configurações de todos os elementos em sua landing page.

Gerenciar campos

As configurações Gerenciar campos permitem que você escolha onde armazenar os contatos coletados com o formulário e que informações quer obter deles. Você também pode configurar o formulário em si: adicione e classifique campos, torne campos obrigatórios ou não, adicione texto de ajuda, etc.

Para acessar as configurações Gerenciar campos, clique em seu formulário no editor de landing page.

Escolha sua lista de contato

mceclip7.png
  1. Clique no formulário para abrir o Painel de edição do formulário à direita
  2. No Administrador de campos, você vai configurar onde os e-mails coletados serão armazenados em sua conta Sendiblue:
    • Selecione uma pasta lista a partir do primeiro menu suspenso
    • Selecione uma lista de contato a partir do segundo menu suspenso
❗️ Importante
Se quiser atualizar os contatos de sua lista quando eles preencherem o formulário, você precisa marcar Atualizar contatos existentes no envio do formulário em Controles do formulário de assinatura.

Configurando os campos

A seguir, para os dados que quiser coletar, você irá adicionar os diferentes campos ao seu formulário gerador de lead. 

mceclip9.png

  1. Adicionar um campo de contato: você pode adicionar campos pré-existentes ao seu formulário a partir deste menu suspenso.
  2. Criar um novo campo: se o atributo de contato ainda não existir, você pode criar um a partir daqui.
  3. Reordenar os campos: Simplesmente clique em = e então arraste um campo para reordená-lo.
    Excluir um campo: você pode remover os campos usando o ícone da lixeira.

    Clique no campo e escolha suas configurações:
  4. Etiqueta: exiba o selo sobre o campo.
  5. Oculto: clique no toggle para criar um campo oculto ou um que seja visível neste formulário. 
    Você pode adicionar um campo oculto no formulário quando desejar que este seja preenchido automaticamente, passando este dado na URL com parâmetros de consulta.
  6. Obrigatório: escolha se o campo é obrigatório ou não para o envio do formulário.
  7. De acordo com cada campo, você terá diferentes configurações:

    • Etiqueta: mude o nome da etiqueta exibida sobre o campo.
    • Placeholder: digite o texto exibido em seu campo. Por padrão, é o mesmo texto que sua etiqueta.
    • Texto de ajuda: digite o texto que você quer exibido debaixo do seu campo. Pode ser útil para sugestões.
    • Valor padrão: é o valor que será sincronizado em sua lista de contato Brevo se o visitante não preencher o campo.
    • Parâmetro URL: é o valor que será automaticamente inserido no campo do formulário. Seu usuário pode ser substituído, se ele escolher. Para saber mais, consulte nosso artigo dedicado  Pré-preencha um formulário em uma landing page com atributos de contato.
❗️ Importante
Se você adicionar um número de telefone em seu formulário, o único formato válido será o formato internacional: +447911123456 para o Reino Unido, +12025550101 nos EUA ou +33655678834 na França.
Use o Placeholder para ajudar seus usuários a colocarem o formato correto.

Redirecionamento ao enviar o formulário

Nas Opções de redirecionamento, você pode escolher para onde seus usuários serão redirecionados ao enviar os dados de contato (ao clicarem no botão Call to Action): 

mceclip10.png

Use a ação redirecionar formulário para redirecionar seus contatos para uma página no funil (uma subpágina ou sua landing page) ou a um URL específico:

  • Página no funil: selecione para qual página do funil você quer redirecionar seus contatos.
  • Link para um URL: insira o link para a página externa para a qual deseja redirecionar seus contatos.

Double opt-in

mceclip11.png

A configuração Double Opt-in permite que você escolha que método de opt-in você quer usar em seu formulário:

  • Single Opt-in:
    1. Seu novo contato insere seu endereço de e-mail em seu formulário.
    2. Eles foram adicionados à sua lista de contato Brevo.
  • Double Opt-in:
    1. Seu novo contato insere seu endereço de e-mail em seu formulário.
    2. O contato deve clicar no link no e-mail de confirmação recebido para ser adicionado à sua lista de contato Brevo.
❗️ Importante
Existem duas maneiras para criar uma assinatura double opt-in. Certifique-se de só usar um dos dois métodos disponíveis: habilitar assinatura double opt-in via Marketing Automation OU via um formulário de inscrição Brevo. Se não, seus contatos receberão e-mails double opt-in duplicados.

Design

mceclip12.png

A configuração Design permite que você escolha o design de seus campos: nenhum, delineado, contorno curvo, sublinhado com fundo, sublinhado sem fundo.

Seu formulário também pode ser exibido como um formulário horizontal. Se você escolher esta opção, recomendamos que você remova as etiquetas dos seus campos.

Para mudar a cor do plano de fundo, vá em configurações de colunas, como explicado em Parte 3: editando as configurações de todos os elementos de sua landing page.

Aqui estão alguns exemplos de diferentes designs de formulários:

Style_form_gif.gif

Espaçamento

A configuração Espaçamento está descrita na seção Configurações comuns em Parte 3: edite as configurações de todos os elementos de sua landing page.

Controles do formulário de assinatura

mceclip0.png

A configuração Controles do formulário de inscrição permite que você escolha como quer que seu formulário funcione durante o envio:

  • Atualize contatos existentes no envio do formulário: essa opção é útil se quiser atualizar informações de contatos existentes quando eles enviarem seus formulários.
  • Desabilite o reCAPTCHA: desabilite o reCaptcha Google incorporado por padrão default built-in Google reCaptcha em sua landing page publicada.
  • Desative os parâmetros de URL no envio do formulário:
    Por padrão, os parâmetros de URL são exibidos no envio do formulário. Dados adicionais sobre o contato, como /thank-you.html/?firstName=Jane, podem ser exibidos no URL. Esse recurso é útil, pois seus contatos não precisam preencher as mesmas informações na segunda página se você coletar vários conjuntos de informações com uma série de páginas de destino em seu funil. No entanto, se você veicular anúncios do Google e receber uma notificação do Google sobre os parâmetros de URL exibidos no envio do formulário, poderá desativar esse recurso e republicar sua landing page.

Estilo

Essa configuração só está disponível no Novo construtor de landing pages.

mceclip14.png

A configuração Estilo permite que você defina a aparência do seu formulário::

  • Estilo e cor da borda: adicione uma borda ao seu formulário e selecione sua cor.
  • Largura da borda: defina a largura da borda do seu formulário.
  • Raio da borda: selecione o quanto as bordas de seu formulário devem ser arredondadas ou não.

Rastreamento Javascript (Facebook Pixel / Google Analytics)

O Rastreamento dará a você a oportunidade de inserir seus scripts de rastreamento em certas partes da página.

Um script de rastreamento é um código usado para monitorar o número de usuários que visitaram uma página. Scripts de rastreamento permitem que você analise por quanto tempo os visitantes ficaram na página, o que está chamando a atenção deles e como eles interagem com o conteúdo.

💡 É bom saber
Google Analytics e Facebook Pixel são os scripts de rastreamento mais usados, mas qualquer script de rastreamento pode ser adicionado a uma landing page da Brevo.

Para adicionar um script de rastreamento à sua landing page:

  1. No construtor de landing pages, clique em Configurações no canto inferior esquerdo.
  2. Selecione Rastreamento.
    mceclip15.png

  3. Escreva o script de rastreamento na tag adequada. Você pode adicionar um script na:

    • tag Head <head>,

    • tag <body> após a abertura,

    • ou Antes do fechamento da tag </body>.

      💡 Dica

      Serviços como Facebook e Google Analytics requerem que você tenha o script na tag head, enquanto outros serviços podem requerer isso na tag body. Consulte suas orientações atentamente sobre onde colocar o script.

  4. Clique em Concluído.

Landing page multi-páginas

mceclip17.png Se quiser adicionar páginas adicionais à sua  landing page para criar um funil, acesse o painel Páginas e clique em + Criar uma página em branco. Para saber mais, consulte nosso artigo dedicado Gerencie subpáginas em sua landing page.

Renderização com base no dispositivo

mceclip18.png

Graças aos botões Desktop/Dispositivos móveis no topo, você pode testar a renderização de sua landing page no desktop, tablet, e smartphone.

❗️ Importante
Você pode escolher ocultar algumas seções ou elementos de sua landing page de acordo com o dispositivo em que ela for exibida. Para saber mais, consulte a seção dedicada Visibilidade em Parte 3: edite as configurações de todos os elementos de sua landing page.

⏩ O que vem a seguir?

🤔 Dúvidas?

Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.

Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar à agência parceira da Brevo certa.

💬 Este artigo foi útil?

Utilizadores que acharam útil: 11 de 26