Jak połączyć formularz ze strony z CRM i e-mailem?

Dlaczego sama skrzynka odbiorcza to za mało?

Najczęstszy problem nie polega na tym, że formularz na stronie nie działa. Problem zaczyna się chwilę później: lead wpada do skrzynki, ktoś ręcznie przekleja dane do CRM, marketing nie widzi źródła kontaktu, handlowiec odpowiada z opóźnieniem, a w międzyczasie część informacji znika albo trafia do złej osoby.

Poprawna integracja formularza ze strony z CRM i e-mailem powinna robić trzy rzeczy jednocześnie. Po pierwsze, zapisywać kontakt w CRM z mapowaniem pól i źródłem leada. Po drugie, uruchamiać potwierdzenie e-mail albo powiadomienie dla zespołu. Po trzecie, zostawiać ślad techniczny: log, status i możliwość sprawdzenia, co się wydarzyło, jeśli coś pójdzie nie tak.

Jak powinien wyglądać poprawny przepływ danych?

Nie warto łączyć frontendu bezpośrednio z CRM, bo wtedy łatwo ujawnić logikę biznesową, zakres pól i tokeny. Lepszy wzorzec to własny backend lub endpoint integracyjny, który przyjmuje dane, sprawdza zgodę, mapuje pola i dopiero wtedy wywołuje API CRM oraz e-mail.

To, co naprawdę trzeba zaprojektować, to mapa danych. Które pola są obowiązkowe? Które idą do kontaktu, które do leada lub szansy sprzedaży, a które tylko do notatki? Bez ustalenia źródła prawdy integracja może tylko przyspieszyć chaos.

Co mapować między formularzem a CRM?

Integracja przez webhook

Webhook jest najlepszy, gdy formularz lub narzędzie pośrednie potrafi wysłać zdarzenie HTTP natychmiast po submitcie. Dobrze działa przy formularzach typu: umów demo, poproś o ofertę, oddzwonimy do Ciebie albo pobierz materiał.

Webhook powinien trafiać do Twojego endpointu albo platformy automatyzacji, a nie bezpośrednio do CRM bez kontroli. Dzięki temu można wykonać walidację, deduplikację, mapowanie pól i obsługę błędów. Livespace opisuje webhooki jako sposób przekazywania zdarzeń w czasie rzeczywistym do zewnętrznych systemów, a Zapier i Make są częstymi narzędziami odbioru takich zdarzeń.

Integracja przez REST API

REST API jest najlepszym wyborem, gdy chcesz mieć pełną kontrolę nad tym, co trafia do CRM. Możesz najpierw sprawdzić, czy kontakt już istnieje, dodać własne właściwości, przypisać właściciela, utworzyć notatkę, osobną szansę sprzedaży albo zadanie follow-up.

HubSpot dokumentuje tworzenie kontaktów w CRM przez API i uwierzytelnianie przez OAuth lub prywatne tokeny aplikacji. Pipedrive udostępnia API dla kontaktów, leadów, dealów i aktywności. Własny endpoint ma jeszcze jedną przewagę: jeśli za pół roku zmienisz CRM, formularz dalej może wysyłać ten sam JSON, a zmieniasz tylko adapter po stronie backendu.

Integracja przez Make lub Zapier

Jeżeli zależy Ci na szybkim MVP bez dużej ilości kodu, Make albo Zapier są sensowną ścieżką. Zapier komunikuje integracje z tysiącami aplikacji, a Make ma rozbudowany ekosystem gotowych modułów, webhooków i scenariuszy. Przy popularnych CRM-ach można zbudować przepływ formularz -> CRM -> e-mail -> Slack w godzinach lub dniach.

No-code ma jednak limity. Trzeba pilnować historii uruchomień, kolejek, retry, opóźnień, limitów webhooków i kosztów operacji. Zapier dokumentuje throttling oraz status 429 przy przekroczeniu limitów webhooków, a Make pokazuje obsługę webhooks, kolejek i logów. Dla procesów krytycznych warto mieć monitoring poza samą platformą.

