Wie verbindet man ein Website-Formular mit CRM und E-Mail?

Warum reicht ein Posteingang allein nicht aus?

Das häufigste Problem besteht nicht darin, dass das Formular auf der Website nicht funktioniert. Das Problem beginnt kurz danach: Der Lead landet im Posteingang, jemand kopiert die Daten manuell ins CRM, das Marketing sieht die Kontaktquelle nicht, der Vertrieb antwortet verzögert, und in der Zwischenzeit gehen einige Informationen verloren oder landen bei der falschen Person.

Eine korrekte Integration eines Website-Formulars mit CRM und E-Mail sollte drei Dinge gleichzeitig leisten. Erstens sollte sie den Kontakt im CRM mit Feldmapping und Lead-Quelle speichern. Zweitens sollte sie eine Bestätigungs-E-Mail oder eine Benachrichtigung für das Team auslösen. Drittens sollte sie eine technische Spur hinterlassen: Log, Status und die Möglichkeit zu prüfen, was passiert ist, falls etwas schiefgeht.

Wie sollte ein korrekter Datenfluss aussehen?

Es ist nicht empfehlenswert, das Frontend direkt mit dem CRM zu verbinden, da dabei Geschäftslogik, Feldumfang und Tokens leicht offengelegt werden können. Ein besseres Muster ist ein eigenes Backend oder ein Integrationsendpunkt, der die Daten entgegennimmt, die Einwilligung prüft, die Felder mappt und erst dann die CRM API sowie E-Mail aufruft.

Was tatsächlich konzipiert werden muss, ist eine Datenlandkarte. Welche Felder sind verpflichtend? Welche gehen in den Kontakt, welche in den Lead oder die Verkaufschance und welche nur in eine Notiz? Ohne Festlegung der Quelle der Wahrheit kann die Integration das Chaos lediglich beschleunigen.

Was sollte zwischen Formular und CRM gemappt werden?

Integration über Webhook

Ein Webhook ist am besten geeignet, wenn das Formular oder ein zwischengeschaltetes Tool unmittelbar nach dem Submit ein HTTP-Ereignis senden kann. Das funktioniert gut bei Formularen wie: Demo vereinbaren, Angebot anfordern, wir rufen Sie zurück oder Material herunterladen.

Der Webhook sollte an Ihren Endpoint oder an eine Automatisierungsplattform gehen, nicht unkontrolliert direkt an das CRM. Dadurch lassen sich Validierung, Deduplizierung, Feldmapping und Fehlerbehandlung durchführen. Livespace beschreibt Webhooks als Methode zur Übermittlung von Ereignissen in Echtzeit an externe Systeme, während Zapier und Make häufig eingesetzte Tools für den Empfang solcher Ereignisse sind.

Integration über REST API

REST API ist die beste Wahl, wenn Sie vollständige Kontrolle darüber haben möchten, was im CRM ankommt. Sie können zunächst prüfen, ob der Kontakt bereits existiert, eigene Eigenschaften hinzufügen, einen Verantwortlichen zuweisen, eine Notiz, eine separate Verkaufschance oder eine Follow-up-Aufgabe erstellen.

HubSpot dokumentiert die Erstellung von Kontakten im CRM über API sowie die Authentifizierung über OAuth oder private App-Token. Pipedrive stellt eine API für Kontakte, Leads, Deals und Aktivitäten bereit. Ein eigener Endpoint hat noch einen weiteren Vorteil: Wenn Sie in sechs Monaten das CRM wechseln, kann das Formular weiterhin denselben JSON senden, und Sie ändern nur den Adapter auf Backend-Seite.

Integration über Make oder Zapier

Wenn Ihnen ein schnelles MVP ohne viel Code wichtig ist, sind Make oder Zapier ein sinnvoller Weg. Zapier kommuniziert Integrationen mit Tausenden von Anwendungen, und Make verfügt über ein umfangreiches Ökosystem aus fertigen Modulen, Webhooks und Szenarien. Bei gängigen CRMs lässt sich ein Ablauf Formular -> CRM -> E-Mail -> Slack innerhalb von Stunden oder Tagen aufbauen.

