Criar um formulário de inscrição

Essa guia mostra a versão mais atualizada do editor de formulários (lançada em novembro 2018). Se você estiver editando um formulário criado usando a versão anterior do editor, por favor revise essa guia. Para obter mais informações sobre o editor novo, clique aqui.

Visão geral

Neste tutorial, vamos mostrar a você como criar seu formulário de assinatura em apenas alguns cliques. Você será capaz de personalizar o design, o conteúdo, o comportamento e os campos coletados do formulário.

Você pode usar estes atalhos para pular para uma etapa específica:

  1. Criando um formulário
  2. Personalizando o design do formulário
  3. Selecionando a(s) lista(s) de contato
  4. Personalizando as configurações do formulário
  5. Personalizando as mensagens do formulário
  6. Compartilhando seu formulário

1. Criando um formulário de assinatura

No menu do alto, clique em Contatos.

Forms_1_EN.png

Em seguida, clique em Formulários.

Create-Form-EN-02.png

Vamos começar clicando no botão Criar um formulário de assinatura.

Create-Form-EN-03.png

Dê um nome ao seu formulário para ajudar a organizar e localizá-lo em sua conta.

Create-Form-EN-04.png

2. Fazendo o design de um formulário de assinatura

Você pode alcançar um ótimo nível de personalização modificando:

  • Plano de fundo
  • Fonte do texto, Tamanho e Cores
  • Campos do formulário (adicione quantos campos desejar)
  • Texto de instrução (direcionando usuários para como assinar)
  • Mensagem de sucesso (confirmando que um usuário cancelou a assinatura com sucesso)

Novos tipos de campos de formulários 

Adicione campos adicionais de formulário para coletar informações sobre seus assinantes e preencha-os com atributos de contatos existentes (tais como texto, número, data, categoria ou valores boleanos).

Adicione confirmação Opt-in para seu formulário para registrar seu consentimento de assinante para receber newsletters e e-mails promocionais.

Você também pode adicionar um campo de assinatura em multilistas para permitir aos assinantes declarar interesses ou preferências de registro e colocá-los nas listas correspondentes.

Cada novo campo de formulário vai corresponder a um atributo ou lista de contato:

  • Texto (atributo de contato)
  • Número (atributo de contato)
  • Data (atributo de contato)
  • Assinatura em multilista (lista de contato)
  • Double opt-in (atributo de contato)

Create-Form-EN-05.png

Captcha 

Para proteger você do spam, incluímos um Captcha em seu formulário por padrão. Para configurar o Captcha adequado para o seu site, acesse este site.

Uma vez configurado, insira a chave do site no campo fornecido em seu formulário SendinBlue.

Você também pode habilitar o Captcha invisível, marcando a caixa Captcha invisível no menu esquerdo do editor de formulário.

Create-Form-EN-06.png

Personalize o formulário

Você pode arrastar e soltar vários blocos de elementos do formulário, incluindo Título, Texto, Imagem e Divisor para seu formulário similar aos Campos de formulário. Para personalizar ainda mais o design do seu formulário, clique na aba Design do formulário no painel esquerdo do editor de formulário.

Create-Form-EN-07.png

Você será capaz de personalizar:

  • Cor ou imagem do plano de fundo
  • Estilo da fonte do texto, formato, cor, tamanho e alinhamento de um Título, Texto, Rótulo e Texto de ajuda
  • Plano de fundo, layout, largura, alinhamento, borda, opacidade e cantos da caixa do formulário
  • Cor do botão, estilo da fonte do texto, cor, tamanho, formato, alinhamento e cantos do botão
  • Cor e estilo da fonte do texto da mensagem de alerta de sucesso/erro; formato, cor, tamanho e alinhamento, cor, de fundo, cor da borda e cantos da caixa da mensagem de alerta

Visualização em dispositivo móvel

Todos os formulários são projetados de forma responsiva, por padrão. Você pode visualizar como eles vão parecer em um dispositivo móvel, mudando o visualizador do computador para o celular na parte de cima do editor.

Create-Form-EN-08.png

3. Seleção da lista

Uma vez concluída a criação do seu formulário, a próxima etapa é selecionar a lista (ou listas) onde seus novos contatos serão salvos após o formulário ser enviado. Você pode procurar por listas, digitando o nome da lista ou na pasta contendo a lista.

Create-Form-EN-09.png

Você também pode escolher criar novas listas a partir daqui.

Create-Form-EN-10.png

4. Configurações do formulário

É nesta seção que você pode escolher que tipo de mensagem de confirmação seus assinantes vão receber (se for o caso).

Create-Form-EN-11.png

4.1  Sem confirmação Escolha esta opção se não quiser enviar um e-mail de confirmação após a assinatura.

Após clicar no botão de assinatura no formulário, seus contatos serão redirecionados automaticamente para a URL inserida por você; ex.: http://www.meu-site.com, ou para uma página de confirmação. Se você não selecionar uma URL ou uma página de confirmação, então uma mensagem de confirmação de assinatura aparecerá na parte de cima do formulário, sem mudança de página. Para ajudar uma URL de redirecionamento ou uma página de confirmação, marque a caixa Página de confirmação.

Create-Form-EN-12.png

4.2  Confirmação simples Escolha esta opção se quiser enviar um e-mail de confirmação para um novo assinante confirmando que eles receberão, a partir de agora, os seus e-mails. Em seguida, selecione o modelo SMTP que você gostaria que o sistema usasse ao enviar a confirmação. O modelo padrão, chamado "Modelo padrão – Confirmação simples", está disponível e você pode personalizá-lo ou criar outro modelo de confirmação.

