Pular para o conteúdo principal

Formulário no seu site (código)

Resumo​

Este artigo é para quem cuida do site da empresa: a agência, o desenvolvedor ou você mesmo, se edita o site no WordPress ou no Wix. Ele mostra onde pegar o código do formulário, como colar, o que o formulário captura sozinho e quando o lead aparece no funil.

Para criar e editar as perguntas do formulário (a parte que o dono da empresa faz no SafeMarketing), veja Captar leads sozinho.

Onde pegar o código​

No menu lateral, grupo Captação, clique em Formulários do site. Cada formulário é um cartão.

Tela Formulários do site com um cartão por formulário, a chavinha de publicar, o seletor Leads entram em e as ações Copiar código do site, Copiar link e Abrir

No cartão do formulário:

  1. Confira se a chavinha está em Publicado. Formulário Fora do ar não aparece no site nem pelo link.
  2. Em Leads entram em, escolha a coluna do funil onde os leads vão cair (o padrão é Primeira coluna do funil padrão).
  3. Clique em Copiar código do site ("Código copiado. Cole no HTML do seu site.") para o código de incorporar, ou em Copiar link para o endereço da página própria do formulário.
  4. Use Abrir para ver o formulário como o visitante vê.

Se ainda não há formulário, clique em Novo formulário, dê um Nome interno e clique em Criar. Ele já nasce com nome, WhatsApp, e-mail e mensagem, pronto para publicar.

O código de incorporar​

O que o botão Copiar código do site copia tem este formato (a CHAVE_DO_FORMULARIO já vem preenchida com a chave do seu formulário):

<div data-safemarketing-form="CHAVE_DO_FORMULARIO"></div>
<script src="https://api.safemarketing.com.br/safemarketing-public/form/CHAVE_DO_FORMULARIO/embed.js" async></script>
  • O <div> marca onde o formulário aparece. Sem ele, o formulário aparece no lugar em que o <script> foi colado.
  • O script é JavaScript puro, sem dependências. Funciona em qualquer site: HTML feito à mão, WordPress, Wix, landing pages.
  • O formulário é desenhado num Shadow DOM: o CSS do seu site não quebra o formulário, e o do formulário não vaza para o seu site.
  • As respostas ficam guardadas no navegador do visitante. Quem fecha a aba e volta continua de onde parou.
Cole o código direto na página

O script precisa estar no HTML da página. Se ele for injetado por outro script (por exemplo, pelo Google Tag Manager), o formulário não aparece. Se o seu site tem uma política de segurança de conteúdo (CSP), libere https://api.safemarketing.com.br em script-src e connect-src.

O botão Copiar link copia o endereço da página própria do formulário:

https://api.safemarketing.com.br/safemarketing-public/form/CHAVE_DO_FORMULARIO/page

Use esse link onde não dá para colar código: bio do Instagram, perfil do Google, resposta pronta do WhatsApp, botão "Fale com a gente" de um construtor de sites. Pode acrescentar UTMs no fim do link (veja abaixo).

WordPress, Wix e outros construtores de site​

Quase todo construtor tem um bloco de HTML personalizado. É nele que o código entra:

  • WordPress (editor de blocos): adicione o bloco HTML personalizado na página e cole o código. Nos construtores do WordPress (Elementor e parecidos), use o widget HTML.
  • Wix: use Incorporar código / HTML personalizado e cole o código. Se o espaço ficar pequeno, aumente a altura do elemento.
  • Outros (Webflow, Hostinger, Google Sites...): procure por "HTML", "código personalizado" ou "incorporar".
Quando o construtor não aceita script

Alguns construtores bloqueiam <script> ou colocam o código dentro de um quadro isolado (iframe). Nesses casos, o mais simples é criar um botão no site apontando para o link compartilhável. Se usar o quadro isolado, saiba que as UTMs da página principal podem não chegar ao formulário.

De onde veio o lead: UTMs​

