Tutorial 6 min •

Prospect Hub integreren met uw contactformulieren: technische handleiding

Verbind uw webformulieren met Prospect Hub. Ontvang automatisch uw leads vanuit uw website. Handleiding met HTML- en JavaScript-codevoorbeelden.

PH

Team Prospect Hub - Christophe Picciotto

Prospect Hub

Prospect Hub integreren met uw contactformulieren: technische handleiding

Centraliseer al uw leads automatisch

Uw site genereert contactaanvragen. Uw formulier werkt, de e-mails komen binnen… ergens. Maar wat dan?

U moet de informatie kopiëren en plakken in een spreadsheet. Of erger: u verwerkt de aanvragen rechtstreeks vanuit uw mailbox, zonder opvolging, zonder geschiedenis, zonder organisatie.

65% van de webleads gaat verloren door het niet verwerken binnen 24 uur. Het probleem is niet het formulier, maar wat erna komt.

Met de CRM-formulierintegratie van Prospect Hub komt elke inzending direct in uw pipeline terecht. Geen kopieer-plakwerk meer, geen vergeten leads meer. In deze technische handleiding laat ik u zien hoe u elk webformulier verbindt met uw prospectie-CRM — in slechts enkele regels code.

Vereisten: uw API-sleutel verkrijgen

Voordat u uw formulier aanpast, moet u uw persoonlijke leads-API-sleutel ophalen.

Stap 1: Toegang tot de integraties

  1. Log in op uw Prospect Hub-account
  2. Klik op Instellingen in het menu
  3. Selecteer het tabblad Integraties

Stap 2: Een API-sleutel aanmaken

Op de integratiepagina vindt u de sectie API-sleutels.

  1. Klik op Nieuwe sleutel aanmaken
  2. Geef het een beschrijvende naam (bijv. “Formulier hoofdsite”)
  3. Klik op Genereren

Stap 3: De sleutel kopiëren

Uw sleutel verschijnt in het formaat pk_xxxxxxxxxxxxxxxxxxxxx. Het begint altijd met pk_ (voor public key).

Belangrijk: Deze sleutel maakt het alleen mogelijk om leads te aanmaken. Het geeft geen toegang tot uw bestaande gegevens. U kunt het veilig gebruiken in client-side code.

Houd deze sleutel bij de hand, u hebt hem nodig voor de volgende stappen.

Optie 1: Eenvoudig HTML-formulier

Dit is de snelste methode. Een klassiek formulier dat de gegevens rechtstreeks naar Prospect Hub stuurt.

Volledige formuliercode

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

  <!-- Omleiding na inzending -->
  <input type="hidden" name="_redirect" value="https://uwsite.nl/bedankt" />

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

  <!-- Formuliervelden -->
  <div>
    <label for="name">Volledige naam</label>
    <input type="text" id="name" name="name" required />
  </div>

  <div>
    <label for="email">E-mail</label>
    <input type="email" id="email" name="email" required />
  </div>

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

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

  <button type="submit">Mijn aanvraag versturen</button>
</form>

Door de leads-API ondersteunde velden

Hier zijn alle velden die Prospect Hub automatisch herkent:

VeldnaamTypeBeschrijving
nametekstVolledige naam van het contact
emaile-mailE-mailadres
phonetelTelefoonnummer
messagetextareaBericht of opmerking
addresstekstPostadres
citytekstStad
postalCodetekstPostcode
subjecttekstOnderwerp (opgeslagen in formData)

Alle velden zijn optioneel behalve name of email (minstens een van beide is vereist om de lead te identificeren).

Ingebouwde anti-spambescherming

Het veld _gotcha is een onzichtbare honeypot: bots vullen het automatisch in, mensen zien het niet. Maar dit is slechts de eerste verdedigingslinie. Prospect Hub past in werkelijkheid 9 beschermingslagen toe op elke inzending, waaronder een AI-inhoudsanalyse om spam te blokkeren die honeypots niet detecteren.

Omleiding na inzending

Het veld _redirect bepaalt waarheen de gebruiker wordt omgeleid na het indienen van het formulier. Maak een bedankpagina op uw site om de ontvangst te bevestigen.

<input type="hidden" name="_redirect" value="https://uwsite.nl/bedankt" />

Als u geen omleiding opgeeft, ziet de gebruiker een generiek bevestigingsbericht van Prospect Hub.

Optie 2: JavaScript met fetch API

Voor een vloeiendere gebruikerservaring (zonder pagina opnieuw te laden), gebruik JavaScript.

