Como enviar um e-mail HTML após um formulário com Make, Tally e Gmail

Você recebe uma solicitação pelo formulário e quer confirmar o recebimento com uma mensagem clara, o logotipo da empresa e um próximo passo útil. No Make, essa confirmação pode usar um e-mail HTML criado visualmente no Mailvex, sem escrever o layout inteiro dentro da automação.

Neste guia, o Tally recebe a resposta, o Make organiza os dados e o Gmail envia a mensagem. Começaremos com um destinatário fixo: o seu próprio endereço. Depois de conferir o resultado, o destinatário passará a ser o e-mail informado no formulário. O único dado personalizado no corpo será o nome.

1. Prepare as contas e um formulário de teste

Você precisa de acesso ao Tally, ao Make, a uma conta Gmail que possa autorizar a conexão e ao Mailvex com o e-mail da conta confirmado. Confira as condições do seu plano para exportar HTML, as cotas do Make e os limites de envio da conta Google. Este fluxo usa a conexão Gmail do Make; não exige configurar SMTP.

• Crie um formulário Tally com o campo Name obrigatório. Use um campo de texto curto para o nome.
• Adicione Email como campo obrigatório do tipo e-mail, para receber um endereço com formato adequado.
• Se quiser, acrescente Question como campo opcional. A pergunta ficará fora do corpo da confirmação deste exemplo.
• Publique o formulário e tenha seu link disponível. Prepare um nome de teste e um endereço que pertença a você.

Os nomes Name e Email facilitam acompanhar o exemplo, mas não substituem a identificação dos campos no Make. Ao receber a primeira resposta, você verificará os dados reais em Fields by ID. O campo de e-mail ajuda a validar o formato; ele não comprova que quem preencheu o formulário é dono daquele endereço.

2. Capture uma resposta com apenas o módulo Tally

Crie um cenário vazio no Make. Adicione Tally e selecione Watch New Responses. Nesse momento, mantenha apenas esse módulo no cenário: a primeira execução serve para conhecer os dados recebidos, antes de incluir qualquer envio.

Mantenha Immediately as data arrives desativado até concluir os testes manuais. Se o cenário já estava ativo e você vai alterar o modelo, desative primeiro o controle e salve. Envie cada nova resposta depois de Run once e não execute outra cópia ao mesmo tempo.

• No módulo, selecione Create a webhook e preencha Webhook name com um nome reconhecível para esse formulário.
• Em Connection, escolha uma conexão existente ou use Add. Quando solicitado, selecione Tally OAuth e conclua a autorização da conta.
• Em Form ID, selecione o formulário de teste. Salve o webhook e o módulo; salve também o cenário.
• Clique em Run once. Com o módulo aguardando, abra o formulário publicado e envie uma nova resposta usando seus próprios dados.

Abra a bolha de resultado do módulo e localize Fields by ID. Identifique qual entrada contém o nome enviado e qual contém o endereço de e-mail. Esses serão os tokens selecionados pelo painel de mapeamento nas próximas etapas. Não copie um caminho de outro tutorial nem adivinhe o identificador de um campo.

Watch New Responses usa webhook: para essa captura, é necessário gerar uma resposta nova depois de iniciar Run once. Se nada chegar, confira o formulário escolhido e a conexão. Não avance enquanto não conseguir reconhecer seus dois valores no resultado do Tally.

3. Crie uma confirmação simples no Mailvex

No Mailvex, escolha um modelo com Usar modelo, ou Usar este modelo na página de detalhes. Prefira uma estrutura curta: logotipo, saudação, confirmação do recebimento, próximo passo e rodapé. O objetivo é orientar quem acabou de preencher o formulário, sem acrescentar ofertas ou promessas que não fazem parte da solicitação.

Use este conteúdo como referência: saudação “Olá, NAME_SLOT!”, título “Recebemos sua solicitação” e texto “Obrigado por entrar em contato. Sua solicitação foi recebida. Se precisar complementar as informações, utilize nosso canal de atendimento.” Inclua um botão para uma página real de contato, se ela for útil. Não invente um prazo de resposta.

