Landing pages - Parte 4: adicionar um formulário à landing page e usar opções avançadas

💡 É bom saber
As landing pages estão disponíveis para as ofertas Business e Enterprise.

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

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

É bom saber

O novo editor de landing page oferece algumas opções que podem ser diferentes do editor de landing page clássico. Verifique a guia correta com base no editor de landing page que você está usando:

mceclip6.png

mceclip5.png

Novo editor de landing page

Editor de landing page clássico

Adicionar um elemento de formulário

Os formulários permitem que você recupere informações específicas sobre seus contatos e as adicione automaticamente à sua lista de contatos no Brevo.

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

Novo editor Editor clássico
Adicione uma nova seção em Sections (Seções) > Filter pre-made sections (Filtrar seções predefinidas) > Forms (Formulários) e escolha uma seção predefinida que pode ser editada para satisfazer suas necessidades. Ou comece do zero adicionando um novo elemento Formulário à sua landing page.

Configure seu formulário

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

Alinhamento

Essa configuração está disponível somente no novo editor de landing page.

A configuração Alignment (Alinhamento) é descrita na seção Common settings (Configurações comuns) na Parte 3: editar as configurações de todos os elementos da landing page.

Gerenciar campos

As configurações Manage Fields (Gerenciar campos) permitem escolher onde armazenar os contatos coletados com o formulário e quais informações você deseja obter deles. Você também pode configurar o próprio formulário: adicionar e classificar campos, tornar campos obrigatórios ou não, adicionar texto de ajuda etc.

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

Escolha sua lista de contatos

 
  1. No formulário, clique em Edit Form (Editar formulário).
  2. Na configuração Manage Fields (Gerenciar campos), selecione em qual pasta e lista os contatos que você coletar serão armazenados na sua conta Brevo:
    • Selecione uma pasta de lista no primeiro menu suspenso.
    • Selecione uma lista de contatos no segundo menu suspenso.
❗️ Importante
Caso você queira atualizar os contatos existentes da sua lista quando eles enviarem o formulário, marque a opção Update existing contacts on form submission (Atualizar contatos existentes no envio do formulário) em Form Subscription Controls (Controles de assinatura do formulário).

Configurar os campos

Adicione e organize os diferentes campos de contato com as informações que você quer coletar com seu formulário. 

  1. Add a contact field (Adicionar um campo de contato): adicione atributos de contato preexistentes ao seu formulário.
  2. Create a new field (Criar um novo campo): se o atributo de contato ainda não existir, você pode criar um aqui.
  3. Reorder the fields (Reordenar os campos): clique no ícone = e arraste e solte um campo para reordená-lo.
    Delete a field (Excluir um campo): clique no ícone da lixeira para remover um campo.

    Clique em um campo para selecionar as configurações:
  4. Label (Rótulo): exibe o rótulo acima do campo.
  5. Hidden (Oculto): escolha se o campo deve ficar oculto ou visível no formulário.
    Adicione um campo de formulário oculto quando quiser que os dados sejam preenchidos automaticamente, transmitindo os dados no URL com parâmetros de consulta.
  6. Required (Obrigatório): escolha se o campo é obrigatório para enviar o formulário ou não.
  7. Dependendo do campo selecionado, você terá diferentes configurações:

    • Label (Rótulo): altere o nome do rótulo que é exibido acima do campo.
    • Placeholder: insira o texto que será exibido no seu campo. Por padrão, é o mesmo texto do rótulo.
    • Help text (Texto de ajuda): insira o texto que é exibido abaixo do seu campo. Isso pode ser útil para sugestões.
    • Default value (Valor padrão): insira o valor que será sincronizado na sua lista de contatos do Brevo caso o visitante não preencha o campo.
    • URL Param (Parâmetro de URL): insira o valor que será inserido automaticamente no campo do formulário. O contato pode substituí-lo, se necessário. Para saber mais, confira nosso artigo dedicado Preencher previamente um formulário em uma landing page com atributos de contato.
❗️ Importante
Se você adicionar um número de telefone no seu formulário, o único formato funcional será o internacional com um sinal + e o código do país: +447911123456 para o Reino Unido, +12025550101 nos EUA ou +33655678834 na França. Use um placeholder para ajudar os usuários a preencher no formato correto.

Opções de redirecionamento

A configuração Redirect Options (Opções de redirecionamento) permite que você escolha para onde os usuários serão redirecionados quando enviarem as informações: 

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

  • Page in the funnel (Página no funil): selecione para qual página do funil você quer redirecionar os contatos.
  • Link to a URL (Link para um URL): insira o link para a página externa para a qual você quer redirecionar os contatos.