No-Code hat jedoch Grenzen. Die Ausführungshistorie, Queues, Retry-Mechanismen, Verzögerungen, Webhook-Limits und Operationskosten müssen überwacht werden. Zapier dokumentiert Throttling sowie den Status 429 bei Überschreitung von Webhook-Limits, und Make zeigt die Handhabung von Webhooks, Queues und Logs. Für kritische Prozesse ist ein Monitoring außerhalb der Plattform selbst empfehlenswert.

E-Mail-Versand über SMTP oder SMTP-Relay

Eine E-Mail nach dem Absenden eines Formulars umfasst in der Regel zwei Szenarien. Das erste ist eine transaktionale Nachricht: Vielen Dank, wir melden uns. Das zweite ist Marketingkommunikation, z. B. ein Newsletter. Diese beiden Dinge sollten weder rechtlich noch technisch vermischt werden.

SMTP ist weiterhin ein guter Standard, in der Produktion ist es jedoch besser, ein Relay oder einen Anbieter für transaktionale E-Mails zu verwenden als ein gewöhnliches privates Konto. Google Workspace empfiehlt SMTP-Relay für Anwendungen und Geräte, und Nodemailer beschreibt SMTP als universellen Transport, der einen Anbieterwechsel durch eine Konfigurationsänderung ermöglicht.

<p>Dziękujemy za wiadomość.</p>
<p>Otrzymaliśmy Twoje zgłoszenie i wrócimy z odpowiedzią w ciągu 1 dnia roboczego.</p>
<p>Jeśli sprawa jest pilna, odpowiedz na tę wiadomość.</p>
<p>Pozdrawiamy,<br>Zespół SmartCodeIT</p>

Beispiel einer Integration in JavaScript und Node.js

Das folgende Beispiel zeigt ein Architekturpattern und keinen fertigen Code, der ohne Anpassung eingefügt werden kann. Das Frontend sendet die Daten an einen eigenen Endpoint, und das Backend erstellt einen Kontakt in HubSpot und versendet eine Bestätigungs-E-Mail über SMTP.

const form = document.querySelector("#lead-form");

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const payload = Object.fromEntries(new FormData(form).entries());

  const response = await fetch("/api/lead", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload)
  });

  if (response.ok) {
    form.reset();
    alert("Dziękujemy! Otrzymaliśmy Twoje zgłoszenie.");
  } else {
    alert("Nie udało się wysłać formularza.");
  }
});

import express from "express";
import nodemailer from "nodemailer";

const app = express();
app.use(express.json());

app.post("/api/lead", async (req, res) => {
  const email = String(req.body.email || "").trim();
  const consent = req.body.consent === true || req.body.consent === "on";

  if (!email || !consent) {
    return res.status(400).json({ error: "Brakuje e-maila lub wymaganej zgody." });
  }

  const crmResponse = await fetch("https://api.hubapi.com/crm/v3/objects/contacts", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.HUBSPOT_TOKEN}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      properties: {
        email,
        firstname: String(req.body.firstname || "").trim(),
        lastname: String(req.body.lastname || "").trim(),
        lead_source_detail: "formularz-strony"
      }
    })
  });

  if (!crmResponse.ok) {
    return res.status(502).json({ error: "CRM odrzucił zgłoszenie." });
  }

  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: Number(process.env.SMTP_PORT || 587),
    secure: false,
    auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS }
  });

  await transporter.sendMail({
    from: process.env.MAIL_FROM,
    to: email,
    subject: "Dziękujemy za kontakt",
    html: "<p>Dziękujemy za wiadomość. Wrócimy z odpowiedzią w ciągu 1 dnia roboczego.</p>"
  });

  return res.status(201).json({ ok: true });
});

Beispiel einer Integration in PHP

In PHP lässt sich ein ähnliches Pattern mit cURL und PHPMailer umsetzen. PHPMailer unterstützt SMTP sowie UTF-8, was bei deutschen Sonderzeichen in Formularen und Nachrichten relevant ist.

<?php
require __DIR__ . '/vendor/autoload.php';

use PHPMailer\PHPMailer\PHPMailer;

$email = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);
$consent = isset($_POST['consent']);

if (!$email || !$consent) {
    http_response_code(400);
    echo json_encode(['error' => 'Brakuje e-maila lub wymaganej zgody.']);
    exit;
}

$payload = [
    'properties' => [
        'email' => $email,
        'firstname' => trim($_POST['firstname'] ?? ''),
        'lastname' => trim($_POST['lastname'] ?? ''),
        'lead_source_detail' => 'formularz-strony'
    ]
];