O formulário captura sozinho, da página em que ele está:

  • utm_source, utm_medium, utm_campaign, utm_term e utm_content;
  • o endereço da página (landingUrl) e a página anterior (referrer);
  • o fbclid, quando o visitante veio de um anúncio da Meta.

Você não precisa programar nada: basta que o link que traz o visitante tenha as UTMs, por exemplo:

https://www.suaempresa.com.br/orcamento?utm_source=instagram&utm_medium=bio&utm_campaign=primavera

Essas informações ficam na ficha do lead, no bloco DE ONDE VEIO. Vale a primeira origem: se a mesma pessoa voltar depois por outro link, a origem registrada continua a primeira.

Anúncios da Meta: marque o anúncio na URL​

Para o SafeMarketing saber qual anúncio trouxe cada lead do site (e mostrar os resultados por criativo), acrescente os parâmetros dinâmicos da Meta na URL do anúncio, no campo Parâmetros de URL do anúncio no Gerenciador de Anúncios:

ad_id={{ad.id}}&adset_id={{adset.id}}&campaign_id={{campaign.id}}

A Meta troca {{ad.id}}, {{adset.id}} e {{campaign.id}} pelos números reais na hora do clique. Se você já usa utm_content={{ad.id}}, isso também funciona para identificar o anúncio.

Os anúncios criados pelo SafeMarketing e os leads do formulário instantâneo da Meta têm um caminho próprio: veja Leads dos anúncios e resultados.

Quando o lead é criado​

O formulário não espera o botão Enviar. Cada campo que o visitante preenche vai para o SafeMarketing na hora, e o lead nasce assim que existe pelo menos um destes:

  • um nome;
  • um e-mail válido;
  • um telefone com pelo menos 10 dígitos (o formulário já manda com o código do país).

Antes disso, é só uma visita, e nada é gravado. Depois disso, o lead aparece na coluna escolhida em Leads entram em, mesmo que a pessoa desista no meio, e cada etapa vista, campo preenchido, envio ou abandono entra na linha do tempo dele.

Outros detalhes:

  • Sem cartão duplicado. Se já existe um lead com o mesmo telefone ou e-mail (cadastrado à mão, vindo do WhatsApp), o formulário completa esse lead em vez de criar outro.
  • Campos nativos e campos próprios. Nome, e-mail, telefone, empresa e mensagem vão para os campos do lead. Qualquer outra pergunta do formulário (por exemplo, "Data da festa" ou "Quantidade de alunos") fica guardada como campo personalizado na ficha.
  • Avisar outro sistema. Se você quer que o seu sistema saiba de cada lead novo, use Webhooks (evento lead.created e os eventos form.*).

O botão de agendar reunião​

O formulário pode ter um botão de agendar reunião numa das etapas. Ele toma o lugar do Continuar (ou do Enviar) daquela etapa, grava o lead e abre um calendário dentro do próprio formulário, só com os horários livres. Quem cuida do site não precisa fazer nada a mais: o botão vem junto com o mesmo código e aparece também no link compartilhável.

A configuração do botão (texto, tipo de reunião, mensagem depois de agendar) é feita no editor do formulário, no SafeMarketing. O passo a passo está em Captar leads sozinho (seção "O botão de agendar, dentro do formulário"), e os tipos de reunião em Agendar reuniões.

Trocar o endereço do formulário​

Se o formulário começar a receber cadastros falsos, no cartão, abra o menu Mais e escolha Trocar endereço. O código colado no site e o link compartilhado param de funcionar na hora. Depois, copie o código novo e cole no site de novo.

Não existe API com chave para criar leads​

Integração de entrada é pelo formulário

O SafeMarketing não tem uma API pública com chave para criar leads a partir de outro sistema (um ERP, um app próprio, outra plataforma). As rotas do sistema são de uso do próprio app. Os caminhos para os leads entrarem são o formulário (pelo código ou pelo link), o WhatsApp, os anúncios da Meta e a importação de planilha. Para saída, use Webhooks.

Se você precisa de outra forma de integração, escreva para contato@safemarketing.com.br.

E depois​

Para ir além​