Prospect Hub in Ihre Kontaktformulare integrieren: Technischer Leitfaden

Zentralisieren Sie alle Ihre Leads automatisch

Ihre Website generiert Kontaktanfragen. Ihr Formular funktioniert, die E-Mails kommen an… irgendwo. Aber was dann?

Sie muessen die Informationen in eine Tabelle kopieren. Oder schlimmer noch, Sie bearbeiten die Anfragen direkt aus Ihrem Postfach, ohne Nachverfolgung, ohne Verlauf, ohne Organisation.

65% der Web-Leads gehen verloren, weil sie nicht innerhalb von 24 Stunden bearbeitet werden. Das Problem ist nicht das Formular, sondern was danach kommt.

Mit der CRM-Formularintegration von Prospect Hub kommt jede Einsendung direkt in Ihre Pipeline. Kein Kopieren-Einfuegen mehr, keine vergessenen Leads. In diesem technischen Leitfaden zeige ich Ihnen, wie Sie jedes Webformular mit Ihrem Akquise-CRM verbinden — mit wenigen Zeilen Code.

Voraussetzung: Ihren API-Key erhalten

Bevor Sie Ihr Formular aendern, muessen Sie Ihren persoenlichen Lead-API-Key abrufen.

Schritt 1: Auf Integrationen zugreifen

1. Melden Sie sich bei Ihrem Prospect Hub-Konto an
2. Klicken Sie im Menue auf Einstellungen
3. Waehlen Sie den Tab Integrationen

Schritt 2: Einen API-Key erstellen

Auf der Integrationsseite finden Sie den Bereich API-Keys.

1. Klicken Sie auf Neuen Key erstellen
2. Geben Sie ihm einen beschreibenden Namen (z.B.: “Formular Hauptwebsite”)
3. Klicken Sie auf Generieren

Schritt 3: Den Key kopieren

Ihr Key erscheint im Format pk_xxxxxxxxxxxxxxxxxxxxx. Er beginnt immer mit pk_ (fuer public key).

Wichtig: Dieser Key ermoeglicht ausschliesslich das Erstellen von Leads. Er gibt keinen Zugang zu Ihren bestehenden Daten. Sie koennen ihn sicher im clientseitigen Code verwenden.

Halten Sie diesen Key bereit, Sie brauchen ihn fuer die naechsten Schritte.

Option 1: Einfaches HTML-Formular

Das ist die schnellste Methode. Ein klassisches Formular, das die Daten direkt an Prospect Hub sendet.

Vollstaendiger Formular-Code

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

  <!-- Weiterleitung nach Einsendung -->
  <input type="hidden" name="_redirect" value="https://ihreseite.de/danke" />

  <!-- Anti-Spam-Schutz (Honeypot) -->
  <input type="text" name="_gotcha" style="display:none" />

  <!-- Formularfelder -->
  <div>
    <label for="name">Vollstaendiger Name</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">Telefon</label>
    <input type="tel" id="phone" name="phone" />
  </div>

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

  <button type="submit">Anfrage senden</button>
</form>

Von der Lead-API unterstuetzte Felder

Hier alle Felder, die Prospect Hub automatisch erkennt:

Feldname	Typ	Beschreibung
name	Text	Vollstaendiger Name des Kontakts
email	E-Mail	E-Mail-Adresse
phone	Tel	Telefonnummer
message	Textarea	Nachricht oder Kommentar
address	Text	Postadresse
city	Text	Stadt
postalCode	Text	Postleitzahl
subject	Text	Betreff (gespeichert in formData)

Alle Felder sind optional, ausser name oder email (mindestens eines der beiden ist erforderlich, um den Lead zu identifizieren).

Integrierter Anti-Spam-Schutz

Das Feld _gotcha ist ein unsichtbarer Honeypot: Bots fuellen es automatisch aus, Menschen sehen es nicht. Aber das ist nur die erste Verteidigungslinie. Prospect Hub wendet in Wirklichkeit 9 Schutzschichten auf jede Einsendung an, einschliesslich einer KI-Inhaltsanalyse, um Spam zu blockieren, den Honeypots nicht erkennen.

Weiterleitung nach Einsendung

Das Feld _redirect definiert, wohin der Benutzer nach dem Absenden des Formulars weitergeleitet wird. Erstellen Sie eine Dankeseite auf Ihrer Website, um den Empfang zu bestaetigen.

<input type="hidden" name="_redirect" value="https://ihreseite.de/danke" />

Wenn Sie keine Weiterleitung angeben, sieht der Benutzer eine generische Bestaetigungsmeldung von Prospect Hub.

Option 2: JavaScript mit Fetch API

Fuer eine fluesigere Benutzererfahrung (ohne Seitenneuladen) verwenden Sie JavaScript.

