Ihr Website-Formular mit Cold Leads verbinden: HTML, WordPress und Webflow

Bevor Sie beginnen

1. Erstellen Sie unter Einstellungen → API-Schlüssel einen Website-Schlüssel (lk_…) und tragen Sie als erlaubte Website die Adresse Ihrer Website ein, zum Beispiel https://www.example.com.
2. Wählen Sie die Standardphase, Tags und Liste des Schlüssels. Tags, die Sie mit dem Formular senden, werden zu den Tags des Schlüssels hinzugefügt.
3. Merken Sie sich die Feldnamen, die der Endpunkt liest: email (Pflicht), name, company, phone, message, tag, stage (nur lead wird akzeptiert), redirect und das Honeypot-Feld website.

Reines HTML

Richten Sie die action des Formulars auf den Endpunkt und legen Sie den Schlüssel in ein verstecktes Feld. Die Feldnamen müssen der Liste oben entsprechen.

<form action="https://coldleads.app/api/hooks/lead" method="POST">
  <input type="hidden" name="_key" value="lk_your_website_key">
  <input type="hidden" name="redirect" value="https://www.example.com/thanks">
  <input type="hidden" name="tag" value="contact-page">
  <label>E-mail <input name="email" type="email" required></label>
  <label>Name <input name="name"></label>
  <label>Company <input name="company"></label>
  <label>Phone <input name="phone"></label>
  <label>Message <textarea name="message"></textarea></label>
  <input name="website" tabindex="-1" autocomplete="off" style="display:none">
  <button type="submit">Send</button>
</form>

WordPress: WPForms

WPForms sendet Webhooks mit seinem Webhooks Addon, für das eine WPForms-Elite-Lizenz nötig ist.

1. Installieren und aktivieren Sie das Webhooks Addon (WPForms → Addons).
2. Öffnen Sie Ihr Formular im Builder, gehen Sie zu Settings → Webhooks und aktivieren Sie Enable Webhooks.
3. Setzen Sie Request URL auf https://coldleads.app/api/hooks/lead, Request Method auf POST und Request Format auf JSON.
4. Fügen Sie unter Request Headers x-api-key mit Ihrem Website-Schlüssel hinzu.
5. Ordnen Sie unter Request Body email, name, company, phone und message Ihren Formularfeldern zu und fügen Sie tag mit einem festen Wert wie wpforms hinzu.
6. Speichern Sie und senden Sie das Formular einmal mit Ihrer eigenen Adresse ab; der Kontakt erscheint in Cold Leads.

WordPress: Contact Form 7

Contact Form 7 hat keine Webhook-Einstellung, löst aber nach dem Versand seiner E-Mail eine WordPress-Action aus. Speichern Sie diesen Code als wp-content/mu-plugins/coldleads-cf7.php (ein Must-Use-Plugin) und passen Sie die Feldnamen an, falls Ihr Formular nicht die Standardnamen your-email, your-name und your-message verwendet.

<?php
// Sends every Contact Form 7 submission to Cold Leads.
add_action('wpcf7_mail_sent', function ($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    if (!$submission) {
        return;
    }
    $data = $submission->get_posted_data();
    wp_remote_post('https://coldleads.app/api/hooks/lead', [
        'timeout' => 10,
        'headers' => [
            'Content-Type' => 'application/json',
            'x-api-key'    => 'lk_your_website_key',
        ],
        'body' => wp_json_encode([
            'email'   => $data['your-email'] ?? '',
            'name'    => $data['your-name'] ?? '',
            'message' => $data['your-message'] ?? '',
            'tag'     => 'cf7',
        ]),
    ]);
});

infoDer Besucher sieht weiterhin die eigene Erfolgsmeldung von Contact Form 7, und Sie erhalten weiterhin dessen E-Mail; Cold Leads bekommt eine Kopie der Einsendung.

Webflow

Der eigene Formular-Webhook von Webflow sendet die Felder verschachtelt unter payload.data, was der Lead-Endpunkt nicht liest. Verwenden Sie stattdessen eine benutzerdefinierte Formular-Aktion.

1. Wählen Sie im Designer den Form Block aus und öffnen Sie seine Einstellungen.
2. Setzen Sie Action auf https://coldleads.app/api/hooks/lead?key=lk_your_website_key und Method auf POST.
3. Geben Sie jedem Feld den Namen, den der Endpunkt erwartet (email, name, company, phone, message).
4. Fügen Sie innerhalb des Formulars ein Embed-Element mit versteckten Feldern ein: <input type="hidden" name="redirect" value="https://www.example.com/thanks"> und <input type="hidden" name="tag" value="webflow">.
5. Veröffentlichen und testen Sie. Mit einer benutzerdefinierten Aktion zeigt Webflow keine eigene Erfolgsmeldung an und speichert die Einsendung nicht in Webflow, daher bringt das Feld redirect den Besucher zurück auf Ihre Website.

FAQ