Volledige code met 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;

  // Visuele feedback
  submitBtn.disabled = true;
  submitBtn.textContent = 'Bezig met verzenden...';

  // Gegevens verzamelen
  const formData = new FormData(form);

  // API-sleutel toevoegen
  formData.append('_api_key', 'pk_uw_sleutel_hier');

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

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

    const result = await response.json();

    // Succes: bevestiging tonen
    form.innerHTML = `
      <div class="success-message">
        <h3>Bedankt voor uw bericht!</h3>
        <p>We nemen zo snel mogelijk contact met u op.</p>
      </div>
    `;

  } catch (error) {
    // Fout: formulier opnieuw activeren
    submitBtn.disabled = false;
    submitBtn.textContent = originalText;

    alert('Er is een fout opgetreden. Probeer het opnieuw.');
    console.error('Formulierfout:', error);
  }
});

Voordelen van de JavaScript-methode

Deze aanpak biedt meerdere voordelen:

API-antwoordformaat

Bij succes retourneert de leads-API:

{
  "success": true,
  "leadId": "lead_abc123xyz",
  "message": "Lead succesvol aangemaakt"
}

Bij een fout:

{
  "success": false,
  "error": "Ongeldige API-sleutel"
}

Nuttige verborgen velden

Naast de contactgegevens kunt u uw leads verrijken met trackingdata.

Leadbron (UTM)

Identificeer waar uw bezoekers vandaan komen:

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

<script>
  // UTM-parameter ophalen uit de URL
  const urlParams = new URLSearchParams(window.location.search);
  const utmSource = urlParams.get('utm_source') || 'website';
  document.getElementById('utm-source').value = utmSource;
</script>

Bronpagina

Weten op welke pagina het formulier is ingevuld:

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

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

Deze informatie verschijnt in de leadfiche, waardoor u kunt analyseren welke pagina’s het best converteren.

Uw integratie testen

Valideer dat alles werkt voordat u in productie gaat.

Lokaal testen

  1. Open uw formulier in een browser
  2. Vul alle velden in met testgegevens
  3. Dien het formulier in
  4. Controleer in Prospect Hub of de lead verschijnt

Te doen controles

Ontwikkelaarstools

Gebruik het tabblad Netwerk van uw browser (F12) om het verzonden verzoek te bekijken. U zou moeten zien:

Probleemoplossing: veelvoorkomende fouten

Hier zijn de meest voorkomende problemen en hun oplossingen.

Fout “Ongeldige API-sleutel”

Oorzaak: De sleutel pk_xxx is onjuist of verlopen.

Oplossing: Controleer in Instellingen > Integraties of de sleutel actief is. Kopieer hem opnieuw en zorg ervoor dat er geen spatie voor of na staat.

Fout “CORS”

Oorzaak: De browser blokkeert het cross-origin verzoek.

Oplossing: De Prospect Hub API accepteert verzoeken van elke oorsprong. Als u deze fout ziet, controleer dan of u https:// gebruikt (niet http://) en of de URL correct is.

Lead aangemaakt maar onvolledig

Oorzaak: De veldnamen komen niet overeen.

Oplossing: Gebruik precies de namen die in de tabel met ondersteunde velden staan. Bijvoorbeeld name (niet naam), phone (niet telefoon).

Formulier wordt niet ingediend

Oorzaak: JavaScript-fout die de uitvoering blokkeert.

Oplossing: Open de browserconsole (F12 > Console) om de fouten te bekijken. Corrigeer ze voordat u opnieuw probeert.

Conclusie: automatiseer uw leadgeneratie

De CRM-formulierintegratie met Prospect Hub transformeert elk bezoek in een traceerbare kans:

  1. Verkrijg uw API-sleutel in de instellingen
  2. Voeg de code toe aan uw formulier (HTML of JavaScript)
  3. Test de inzending
  4. Ontvang uw leads automatisch

U hoeft geen mailbox meer in de gaten te houden, niet meer te kopiëren en plakken in een spreadsheet, of prospects te verliezen door gebrek aan organisatie. Elke lead komt direct in uw pipeline terecht, klaar om gecontacteerd te worden.

Ontdek alle functionaliteiten van Prospect Hub om uw prospectie te maximaliseren, of raadpleeg onze eenvoudige tarieven om de formule te kiezen die bij uw activiteit past.

Klaar om uw formulier te verbinden? Maak uw gratis account aan en verkrijg uw API-sleutel in enkele seconden.

Onthoud:

Tags: formulier integratie api html javascript leads
Volgend artikel 5 prospectie-e-mailtemplates die echt converteren
Terug naar blog

Klaar om in actie te komen?

Maak gratis uw account aan en begin nu met het organiseren van uw prospectie. 300 leads inbegrepen, geen creditcard vereist.

Gratis account aanmaken Functies ontdekken