Tutorial 6 min •

Integrare Prospect Hub ai vostri moduli di contatto: guida tecnica

Collegate i vostri moduli web a Prospect Hub. Ricevete automaticamente i vostri lead dal vostro sito. Guida con esempi di codice HTML e JavaScript.

PH

Team Prospect Hub - Christophe Picciotto

Prospect Hub

Integrare Prospect Hub ai vostri moduli di contatto: guida tecnica

Centralizzate tutti i vostri lead automaticamente

Il vostro sito genera richieste di contatto. Il vostro modulo funziona, le email arrivano… da qualche parte. Ma dopo?

Dovete fare copia-incolla delle informazioni in un foglio di calcolo. O peggio, gestite le richieste direttamente dalla casella email, senza seguito, senza storico, senza organizzazione.

Il 65% dei lead web viene perso per mancanza di gestione entro le 24 ore. Il problema non è il modulo, è ciò che viene dopo.

Con l’integrazione CRM modulo di Prospect Hub, ogni compilazione arriva direttamente nella vostra pipeline. Niente piu copia-incolla, niente piu lead dimenticati. In questa guida tecnica, vi mostro come collegare qualsiasi modulo web al vostro CRM di prospezione — in poche righe di codice.

Prerequisiti: ottenere la vostra chiave API

Prima di modificare il vostro modulo, dovete recuperare la vostra chiave API lead personale.

Fase 1: Accedere alle integrazioni

  1. Connettetevi al vostro account Prospect Hub
  2. Cliccate su Impostazioni nel menu
  3. Selezionate la scheda Integrazioni

Fase 2: Creare una chiave API

Sulla pagina delle integrazioni, troverete la sezione Chiavi API.

  1. Cliccate su Crea una nuova chiave
  2. Datele un nome descrittivo (es: “Modulo sito principale”)
  3. Cliccate su Genera

Fase 3: Copiare la chiave

La vostra chiave appare nel formato pk_xxxxxxxxxxxxxxxxxxxxx. Inizia sempre con pk_ (per public key).

Importante: Questa chiave permette unicamente di creare lead. Non da accesso ai vostri dati esistenti. Potete usarla in tutta sicurezza nel codice lato client.

Tenete questa chiave a portata di mano, ne avrete bisogno per i passaggi successivi.

Opzione 1: Modulo HTML semplice

È il metodo più rapido. Un modulo classico che invia direttamente i dati a Prospect Hub.

Codice completo del modulo

<form
  action="https://prospect-hub.app/api/public/leads"
  method="POST"
>
  <!-- Chiave API (obbligatoria) -->
  <input type="hidden" name="_api_key" value="pk_vostra_chiave_qui" />

  <!-- Reindirizzamento dopo la compilazione -->
  <input type="hidden" name="_redirect" value="https://vostrosito.it/grazie" />

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

  <!-- Campi del modulo -->
  <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">Telefono</label>
    <input type="tel" id="phone" name="phone" />
  </div>

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

  <button type="submit">Invia la mia richiesta</button>
</form>

Campi supportati dall’API lead

Ecco tutti i campi che Prospect Hub riconosce automaticamente:

Nome del campoTipoDescrizione
nametestoNome completo del contatto
emailemailIndirizzo email
phonetelNumero di telefono
messagetextareaMessaggio o commento
addresstestoIndirizzo postale
citytestoCittà
postalCodetestoCodice postale
subjecttestoOggetto (salvato in formData)

Tutti i campi sono opzionali tranne name o email (almeno uno dei due è richiesto per identificare il lead).

Protezione anti-spam integrata

Il campo _gotcha è un honeypot invisibile: i bot lo compilano automaticamente, gli umani non lo vedono. Ma e solo la prima linea di difesa. Prospect Hub applica in realta 9 livelli di protezione su ogni compilazione, tra cui un’analisi IA del contenuto per bloccare lo spam che gli honeypot non rilevano.

Reindirizzamento dopo la compilazione

Il campo _redirect definisce dove l’utente verrà reindirizzato dopo aver compilato il modulo. Create una pagina di ringraziamento sul vostro sito per confermare la ricezione.

<input type="hidden" name="_redirect" value="https://vostrosito.it/grazie" />

Se non specificate un reindirizzamento, l’utente vedra un messaggio di conferma generico di Prospect Hub.

Opzione 2: JavaScript con fetch API

Per un’esperienza utente più fluida (senza ricaricamento della pagina), usate JavaScript.

