Tutorial 6 min •

Integrar o Prospect Hub aos seus formulários de contacto: guia técnico

Ligue os seus formulários web ao Prospect Hub. Receba automaticamente os seus leads a partir do seu site. Guia com exemplos de código HTML e JavaScript.

PH

Team Prospect Hub - Christophe Picciotto

Prospect Hub

Integrar o Prospect Hub aos seus formulários de contacto: guia técnico

Centralize todos os seus leads automaticamente

O seu site gera pedidos de contacto. O seu formulário funciona, os emails chegam… algures. Mas é depois?

Tem de copiar-colar as informações para uma folha de cálculo. Ou pior, trata os pedidos diretamente a partir da sua caixa de email, sem acompanhamento, sem histórico, sem organização.

65% dos leads web são perdidos por falta de tratamento nas 24 horas. O problema não é o formulário, é o que vem depois.

Com a integração CRM formulário do Prospect Hub, cada submissão chega diretamente ao seu pipeline. Sem copiar-colar, sem leads esquecidos. Neste guia técnico, mostro-lhe como ligar qualquer formulário web ao seu CRM de prospeção — em poucas linhas de código.

Pré-requisitos: obter a sua chave API

Antes de modificar o seu formulário, precisa de recuperar a sua chave API de leads pessoal.

Passo 1: Aceder às integrações

  1. Inicie sessão na sua conta Prospect Hub
  2. Clique em Definições no menu
  3. Selecione o separador Integrações

Passo 2: Criar uma chave API

Na página de integrações, encontrará a secção Chaves API.

  1. Clique em Criar uma nova chave
  2. Dê-lhe um nome descritivo (ex: “Formulário site principal”)
  3. Clique em Gerar

Passo 3: Copiar a chave

A sua chave aparece no formato pk_xxxxxxxxxxxxxxxxxxxxx. Comeca sempre por pk_ (de public key).

Importante: Esta chave permite unicamente criar leads. Não dá acesso aos seus dados existentes. Pode utilizá-la em segurança em código do lado do cliente.

Guarde esta chave à mão, vai precisar dela para os passos seguintes.

Opção 1: Formulário HTML simples

É o método mais rápido. Um formulário clássico que envia diretamente os dados para o Prospect Hub.

Código completo do formulário

<form
  action="https://prospect-hub.app/api/public/leads"
  method="POST"
>
  <!-- Chave API (obrigatória) -->
  <input type="hidden" name="_api_key" value="pk_a_sua_chave_aqui" />

  <!-- Redireção após submissão -->
  <input type="hidden" name="_redirect" value="https://oseusite.pt/obrigado" />

  <!-- Proteção anti-spam (honeypot) -->
  <input type="text" name="_gotcha" style="display:none" />

  <!-- Campos do formulário -->
  <div>
    <label for="name">Nome completo</label>
    <input type="text" id="name" name="name" required />
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </div>

  <div>
    <label for="phone">Telefone</label>
    <input type="tel" id="phone" name="phone" />
  </div>

  <div>
    <label for="message">Mensagem</label>
    <textarea id="message" name="message" rows="4"></textarea>
  </div>

  <button type="submit">Enviar o meu pedido</button>
</form>

Campos suportados pela API de leads

Eis todos os campos que o Prospect Hub reconhece automaticamente:

Nome do campoTipoDescrição
nametextoNome completo do contacto
emailemailEndereço de email
phonetelNúmero de telefone
messagetextareaMensagem ou comentário
addresstextoMorada
citytextoCidade
postalCodetextoCódigo postal
subjecttextoAssunto (armazenado em formData)

Todos os campos são opcionais exceto name ou email (pelo menos um dos dois é obrigatório para identificar o lead).

Proteção anti-spam integrada

O campo _gotcha é um honeypot invisível: os bots preenchem-no automaticamente, os humanos não o veem. Mas é apenas a primeira linha de defesa. O Prospect Hub aplica na realidade 9 camadas de proteção em cada submissão, incluindo uma análise IA do conteúdo para bloquear o spam que os honeypots não detetam.

Redireção após submissão

O campo _redirect define para onde o utilizador será redirecionado após submeter o formulário. Crie uma página de agradecimento no seu site para confirmar a receção.

<input type="hidden" name="_redirect" value="https://oseusite.pt/obrigado" />

Se não especificar redireção, o utilizador verá uma mensagem de confirmação genérica do Prospect Hub.

Opção 2: JavaScript com fetch API

Para uma experiência de utilizador mais fluida (sem recarregamento de página), utilize JavaScript.

Código completo com async/await