Coloque NAME_SLOT uma única vez, em um bloco de texto comum. Esse marcador será substituído no Make pelo nome tratado para HTML. Não o coloque no endereço de um botão, em atributos de imagem ou em código de script. Deixe Question fora da mensagem: uma confirmação de recebimento não precisa reproduzir todo o texto enviado.

• Ajuste as cores, o logotipo, a assinatura e o idioma dos elementos de serviço e do rodapé.
• Defina um preheader coerente, por exemplo: “Sua solicitação foi recebida pela nossa equipe.”
• Troque links de exemplo e destinos # por páginas reais. Confira também os links do rodapé.
• Remova condições e variáveis de modelos que este fluxo não preenche, como {{first_name}} ou {{unsubscribe_url}}. Preserve os links de serviço necessários com destinos reais.

A prévia pode mostrar valores de demonstração para algumas variáveis. Isso não significa que o HTML exportado terá esses valores. Nosso exemplo deve sair estático, com a única exceção do marcador NAME_SLOT. O assunto da mensagem será preenchido separadamente no Gmail dentro do Make.

Selecione cada bloco condicional, abra “Condição de exibição (ESP)” no painel direito e desative “Mostrar por condição”. Alterar apenas a visibilidade na prévia não remove a condição do código exportado.

4. Copie o HTML e mantenha as imagens acessíveis

Abra Exportar HTML. Em Formato de variáveis (ESP), use o perfil mailvex e clique em Copiar HTML. Esse perfil não converte variáveis em tokens do Make e não busca dados do Tally. Confira o código copiado: NAME_SLOT deve estar presente, mas não devem restar variáveis ou condições sem tratamento.

Copiar e baixar HTML contam como ações de exportação conforme seu plano. Um método basta: se precisar de um arquivo, salve o código já copiado como texto em um arquivo .html.

Para o primeiro teste, mantenha as imagens no modo Mailvex, com os endereços hospedados no código. Uma imagem precisa estar acessível publicamente para carregar fora do editor. O modo Próprio altera a base das URLs, mas exige que você hospede os arquivos no destino; escolhê-lo sozinho não transfere as imagens.

Não use caminhos do computador nem links que exigem login. Evite excluir imagens que continuam sendo referenciadas por mensagens já exportadas. Alterações futuras no design também exigirão copiar novamente o HTML para o cenário: a cópia colada no Make não se atualiza quando você edita o projeto no Mailvex.

5. Configure Gmail: Send an email

Adicione Gmail após o Tally e escolha Send an email. Crie ou selecione a conexão e autorize a conta Google solicitada pelo Make. Se sua organização restringe aplicativos externos, a autorização pode depender das regras do administrador. Nenhuma senha deve ser colocada dentro do HTML.

Em Connection, use Create a connection e depois Sign in with Google para autorizar a conta que enviará a mensagem.

Deixe CC recipients e BCC recipients vazios. No primeiro teste, use a conta conectada como remetente e não adicione outros destinatários. Deixe Signature content vazio se o design já incluir uma assinatura.

O nome do campo do corpo pode aparecer como Content ou Body contents conforme a interface. O ponto essencial é usar Raw HTML e colar o código, não uma imagem da mensagem ou o texto copiado da prévia visual. Mantenha o assunto estático enquanto verifica o fluxo básico.

6. Substitua NAME_SLOT pelo nome com escapeHTML

No campo do corpo, encontre NAME_SLOT dentro da saudação. Apague somente o marcador e deixe o cursor nesse ponto, preservando o restante do HTML. No painel de mapeamento, abra Text and binary functions e selecione escapeHTML. Dentro do argumento da função, escolha o token do nome em Fields by ID do Tally, na primeira aba do painel.