$ch = curl_init('https://api.hubapi.com/crm/v3/objects/contacts');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => [
        'Authorization: Bearer ' . getenv('HUBSPOT_TOKEN'),
        'Content-Type: application/json'
    ],
    CURLOPT_POSTFIELDS => json_encode($payload, JSON_UNESCAPED_UNICODE)
]);

$crmBody = curl_exec($ch);
$crmStatus = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

if ($crmStatus < 200 || $crmStatus >= 300) {
    http_response_code(502);
    echo json_encode(['error' => 'CRM odrzucił zgłoszenie.']);
    exit;
}

$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = getenv('SMTP_HOST');
$mail->Port = (int) (getenv('SMTP_PORT') ?: 587);
$mail->SMTPAuth = true;
$mail->Username = getenv('SMTP_USER');
$mail->Password = getenv('SMTP_PASS');
$mail->CharSet = 'UTF-8';
$mail->setFrom(getenv('MAIL_FROM'), 'SmartCodeIT');
$mail->addAddress($email);
$mail->Subject = 'Dziękujemy za kontakt';
$mail->Body = 'Dziękujemy za wiadomość. Wrócimy z odpowiedzią w ciągu 1 dnia roboczego.';
$mail->send();

http_response_code(201);
echo json_encode(['ok' => true]);

Form-to-CRM-Plugins für WordPress

Wenn die Website auf WordPress läuft, muss nicht immer mit eigenem Code begonnen werden. Contact Form 7 eignet sich gut für begrenzte Budgets und Custom Code, Gravity Forms für Agentur-Implementierungen und professionelle Integrationen, WPForms für eine komfortable Marketing-Bedienung und Fluent Forms als starker Kompromiss zwischen Funktionen und Preis.

Plugins sollten gewählt werden, wenn die Priorität auf schneller Implementierung und Wartung durch das Marketing liegt. Eigenen Code sollten Sie wählen, wenn Sie mehrere Formulare, individuelle Logik, eigene Statuswerte oder den Bedarf einer Migration zwischen CRM-Systemen haben.

Sicherheit, DSGVO, Tests und Monitoring

Die DSGVO verlangt nicht nur eine Rechtsgrundlage, sondern auch Transparenz, Datenminimierung, Sicherheit und Rechenschaftspflicht. Das Formular sollte nur die Felder erfassen, die für den ersten Kontakt erforderlich sind, operative Kommunikation von Marketingkommunikation trennen und den Nachweis der Einwilligung dort speichern, wo die Einwilligung die Grundlage der Verarbeitung ist.

In der Praxis müssen Validierung, CRM-Antworten, 4xx- und 5xx-Fehler, Retry-Mechanismen, Duplikate, E-Mail-Zustellbarkeit und das Monitoring von Szenarien getestet werden. Wenn ein Webhook oder eine API 429 zurückgibt, sollte die Integration über Retry mit Backoff verfügen und den Lead nicht stillschweigend verlieren.

• CRM- und SMTP-Token ausschließlich serverseitig aufbewahren
• submission_id, timestamp, source_url und Integrationsstatus speichern
• vollständige Payloads mit personenbezogenen Daten nicht ohne Bedarf protokollieren
• Bestätigungs-E-Mail vom Marketing-Newsletter trennen
• Alerts bei CRM-, SMTP- und Webhook-Fehlern sowie bei Überschreitung von Limits hinzufügen
• Deduplizierung anhand von E-Mail, external_id oder Telefonnummer prüfen

Zusammenfassung

Wenn Sie eine schnelle Lösung wünschen, wählen Sie ein Formular mit Webhook und ein Szenario in Make oder Zapier. Wenn Sie vollständige Kontrolle wünschen, sind ein eigener Backend und die REST API des CRM besser geeignet. Wenn Sie mit WordPress arbeiten und die Implementierung verkürzen möchten, verwenden Sie ein gutes Formular-Plugin mit Webhook oder CRM-Integration.

Unabhängig vom gewählten Weg bleiben drei Grundsätze konstant: das Backend als Zwischenschicht, ein separater Mechanismus für transaktionale E-Mails und Monitoring des gesamten Datenflusses. SmartCodeIT kann ein solches MVP konzipieren, Formulare mit CRM und E-Mail verbinden sowie Conversion-Analytik ergänzen, damit Leads nicht zwischen den Tools verloren gehen.