const form = document.getElementById('contact-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const submitBtn = form.querySelector('button[type="submit"]');
  const originalText = submitBtn.textContent;

  // Feedback visual
  submitBtn.disabled = true;
  submitBtn.textContent = 'A enviar...';

  // Recolher os dados
  const formData = new FormData(form);

  // Acrescentar a chave API
  formData.append('_api_key', 'pk_a_sua_chave_aqui');

  try {
    const response = await fetch('https://prospect-hub.app/api/public/leads', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) {
      throw new Error('Erro do servidor');
    }

    const result = await response.json();

    // Sucesso: apresentar confirmação
    form.innerHTML = `
      <div class="success-message">
        <h3>Obrigado pela sua mensagem!</h3>
        <p>Responderemos o mais brevemente possível.</p>
      </div>
    `;

  } catch (error) {
    // Erro: reativar o formulário
    submitBtn.disabled = false;
    submitBtn.textContent = originalText;

    alert('Ocorreu um erro. Por favor tente novamente.');
    console.error('Erro formulário:', error);
  }
});

Vantagens do método JavaScript

Esta abordagem oferece vários benefícios:

Formato de resposta da API

Em caso de sucesso, a API de leads retorna:

{
  "success": true,
  "leadId": "lead_abc123xyz",
  "message": "Lead criado com sucesso"
}

Em caso de erro:

{
  "success": false,
  "error": "Chave API inválida"
}

Campos ocultos úteis

Para além das informações de contacto, pode enriquecer os seus leads com dados de tracking.

Fonte do lead (UTM)

Identifique de onde vem os seus visitantes:

<input type="hidden" name="source" id="utm-source" />

<script>
  // Recuperar o parâmetro UTM do URL
  const urlParams = new URLSearchParams(window.location.search);
  const utmSource = urlParams.get('utm_source') || 'site-web';
  document.getElementById('utm-source').value = utmSource;
</script>

Página de origem

Saber em que página o formulário foi preenchido:

<input type="hidden" name="formData[page]" id="page-origin" />

<script>
  document.getElementById('page-origin').value = window.location.pathname;
</script>

Estas informações aparecerão na ficha do lead, permitindo-lhe analisar que páginas convertem melhor.

Testar a sua integração

Antes de colocar em produção, valide que tudo funciona.

Teste em local

  1. Abra o seu formulário num navegador
  2. Preencha todos os campos com dados de teste
  3. Submeta o formulário
  4. Verifique no Prospect Hub que o lead aparece

Verificações a efetuar

Ferramentas de desenvolvimento

Utilize o separador Rede do seu navegador (F12) para ver o pedido enviado. Devera ver:

Resolução de problemas: erros comuns

Eis os problemas mais frequentes e as suas soluções.

Erro “Chave API inválida”

Causa: A chave pk_xxx está incorreta ou expirada.

Solução: Verifique em Definições > Integrações que a chave está ativa. Copie-a novamente certificando-se de que não há espaço antes ou depois.

Erro “CORS”

Causa: O navegador bloqueia o pedido cross-origin.

Solução: A API do Prospect Hub aceita pedidos de qualquer origem. Se vir este erro, verifique que utiliza https:// (não http://) e que o URL está correto.

Lead criado mas incompleto

Causa: Os nomes dos campos não correspondem.

Solução: Utilize exatamente os nomes listados no quadro de campos suportados. Por exemplo, name (não nom), phone (não telefone).

Formulário não submete

Causa: Erro JavaScript que bloqueia a execução.

Solução: Abra a consola do navegador (F12 > Console) para ver os erros. Corrija-os antes de tentar novamente.

Conclusão: automatize a sua geração de leads

A integração CRM formulário com o Prospect Hub transforma cada visita numa oportunidade rastreável:

  1. Obtenha a sua chave API nas definições
  2. Acrescente o código ao seu formulário (HTML ou JavaScript)
  3. Teste a submissão
  4. Receba os seus leads automaticamente

Sem necessidade de vigiar uma caixa de email, de copiar-colar para uma folha de cálculo, ou de perder prospetos por falta de organização. Cada lead chega diretamente ao seu pipeline, pronto para ser contactado.

Descubra todas as funcionalidades do Prospect Hub para maximizar a sua prospeção, ou consulte os nossos preços simples para escolher a fórmula adequada à sua atividade.

Pronto para ligar o seu formulário? Crie a sua conta gratuita e obtenha a sua chave API em poucos segundos.

A reter:

Tags: formulário integração api html javascript leads
Próximo artigo 5 templates de emails de prospeção que realmente convertem
Voltar ao blog

Pronto para passar à ação?

Crie a sua conta gratuita e comece a organizar a sua prospeção agora. 300 leads incluídos, sem cartão de crédito.

Criar a minha conta gratis Descobrir funcionalidades