A função escapeHTML(text) escapa a marcação HTML do nome antes de inseri-lo no texto da saudação. Por exemplo, um trecho como <b>Maria</b> deve aparecer como texto, sem formatar o e-mail. Selecione o token real no painel; não escreva manualmente uma expressão com identificadores supostos.

Aplique a função somente ao nome, nunca ao documento inteiro, pois isso faria o código aparecer como texto. Este procedimento é para um valor dentro de texto visível; não é uma instrução para inserir respostas em URLs, atributos ou scripts. Salve o módulo depois de conferir o mapeamento e o destinatário fixo.

7. Faça um envio controlado e confira a mensagem

Com Tally e Gmail conectados, clique novamente em Run once. Envie uma nova resposta no formulário usando seu nome de teste e seu próprio endereço. Agora a execução pode enviar uma mensagem real: verifique o destinatário fixo antes de começar e não use respostas de clientes para esse teste.

• No Make, confira a execução do Tally e os dados que chegaram ao módulo Gmail, especialmente destinatário, assunto e nome.
• Abra a mensagem no seu próprio e-mail. Confira a saudação, os acentos, o texto, o preheader, os links e o rodapé.
• Veja a mensagem no computador e no celular. Avalie largura, tamanho do texto, botão e carregamento das imagens.
• Se fizer ajustes, atualize o HTML no Make, reaplique o mapeamento do nome se necessário e gere uma nova resposta de teste.

A prévia do editor não reproduz todos os comportamentos dos aplicativos de e-mail. Uma execução concluída também não garante a posição da mensagem na caixa de entrada. Se ela não aparecer, confira a conta remetente, a execução e as pastas de spam, sem disparar repetidamente o cenário às cegas.

8. Mapeie o destinatário antes de ativar o cenário

Depois de validar o layout, volte ao Gmail. Em Recipient email address 1, substitua seu endereço fixo pelo token correspondente a Email em Fields by ID. Esse campo recebe um endereço, não HTML: não aplique escapeHTML ao destinatário. Confirme que você selecionou Email, e não Name ou Question.

Faça mais uma execução controlada com Run once e uma nova resposta contendo seu próprio e-mail. Confira o destinatário resolvido no módulo e a mensagem recebida. Só depois ative o agendamento imediato, Immediately as data arrives, e salve com Save para que novas respostas sejam processadas automaticamente.

Antes de ativar, revise se há eventos de teste aguardando na fila. Reexecutar uma operação ou processar respostas pendentes pode produzir novos envios. Para uso contínuo, trate duplicidades com um identificador único da resposta, quando disponível: registre o que já foi processado e verifique esse registro antes de enviar. Não use apenas o nome como identificador.

Problemas frequentes e o que conferir

Perguntas frequentes

Preciso de uma integração nativa entre Mailvex e Make?

Não para este processo. Você cria o layout no Mailvex e transfere o HTML com Copiar HTML. Tally e Gmail são os módulos conectados ao cenário. O transporte da mensagem fica com o Gmail; o Mailvex prepara o conteúdo.

Posso incluir a pergunta enviada pelo formulário?

É possível ampliar o fluxo, mas este exemplo mantém Question fora da confirmação. Se adicionar outros valores, revise a finalidade e o contexto de cada inserção. escapeHTML protege a inserção como texto HTML; não valida endereços, não autoriza destinatários e não resolve qualquer tipo de conteúdo.

Esse cenário serve para uma campanha para muitos contatos?

Ele demonstra uma confirmação individual após uma resposta. Campanhas exigem avaliar consentimento, descadastro, gestão de contatos e limites do serviço de envio. Não transforme uma automação de atendimento em disparo de lista sem preparar esses requisitos.

Como reutilizo o trabalho em outro formulário?

Duplique o design se precisar de outra mensagem e atualize o HTML no cenário correspondente. No Make, confira o novo Form ID e capture uma resposta para mapear os campos reais. Reutilizar o layout não elimina a necessidade de revisar destinatário, tokens e teste de envio.