5. Zbuduj formularz

Teraz część, która żyje na twojej stronie: zwykły formularz HTML i kilka linii JavaScriptu.

Zbierz trzy wartości

Co	Wygląda tak	Gdzie to znaleźć
Klucz publiczny	`pk_…`	Bezpieczeństwo → Klucz publiczny (przycisk kopiowania) albo w zakładce Kod szablonu
ID szablonu	`tpl_…`	Lista Szablony, kolumna ID szablonu, albo zakładka Kod
ID usługi	`svc_…`	W zakładce Kod – albo pomiń je i przekaż `null`, żeby użyć usługi domyślnej

Najprościej skorzystać z zakładki Kod szablonu Formularz kontaktowy. Generuje gotowy kod dla HTML / JS, React, Vue, Svelte, Node.js i cURL z twoim kluczem, identyfikatorami i wszystkimi parametrami szablonu.

Zakładka Kod w edytorze szablonów z przełącznikami frameworków i wygenerowanym kodem zawierającym klucz publiczny, ID usługi i ID szablonu

Wygenerowane fragmenty wywołują send() z obiektem wartości. Przy formularzu prościej użyć sendForm(), który czyta pola prosto z <form> – i tak robimy poniżej.

Formularz

Dodaj formularz na stronę. Atrybuty name muszą odpowiadać parametrom szablonu: name, email i message są wymagane, phone i topic opcjonalne.
Umieść widżet Turnstile wewnątrz formularza. Dodaje on ukryte pole cf-turnstile-response, które sendForm() wysyła razem z resztą. Użyj klucza witryny własnego widżetu Turnstile z kroku 4. Jeśli na razie pominąłeś CAPTCHA, nie dodawaj widżetu.
Załaduj SDK z CDN. Tworzy ono globalny obiekt frontmail.
Wywołaj frontmail.init() z kluczem publicznym, a przy wysyłce frontmail.sendForm().

<form id="contact">
  <label>Imię <input name="name" required maxlength="200" /></label>
  <label>E-mail <input name="email" type="email" required /></label>
  <label>Wiadomość <textarea name="message" required></textarea></label>

  <!-- Turnstile dodaje ukryte pole cf-turnstile-response -->
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>

  <button type="submit">Wyślij</button>
  <p id="form-status" role="status"></p>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script
  src="https://cdn.jsdelivr.net/npm/@frontmail/browser@0.1.0/dist/frontmail.umd.js"
  integrity="sha384-g2Rxznkz2yb/YYSdVTkXLxZFZ2Nh2+XdhPStxh0stydXFF3gYjDuyHimWIZLJDCc"
  crossorigin="anonymous"></script>
<script>
  frontmail.init({ publicKey: 'pk_…' });

  const form = document.getElementById('contact');
  const status = document.getElementById('form-status');

  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Wysyłanie…';
    try {
      // null = usługa domyślna; albo wklej ID svc_… z zakładki Kod
      const result = await frontmail.sendForm(null, 'tpl_…', form);
      // result.status to "queued" (w drodze) albo "held" (przyjęte, wyjdzie po doładowaniu kredytów)
      status.textContent = 'Dziękujemy! Wkrótce się odezwiemy.';
      form.reset();
    } catch (err) {
      status.textContent = 'Niestety, nie udało się: ' + err.message;
    } finally {
      window.turnstile?.reset(); // token Turnstile działa tylko raz
    }
  });
</script>

Co się dzieje po wysłaniu:

sendForm() wysyła do Frontmaila pola formularza, twój klucz publiczny i token Turnstile.
Frontmail sprawdza domenę, CAPTCHA i parametry i po chwili odpowiada { messageId, status }. Sam e-mail jest wysyłany w tle.
Zarówno queued, jak i held oznaczają sukces – wiadomość została bezpiecznie przyjęta. W obu przypadkach pokaż odwiedzającemu zwykłe podziękowanie.
W razie problemu promise zostaje odrzucony z błędem, który ma code i czytelny message, np. invalid_template_params, gdy adres e-mail jest nieprawidłowy albo brakuje wymaganego pola. Błędy sieci i chwilowe problemy serwera są ponawiane automatycznie, bez podwójnej wysyłki.

Używasz frameworka?

Pakiety dla frameworków zawierają gotowy komponent formularza, który renderuje widżet Turnstile i obsługuje stan wysyłania za ciebie:

React

Vue

Svelte

React NativeAplikacje mobilne: hook do wysyłki i Turnstile w WebView.

Więcej przykładówKompletne przykładowe projekty dla każdego SDK.