Wysyłka e-maili przez SMTP lub SMTP relay

E-mail po formularzu to zwykle dwa scenariusze. Pierwszy to wiadomość transakcyjna: dziękujemy, odezwiemy się. Drugi to komunikacja marketingowa, np. newsletter. Tych dwóch rzeczy nie warto mieszać ani prawnie, ani technicznie.

SMTP nadal jest dobrym standardem, ale w produkcji lepiej używać relay lub dostawcy e-maili transakcyjnych niż zwykłego konta prywatnego. Google Workspace rekomenduje SMTP relay dla aplikacji i urządzeń, a Nodemailer wskazuje SMTP jako uniwersalny transport, który pozwala zmienić dostawcę przez zmianę konfiguracji.

<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>

Przykład integracji w JavaScript i Node.js

Poniższy przykład pokazuje wzorzec architektoniczny, a nie gotowy kod do wklejenia bez dostosowania. Frontend wysyła dane do własnego endpointu, a backend tworzy kontakt w HubSpot i wysyła e-mail potwierdzający przez 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 });
});

Przykład integracji w PHP

W PHP podobny wzorzec można zbudować na cURL i PHPMailer. PHPMailer wspiera SMTP oraz UTF-8, co ma znaczenie przy polskich znakach w formularzach i wiadomościach.

<?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]);

Wtyczki form-to-CRM dla WordPressa

Jeżeli strona działa na WordPressie, nie zawsze trzeba zaczynać od własnego kodu. Contact Form 7 jest dobry dla budżetu i custom code, Gravity Forms dla wdrożeń agencyjnych i integracji profesjonalnych, WPForms dla wygodnej obsługi marketingowej, a Fluent Forms jako mocny kompromis funkcje/cena.

Wtyczki wybieraj wtedy, gdy priorytetem jest czas wdrożenia i utrzymanie przez marketing. Kod własny wybieraj wtedy, gdy masz kilka formularzy, niestandardową logikę, własne statusy albo potrzebę migracji między CRM-ami.

Bezpieczeństwo, RODO, testy i monitoring

RODO wymaga nie tylko podstawy prawnej, ale też przejrzystości, minimalizacji danych, bezpieczeństwa i rozliczalności. Formularz powinien zbierać tylko te pola, które są potrzebne do pierwszego kontaktu, rozdzielać komunikację operacyjną od marketingowej i przechowywać dowód zgody tam, gdzie zgoda jest podstawą przetwarzania.

W praktyce trzeba testować walidację, odpowiedzi CRM, błędy 4xx i 5xx, retry, duplikaty, dostarczalność e-maili i monitoring scenariuszy. Jeśli webhook albo API zwraca 429, integracja powinna mieć retry z backoffem, a nie cicho zgubić lead.

• tokeny CRM i SMTP trzymaj tylko po stronie serwera
• zapisuj submission_id, timestamp, source_url i status integracji
• nie loguj pełnych payloadów z danymi osobowymi bez potrzeby
• oddziel e-mail potwierdzający od marketingowego newslettera
• dodaj alert przy błędach CRM, SMTP, webhooka i przekroczeniu limitów
• sprawdzaj deduplikację po e-mailu, external_id lub numerze telefonu

Podsumowanie

Jeśli chcesz rozwiązania szybkiego, wybierz formularz z webhookiem i scenariusz w Make albo Zapier. Jeśli chcesz pełnej kontroli, własny backend i REST API CRM będą lepsze. Jeśli działasz na WordPressie i chcesz skrócić wdrożenie, użyj dobrej wtyczki formularza z webhookiem lub integracją CRM.

Niezależnie od drogi trzy zasady są stałe: backend jako warstwa pośrednia, osobny mechanizm e-maili transakcyjnych i monitoring całego przepływu. SmartCodeIT może zaprojektować taki MVP, podłączyć formularze do CRM i e-maila oraz dodać analitykę konwersji, żeby leady nie ginęły między narzędziami.