Como enviar os dados de seus formulários do Elementor PRO para as listas do GemMail usando N8N ou Make com a API do GemMail
Atenção: Esse material é para usuários avançados
Hoje em dia todo mundo quer ganhar tempo e uma das maneiras mais práticas que existem é fazer algum tipo de automação que facilite o trabalho de escravo, que geralmente somos obrigados a fazer, para ganhar nosso rico dinheirinho. E ferramentas como Zapier, Make e N8N acabam sendo uma mão na roda para ajudar nesse trabalho quando a idéia é não usar nenhum código.
Exato, essas são aplicações que facilitam o trabalho de quem não possui muita familiaridade com códigos ou simplesmente é um “preguicinha” como eu sou.
Pra falar a verdade o GemMail já permite nativamente que você faça o embed dos formulários de cada Lista criada usando o código de HTML de Form ou o iframe (que é o cúmulo da preguiça, mas funciona bem). Ou seja, se você já criou sua lista, pode jogar o HTML dor form em seu site e já vai funcionar sem dores de cabeça.
Agora, se você deseja customizar ainda mais seus formulários e seu fluxo de dados usando as ferramentas citadas acima, vale a pena acompanhar esse tutorial.
Iniciando a brincadeira
Você tem um site em WordPress que usa Elementor Pro, Contact Form 7 ou qualquer outro plugin de Formulário que permita a utilização de WebHooks?
Se a resposta foi sim, quer dizer que vai dar certo.
Aqui ao lado eu criei um “formulário lindão” no Elementor e agora vou te mostrar como conectar ele no Make. Na sequência faremos o Make enviar os dados para a sua Lista correta do GemMail usando a API, só que antes de partir pro Make, vamos criar uma Lista no GemMail.
Meu formulário lindão
Parte I - Pegando os dados da Lista e API do GemMail
Passo 1 - Se você não criou a sua lista, esse é o momento.
Sinto muito, não vou te ensinar como criar uma lista.
Siga esse tutorial: Como criar uma lista de contatos
Tudo bem, vai. Vou te dar uma chance. Você vai ter que acessar a sua Lista de Contatos para pegar o ID e verificar quais campos usará para fazer a integração.
Faça o Login no GemMail e Vá em Listas > Listas > Criar nova.
Se quiser encurtar o caminho, clique aqui quando estiver logado: Listas do GemMail
Agora siga o tutorial pra saber o que é cada campo que tem que preencher.
Depois de criar a lista volte para essa tela onde existe uma tabela com todas as suas listas e selecione a mesma clicando sobre o nome da lista que acabou de criar.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Parte II - Usando o Make com o GemMail
Passo 1 - crie um novo scenario
Uma vez que tenha feito o login no Make, acesse o menu como indicado na imagem abaixo e em seguinda clique no botão “+ Create a new scenario”
Passo 2 - crie um node do Tipo Custom WebHook
Agora que está no cenário, clique nesse botão “+” gigante e se quiser ir mais rápido digite “web…” que o Make já vai trazer as opções de nodes de Webhooks.
Selecione o “Custom Webhook“
Passo 3 - Configure o WebHook
Na sequencia você vai ver que o seu cenário retornará o ícone do “custom webhook”
3.1 – Agora você deve clicar no botão “create a webhook” nesse pequeno popup que abriu.
3.2 – Para você não se perder no cenário, pode criar um nome customizado para o seu gatilho de webhook.
3.1 – Agora você deve clicar no botão “create a webhook” nesse pequeno popup que abriu.
3.2 – Para você não se perder no cenário, pode criar um nome customizado para o seu gatilho de webhook em “Webhook name” e salve o que fez clicando nesse botão roxo escrito “Save”. Assim ficará fácil identificar o seu webhook depois.
3.3 – Depois que você salvou o nome do seu webhook. Clique sobre ele para pegar a URL que contém o endpoint que será usado no seu Form do Elementor Pro. Você só precisa clicar em “Copy Address to clipboard” e depois clicar em ok para voltar à tela inicial do “Scenario”.
3.4 – Deixe o seu webhook pronto para receber os dados. Você já tem o seu endpoint do Make na mão, agora vamos testar esse endpoint. Clique em “Run Once”. Isso vai deixar o endpoint ativado para captar os dados que você enviar.
3.5 – Enquanto o Make estiver aguardando os dados, sua tela ficará desse jeito.
Agora é hora de pegar o endpoint que você copiou no passo anterior e jogar lá no elementor. Bora pro passo 4.
Passo 4 - Configurando o Formulário do Elementor para enviar os dados
4.1 – Agora volte para a sua página do WordPress e no Builder do Elementor insira o seu formulário com os campos que desejar. A dica aqui é usar os mesmos campos que você usou para criar a sua lista no GemMail, mas caso ainda não tenha criado a lista sem problemas, depois faremos isso.
Por hora abra a página em que criou o seu formulário e acesse as configurações do formulário e aí clique em “Ações após o envio”
4.2 – Assim que o box abrir, selecione a opção “webhook”.
4.3 – O valor “Webhook” aparecerá no campo “Adicionar ação”, ao mesmo tempo o Box Webhook aparecerá no editor.
4.4 – Clique no box webhook e insira a URL com o endpoint que você copiou do make.
Não se esqueça de deixar o seletor “Dados avançados” ativo.
4.5 – Agora pode testar o envio. Publique a sua página e abra a página publicada e envie os dados com o seu fortmulário. Pode usar o rascunho do Elementor mesmo que não tem problema. Funcionará do mesmo jeito. Assim que enviar e receber a confirmação de dados enviados com sucesso, abra o seu Make novamente. Se a palavra webhook estiver em verde, significa que já recebeu os seus dados. Então, clique no ícone de lupa e abra o Popup. Seus dados enviados estarão no Bundle 1. Clique no ícone de +
4.5 – Ao clicar em Bundle 1 será possível visualizar todos os dados enviados pelo seu formulário ao webhook do Make. Todos esses valores indicados com as setas vieram no envio do formulário e são eles que usaremos para gravar os dados na lista do GemMail.