Double opt-in

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

  • Single opt-in:
    1. O novo contato insere o endereço de e-mail em seu formulário.
    2. Ele é adicionado à sua lista de contatos do Brevo.
  • Double opt-in:
    1. O novo contato insere o endereço de e-mail em seu formulário.
    2. O contato deve clicar no link no e-mail de confirmação que receber para ser adicionado à sua lista de contatos do Brevo.
❗️ Importante
Há duas maneiras de criar uma assinatura double opt-in. Use apenas um dos dois métodos disponíveis: habilitar assinatura double opt-in por meio da automação de marketing OU por meio do formulário de assinatura do Brevo. Caso contrário, seus contatos receberão e-mails duplicados de double opt-in.

Design

A configuração Design permite que você escolha o design do seu campo: nenhum, contornado, contorno curvo, sublinhado com fundo, sublinhado sem fundo.

Seu formulário também pode ser exibido na horizontal. Se você escolher um formulário horizontal, recomendamos remover o rótulo dos campos.

Para alterar a cor de fundo, vá até as configurações de coluna conforme explicado na Parte 3: editar as configurações de todos os elementos da landing page.

Confira alguns exemplos de diferentes designs de formulário:

Style_form_gif.gif

Espaçamento

A configuração Spacing (Espaçamento) é descrita na seção Common settings (Configurações comuns) na Parte 3: editar as configurações de todos os elementos da landing page.

Controles de assinatura do formulário

A configuração Form Subscription Controls (Controles de assinatura do formulário) permite que você escolha como deseja que seu formulário funcione durante o envio:

  • Update existing contacts on form submission (Atualizar contatos existentes no envio do formulário): esta opção será útil se você quiser atualizar as informações dos contatos existentes quando eles enviarem os formulários. 
  • Disable reCAPTCHA (Desabilitar reCAPTCHA): desabilite o reCAPTCHA do Google padrão integrado na sua landing page publicada.
  • Disable URL Parameters on form submission (Desabilitar 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 precisarão preencher as mesmas informações na segunda página se você coletar vários conjuntos de informações com uma série de landing pages em seu funil. No entanto, se você veicular anúncios do Google e receber uma notificação do Google sobre parâmetros de URL exibidos no envio do formulário, poderá desativar esse recurso e republicar sua landing page.

Estilo

Essa configuração está disponível somente no novo editor de landing page.

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

  • Border style and color (Estilo e cor da borda): adicione uma borda ao formulário e selecione a cor.
  • Border width (Largura da borda): defina a largura que a borda do formulário deve ter.
  • Border radius (Raio da borda): selecione o quão arredondadas as bordas do formulário devem ser.

Habilitar rastreamento de JavaScript (Facebook Pixel/Google Analytics)

A configuração Tracking (Rastreamento) da sua landing page permite que você insira scripts de rastreamento em determinadas partes da página.

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

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

Para adicionar um script de rastreamento à sua landing page:

  1. No editor de landing page, clique em Settings (Configurações) no canto inferior esquerdo.
  2. Selecione Tracking (Rastreamento).

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

    • na tag de cabeçalho <head>,

    • depois de abrir a tag <body>,

    • ou na tag </body> antes do fechamento.

      💡 É bom saber

      Serviços como o Facebook Pixel e o Google Analytics exigem que o script seja adicionado à tag de cabeçalho, enquanto outros serviços podem precisar dela no corpo. Verifique as instruções do serviço de rastreamento para determinar onde o script deve ser adicionado.

  4. Clique em Done (Concluído).

Landing page com várias páginas

Se você quiser adicionar outras páginas à sua landing page para criar um funil, vá até o painel Pages (Páginas) e clique em + Create a blank page (Criar uma página em branco). Para saber mais, confira nosso artigo dedicado Gerencie subpáginas em sua landing page.

Renderização baseada em dispositivo

As opções Desktop e Mobile (Dispositivos móveis) na parte superior da landing page permitem que você teste a renderização da sua landing page em diferentes dispositivos.
❗️ Importante
Você pode ocultar algumas seções ou elementos da sua landing page de acordo com o dispositivo em que eles são exibidos. Para saber mais, confira nossa seção dedicada Visibility (Visibilidade) na Parte 3: editar as configurações de todos os elementos da 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?

15 de 37 acharam isto útil