Vollstaendiger Code mit 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;

  // Visuelles Feedback
  submitBtn.disabled = true;
  submitBtn.textContent = 'Wird gesendet...';

  // Daten sammeln
  const formData = new FormData(form);

  // API-Key hinzufuegen
  formData.append('_api_key', 'pk_ihr_key_hier');

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

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

    const result = await response.json();

    // Erfolg: Bestaetigung anzeigen
    form.innerHTML = `
      <div class="success-message">
        <h3>Vielen Dank fuer Ihre Nachricht!</h3>
        <p>Wir werden Ihnen schnellstmoeglich antworten.</p>
      </div>
    `;

  } catch (error) {
    // Fehler: Formular wieder aktivieren
    submitBtn.disabled = false;
    submitBtn.textContent = originalText;

    alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
    console.error('Formularfehler:', error);
  }
});

Vorteile der JavaScript-Methode

Dieser Ansatz bietet mehrere Vorteile:

• Kein Neuladen: Der Benutzer bleibt auf derselben Seite
• Echtzeit-Feedback: Button wird waehrend des Sendens deaktiviert
• Fehlerbehandlung: Klare Nachricht bei Problemen
• Analytics: Moeglichkeit, Conversions zu tracken

API-Antwortformat

Bei Erfolg gibt die Lead-API zurueck:

{
  "success": true,
  "leadId": "lead_abc123xyz",
  "message": "Lead erfolgreich erstellt"
}

Bei Fehler:

{
  "success": false,
  "error": "Ungueltiger API-Key"
}

Nuetzliche versteckte Felder

Ueber die Kontaktdaten hinaus koennen Sie Ihre Leads mit Tracking-Daten anreichern.

Lead-Quelle (UTM)

Identifizieren Sie, woher Ihre Besucher kommen:

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

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

Ursprungsseite

Wissen, auf welcher Seite das Formular ausgefuellt wurde:

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

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

Diese Informationen erscheinen in der Lead-Akte und ermoeglichen die Analyse, welche Seiten am besten konvertieren.

Ihre Integration testen

Validieren Sie vor der Produktivsetzung, dass alles funktioniert.

Lokaler Test

1. Oeffnen Sie Ihr Formular im Browser
2. Fuellen Sie alle Felder mit Testdaten aus
3. Senden Sie das Formular ab
4. Pruefen Sie in Prospect Hub, ob der Lead erscheint

Durchzufuehrende Pruefungen

• Der Lead wird korrekt in Ihrer Liste erstellt
• Alle Felder sind richtig ausgefuellt
• Die Weiterleitung funktioniert (wenn verwendet)
• Die Bestaetigungsmeldung wird angezeigt (bei JavaScript)

Fehlerbehebung: Haeufige Fehler

Hier die haeufigsten Probleme und ihre Loesungen.

Fehler “Ungueltiger API-Key”

Ursache: Der Key pk_xxx ist falsch oder abgelaufen.

Loesung: Pruefen Sie in Einstellungen > Integrationen, dass der Key aktiv ist. Kopieren Sie ihn erneut und stellen Sie sicher, dass kein Leerzeichen davor oder danach steht.

Fehler “CORS”

Ursache: Der Browser blockiert die Cross-Origin-Anfrage.

Loesung: Die Prospect Hub API akzeptiert Anfragen von jeder Herkunft. Wenn Sie diesen Fehler sehen, pruefen Sie, dass Sie https:// verwenden (nicht http://) und die URL korrekt ist.

Lead erstellt aber unvollstaendig

Ursache: Die Feldnamen stimmen nicht ueberein.

Loesung: Verwenden Sie genau die in der Feldtabelle aufgelisteten Namen. Zum Beispiel name (nicht nom), phone (nicht telefon).

Fazit: Automatisieren Sie Ihre Lead-Generierung

Die CRM-Formularintegration mit Prospect Hub verwandelt jeden Besuch in eine nachverfolgbare Chance:

1. Erhalten Sie Ihren API-Key in den Einstellungen
2. Fuegen Sie den Code zu Ihrem Formular hinzu (HTML oder JavaScript)
3. Testen Sie die Einsendung
4. Empfangen Sie Ihre Leads automatisch

Kein Postfach mehr ueberwachen, kein Kopieren in Tabellen, keine Interessenten mehr durch mangelnde Organisation verlieren. Jeder Lead kommt direkt in Ihre Pipeline, bereit kontaktiert zu werden.

Entdecken Sie alle Funktionen von Prospect Hub, um Ihre Akquise zu maximieren, oder sehen Sie unsere einfachen Preise, um die passende Formel zu waehlen.

Bereit, Ihr Formular zu verbinden? Erstellen Sie Ihr kostenloses Konto und erhalten Sie Ihren API-Key in wenigen Sekunden.

---

Merken Sie sich:

• Die Lead-API von Prospect Hub akzeptiert Anfragen von jeder Website
• Der Key pk_xxx ist sicher: Er erlaubt ausschliesslich das Erstellen von Leads
• Zwei Methoden: Einfaches HTML (Weiterleitung) oder JavaScript (ohne Neuladen)
• Versteckte Felder ermoeglichen das Tracking von Quelle und Ursprungsseite
• Jede Einsendung durchlaeuft 9 Anti-Spam-Schutzschichten, einschliesslich KI
• Testen Sie immer Ihr CRM-Kontaktformular vor der Produktivsetzung