Dica: para criar um novo modelo SMTP, navegue pela aba Transacional e clique em Modelos e então no botão Novo modelo. Se você criar um novo modelo SMTP, certifique-se de ativá-lo, de modo que ele apareça como uma opção quando você configurar um formulário com Confirmação simples.

Você também pode escolher a URL de redirecionamento ou a página de confirmação dentro desta opção.

4.3  Confirmação double opt-in O processo de assinatura double opt-in exige que o assinante complete duas etapas para ser adicionado à sua lista de e-mail:

  1. Seu novo assinante insere o endereço de e-mail dele em seu formulário de registro.
  2. Após enviar o formulário, o assinante deve clicar no link em um e-mail de confirmação.

A confirmação double opt-in permite aos assinantes verificarem se eles desejam realmente receber seus e-mails. Este recurso elimina assinaturas acidentais e potenciais incômodos. Esta opção também é aconselhável para conformidade com o RGPD. Benefícios da confirmação double opt-in:

  • Para seus contatos:
    • Permite que eles verifiquem se não cometeram um erro ao se registrarem.
  • Para você:
    • Você tem a garantia de saber se um assinante está realmente interessado em receber seus e-mails.
    • Uma vez que o assinante confirmou duas vezes seu endereço de e-mail, você reduz consideravelmente o número de hard bounces (endereços de e-mail inválidos) em suas campanhas.
    • Você tem proteção contra concorrentes maliciosos que possam lhe fornecer um e-mail falso para danificar sua reputação.
    • Você permanece em conformidade com leis e regulamentos em alguns países: o double opt-in é obrigatório em diversos países, incluindo a União Europeia.

O e-mail de confirmação deve ser um de seus modelos SMTP e incluir formatação double opt-in (detalhes abaixo). Você pode usar:

  • O modelo padrão fornecido, "Modelo padrão - Confirmação double opt-in"
  • Ou um novo modelo criado por você.

Create-Form-EN-13.png

a. E-mail opt-in  Você também tem a possibilidade de criar ou selecionar seu próprio modelo para o e-mail Opt-in. Para isso, vá em Modelos SMTP e clique em Criar um modelo.

  • Na primeira etapa, Configuração, clique em Opções avançadas e adicione uma nova tag com o seguinte texto:
  • optin

    Create-Form-EN-19.png

    Crie seu modelo usando um dos diferentes editores de newsletter.
  • Em seguida, edite o modelo como desejado e insira este texto exato como no link double opt-in:
{{ doubleoptin }}
  • Por fim, salve e ative o modelo e retorne ao seu formulário de assinatura.

Create-Form-EN-14.png

b. Página de confirmação (opcional) Use esta ferramenta se quiser que seu assinante seja redirecionado para uma página específica (ex.: uma página de confirmação ou a página do seu site) após o registro.

c. E-mail de confirmação final (opcional) Use esta ferramenta se quiser que seus assinantes recebam um e-mail de confirmação final após terem completado o processo de double opt-in. Assim como com os outros e-mails de confirmação, o modelo padrão é simplesmente chamado de  “Modelo padrão - Confirmação final”.  Você pode encontrar e modificar isso em seus Modelos SMTP.

Dica: a Sendinblue criará automaticamente uma lista "Double opt-in temporária" para salvar as informações de contato dos assinantes que ainda não tenham completado a segunda etapa do processo de double opt-in (confirmando o endereço de e-mail).

A base de dados de seus contatos SendinBlue também será atualizada para incluir um novo atributo (coluna) rotulado "Double_opt -in". Contatos adicionados via double opt-in terão um valor de "Sim" dentro desta coluna. Se o contato tiver assinado por meio de outro tipo de formulário, este valor será "Não". Se você não usar um formulário de assinatura SendinBlue para adicionar contatos à sua base de dados, este campo ficará vazio.

Create-Form-EN-15.png

4.4  Configurações avançadas (Opcional)

a. E-mails temporários Selecione esta caixa sob Configurações avançadas para recurar endereços de e-mail temporários criados em serviços de endereços de e-mail como Yopmail, MyTrashMail, etc. Estes endereços não serão adicionados à sua base de dados de contatos a partir do envio de seu formulário.

b. Comportamento do formulário concluído Isso vai ocultar o formulário após este ter sido enviado pelo assinante. Se você não selecionar esta caixa, o formulário ainda aparecerá no modo de entrada para o visitante mesmo após depois de ter preenchido e enviado o formulário com sucesso.

Create-Form-EN-16.png

5.  Mensagens do formulário

É aqui que você pode personalizar/editar as mensagens de alerta de sucesso e erro a serem exibidas em seu formulário.

Create-Form-EN-17.png

6.  Compartilhar seu formulário

Após Salvar, a próxima etapa é Compartilhar para obter o código para integrar o formulário em seu site ou um link para compartilhamento rápido. Existem três tipos de código:

    • Iframe: fácil de integrar, este código permite que você insira o formulário em um pop-up ou na página do seu site.
    • HTML: este código é muito mais personalizável, com apresentações Ajax para mensagens.
    • HTML simples: esta é uma versão simplificada do código de formulário HTML que não exige o uso do JavaScript.

Dica: Captcha que exige o uso do JavaScript não pode ser incluído neste código de formulário.

Create-Form-EN-18.png

Por fim, apenas cole o código em seu site e o formulário aparecerá!