Codice completo con 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 visivo
  submitBtn.disabled = true;
  submitBtn.textContent = 'Invio in corso...';

  // Raccogliere i dati
  const formData = new FormData(form);

  // Aggiungere la chiave API
  formData.append('_api_key', 'pk_vostra_chiave_qui');

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

    if (!response.ok) {
      throw new Error('Errore server');
    }

    const result = await response.json();

    // Successo: mostrare conferma
    form.innerHTML = `
      <div class="success-message">
        <h3>Grazie per il vostro messaggio!</h3>
        <p>Vi risponderemo al piu presto.</p>
      </div>
    `;

  } catch (error) {
    // Errore: riattivare il modulo
    submitBtn.disabled = false;
    submitBtn.textContent = originalText;

    alert('Si è verificato un errore. Riprovate.');
    console.error('Errore modulo:', error);
  }
});

Vantaggi del metodo JavaScript

Questo approccio offre diversi benefici:

Formato di risposta dell’API

In caso di successo, l’API lead restituisce:

{
  "success": true,
  "leadId": "lead_abc123xyz",
  "message": "Lead creato con successo"
}

In caso di errore:

{
  "success": false,
  "error": "Chiave API non valida"
}

Campi nascosti utili

Oltre alle informazioni di contatto, potete arricchire i vostri lead con dati di tracking.

Sorgente del lead (UTM)

Identificate da dove vengono i vostri visitatori:

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

<script>
  // Recuperare il parametro UTM dall'URL
  const urlParams = new URLSearchParams(window.location.search);
  const utmSource = urlParams.get('utm_source') || 'sito-web';
  document.getElementById('utm-source').value = utmSource;
</script>

Pagina di origine

Sapere su quale pagina il modulo è stato compilato:

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

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

Queste informazioni appariranno nella scheda del lead, permettendovi di analizzare quali pagine convertono meglio.

Testare la vostra integrazione

Prima di mettere in produzione, verificate che tutto funzioni.

Test in locale

  1. Aprite il vostro modulo in un browser
  2. Compilate tutti i campi con dati di test
  3. Inviate il modulo
  4. Verificate in Prospect Hub che il lead appaia

Verifiche da fare

Strumenti di sviluppo

Utilizzate la scheda Rete del vostro browser (F12) per vedere la richiesta inviata. Dovreste vedere:

Risoluzione problemi: errori comuni

Ecco i problemi più frequenti e le loro soluzioni.

Errore “Chiave API non valida”

Causa: La chiave pk_xxx è errata o scaduta.

Soluzione: Verificate in Impostazioni > Integrazioni che la chiave sia attiva. Copiatela nuovamente assicurandovi di non avere spazi prima o dopo.

Errore “CORS”

Causa: Il browser blocca la richiesta cross-origin.

Soluzione: L’API Prospect Hub accetta richieste da qualsiasi origine. Se vedete questo errore, verificate di usare https:// (non http://) e che l’URL sia corretta.

Lead creato ma incompleto

Causa: I nomi dei campi non corrispondono.

Soluzione: Usate esattamente i nomi elencati nella tabella dei campi supportati. Ad esempio, name (non nome), phone (non telefono).

Il modulo non si invia

Causa: Errore JavaScript che blocca l’esecuzione.

Soluzione: Aprite la console del browser (F12 > Console) per vedere gli errori. Correggeteli prima di riprovare.

Conclusione: automatizzate la vostra generazione di lead

L’integrazione CRM modulo con Prospect Hub trasforma ogni visita in un’opportunita tracciabile:

  1. Ottenete la vostra chiave API nelle impostazioni
  2. Aggiungete il codice al vostro modulo (HTML o JavaScript)
  3. Testate la compilazione
  4. Ricevete i vostri lead automaticamente

Niente più casella email da sorvegliare, niente più copia-incolla in un foglio di calcolo, niente più prospect persi per mancanza di organizzazione. Ogni lead arriva direttamente nella vostra pipeline, pronto per essere contattato.

Scoprite tutte le funzionalità di Prospect Hub per massimizzare la vostra prospezione, oppure consultate i nostri prezzi semplici per scegliere la formula adatta alla vostra attività.

Pronti a collegare il vostro modulo? Create il vostro account gratuito e ottenete la vostra chiave API in pochi secondi.

Da ricordare:

Tag: modulo integrazione api html javascript lead
Articolo successivo 5 template di email di prospezione che convertono davvero
Torna al blog

Pronto a passare all'azione?

Crea il tuo account gratuito e inizia a organizzare la tua prospezione ora. 300 lead inclusi, nessuna carta di credito richiesta.

Crea il mio account gratuito Scopri le funzionalita