Como codificar um formulário pop-up personalizado do Mailchimp

0
Tutoriais
20/06/2023
A+ A-
Email Print

Neste tutorial, aprenderemos como personalizar o formulário incorporado do Mailchimp e incluí-lo em um pop-up modal JavaScript personalizado.

Existem todos os tipos de plataformas de marketing, como Mailchimp, Sendinblue, ContactPigeon e Constant Contact. Isso pode ajudá-lo a expandir seus negócios e gerar mais leads, fornecendo ferramentas para enviar mensagens de marketing, segmentar públicos, criar jornadas de clientes e assim por diante. Todos vêm com planos de preços diferentes – alguns até oferecem um serviço gratuito. Além disso, dependendo da sua plataforma (eCommerce, CMS, CRM), eles podem oferecer integrações integradas. Por exemplo, o plugin WordPress Contact Form 7 (CF7) fornece um módulo de integração com Constant Contact.

Um exemplo popular de campanha de marketing que você pode ter visto em diferentes lojas de comércio eletrônico é receber um desconto único na assinatura de um boletim informativo. A jornada pode ser a seguinte:

  • Primeiro, você se inscreve no boletim informativo.
  • Em seguida, um e-mail automático é enviado imediatamente para o seu endereço com um código promocional de desconto único que você pode usar por um período limitado.

Mas as coisas não se limitam apenas às lojas. Outro exemplo pode ser um formulário de site de faculdade onde um candidato pode expressar seu interesse em um programa. A jornada aqui pode ser a seguinte:

  • Primeiro, você preenche o formulário expressando seu interesse em um programa.
  • Em seguida, um e-mail automático é enviado imediatamente para o seu endereço com um arquivo anexado que descreve o programa escolhido com mais detalhes.
  • Ao mesmo tempo, seu endereço de e-mail é adicionado a uma lista com tags específicas, por exemplo, “Licenciatura – Informática – 2023-2024”. Isso ajudará a equipe de marketing por trás da faculdade a categorizar o público e fazer promoções de tempos em tempos.

Código do Modal

Conforme discutido acima, em um tutorial anterior, criamos um modal pop-up JavaScript flexível do zero com um efeito de animação personalizável (fade, slide, bounce, etc.) de sua caixa de diálogo.

Aqui está a demonstração:

Para este exemplo, nosso modal será iniciado por meio do slideInOutLeft animação (clique no primeiro botão acima para vê-la em ação). Manteremos todas as principais funcionalidades do modal intocadas e faremos apenas algumas pequenas modificações estilísticas, como aumentar sua altura e cantos arredondados.

Também forneceremos duas maneiras de revelar o modal:

  • Primeiro, ao clicar no botão, como já acontece.
  • Alternativamente, o modal pode carregar automaticamente quando a página carrega com um pequeno atraso. Então, após o usuário fechá-lo, ele não abrirá novamente, a menos que abra uma nova sessão do navegador. Para este caso, adicionaremos uma pequena quantidade de código JavaScript e ativaremos o armazenamento da sessão. Obviamente, se você deseja uma solução mais permanente, pode substituir o armazenamento de sessão pelo armazenamento local.

Tanto o armazenamento local quanto o armazenamento de sessão são usados ​​para armazenar dados no navegador. O armazenamento local não expira, a menos que você limpe os dados por conta própria. Pelo contrário, o armazenamento da sessão é limpo quando a sessão da página termina. Saiba mais sobre este tópico nos documentos do MDN.

Crie o formulário do Mailchimp

As etapas a seguir exigem que você tenha uma conta do Mailchimp. Depois de fazer login no painel do Mailchimp, realizaremos três ações:

Primeiro, vamos gerar o formulário por selecionando o Formulários incorporados opção.

Como obter o código HTML de um formulário do MailchimpComo obter o código HTML de um formulário do MailchimpComo obter o código HTML de um formulário do Mailchimp

Então, no Construtor de formuláriosalém dos predefinidos E-mail input, adicionaremos mais dois obrigatórios.

Como obter o código HTML de um formulário do MailchimpComo obter o código HTML de um formulário do MailchimpComo obter o código HTML de um formulário do Mailchimp

A ordem não importa, pois também podemos reposicioná-los manualmente posteriormente no HTML.

Finalmente, por clicando no Completo botão no canto superior direito, obteremos o código gerado.

O código geradoO código geradoO código gerado

O Mailchimp também oferece a opção de exportar o código gerado sem estilos, mas não usaremos essa abordagem.

Incorporar o código

Pegaremos o código gerado do Mailchimp e o colaremos em nosso modal:

1
 
 class="modal-dialog">

2
 
    

3

Edite o código gerado (um pouco)

Nosso formulário atualmente está assim:

O formulário do Mailchimp antes de nossas alteraçõesO formulário do Mailchimp antes de nossas alteraçõesO formulário do Mailchimp antes de nossas alterações
O formulário do Mailchimp antes de nossas alterações

No entanto, faremos algumas melhorias estéticas. Aqui estão as principais modificações que faremos neste código:

  • Para tornar as coisas mais legíveis, colocaremos os arquivos CSS e JS do Mailchimp relacionados antes do fechamento head e body tags da nossa página, respectivamente.
  • Para criar o layout de duas colunas, agruparemos as duas entradas de texto dentro de um elemento com o grid aula.
  • Removeremos os rótulos de todas as entradas e daremos a eles um atributo de espaço reservado extra.
  • Iremos alterar alguns textos, e remover alguns elementos/classes extras que não precisaremos como o .indicates-required e .helper_text uns.
  • Adicionaremos alguns estilos personalizados.

Nosso formulário agora ficará assim:

O formulário do Mailchimp após nossas alteraçõesO formulário do Mailchimp após nossas alteraçõesO formulário do Mailchimp após nossas alterações
O formulário do Mailchimp após nossas alterações

Validação de formulário

Se alguém tentar enviar o formulário sem preencher todos os campos, aparecerão mensagens estilizadas.

Envio de formulário sem sucessoEnvio de formulário sem sucessoEnvio de formulário sem sucesso

Confirmação de sucesso

Assim que alguém preencher o formulário com sucesso, será adicionado ao público-alvo – veja as telas frontal e traseira abaixo.

A mensagem que aparece após o envio do formulárioA mensagem que aparece após o envio do formulárioA mensagem que aparece após o envio do formulário
Os usuários inscritosOs usuários inscritosOs usuários inscritos

Aceitação dupla para novos destinatários

Como etapa extra de verificação, há também a opção de habilitar o duplo opt-in nas configurações do formulário.

Como ativar o opt-in duploComo ativar o opt-in duploComo ativar o opt-in duplo

Nesse caso, o usuário precisa primeiro confirmar sua assinatura – então ele será adicionado ao público.

A mensagem que aparece depois que o formulário é enviado quando o double opt-in está ativadoA mensagem que aparece depois que o formulário é enviado quando o double opt-in está ativadoA mensagem que aparece depois que o formulário é enviado quando o double opt-in está ativado
A confirmação por e-mail quando a opção de aceitação dupla está habilitadaA confirmação por e-mail quando a opção de aceitação dupla está habilitadaA confirmação por e-mail quando a opção de aceitação dupla está habilitada

Conclusão

É isso! Vamos recapitular o que construímos hoje:

  • Primeiro, abordamos como configurar e personalizar um formulário de inscrição incorporado do Mailchimp e, em seguida,
  • como incluí-lo dentro de um pop-up modal JavaScript personalizado.

Conforme mencionado no início, esta demonstração não funcionará a menos que você altere o valor do action atributo.

Obviamente, o Mailchimp fornece outras maneiras de incorporar um formulário de inscrição em suas páginas da web. Da mesma forma, existem plugins para diferentes plataformas prontos para lidar com tudo isso para você.

Como sempre, muito obrigado pela leitura!

Posted by

Tagged with
Newer Post
Older Post

Deixe uma resposta