5. Vytvorte formulár

Teraz časť, ktorá žije na vašom webe: obyčajný HTML formulár a niekoľko riadkov JavaScriptu.

Pripravte si tri hodnoty

Čo	Ako vyzerá	Kde to nájdete
Verejný kľúč	`pk_…`	Zabezpečenie → Verejný kľúč (tlačidlo na kopírovanie) alebo na karte Kód v šablóne
ID šablóny	`tpl_…`	Zoznam Šablóny, stĺpec ID šablóny, alebo na karte Kód
ID služby	`svc_…`	Na karte Kód – alebo ho vynechajte a odovzdajte `null`, aby sa použila predvolená služba

Najjednoduchšie je použiť kartu Kód v šablóne Kontaktný formulár. Vygeneruje hotový kód pre HTML / JS, React, Vue, Svelte, Node.js a cURL, v ktorom sú už vyplnené váš kľúč, ID aj všetky parametre šablóny.

Karta Kód v editore šablóny s prepínačmi frameworkov a vygenerovaným kódom s verejným kľúčom, ID služby a ID šablóny

Vygenerované ukážky volajú send() s objektom hodnôt. Pre formulár je jednoduchšie použiť sendForm(), ktoré číta polia priamo z <form> – presne to urobíme nižšie.

Formulár

Pridajte formulár na stránku. Atribúty name sa musia zhodovať s parametrami šablóny: name, email a message sú povinné, phone a topic nepovinné.
Widget Turnstile umiestnite do formulára. Pridá skryté pole cf-turnstile-response, ktoré sendForm() odošle spolu s ostatnými. Použite site key vlastného widgetu Turnstile z kroku 4. Ak ste CAPTCHA zatiaľ preskočili, widget vynechajte.
Načítajte SDK z CDN. Vytvorí globálny objekt frontmail.
Zavolajte frontmail.init() so svojím verejným kľúčom a pri odoslaní frontmail.sendForm().

<form id="contact">
  <label>Meno <input name="name" required maxlength="200" /></label>
  <label>E-mail <input name="email" type="email" required /></label>
  <label>Správa <textarea name="message" required></textarea></label>

  <!-- Turnstile pridá skryté pole cf-turnstile-response -->
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>

  <button type="submit">Odoslať</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 = 'Odosielam…';
    try {
      // null = predvolená služba; prípadne vložte ID svc_… zo karty Kód
      const result = await frontmail.sendForm(null, 'tpl_…', form);
      // result.status je "queued" (na ceste) alebo "held" (prijaté, odíde po doplnení kreditov)
      status.textContent = 'Ďakujeme! Čoskoro sa vám ozveme.';
      form.reset();
    } catch (err) {
      status.textContent = 'Prepáčte, nepodarilo sa to: ' + err.message;
    } finally {
      window.turnstile?.reset(); // token Turnstile platí iba raz
    }
  });
</script>

Čo sa stane pri odoslaní:

sendForm() pošle do Frontmailu polia formulára, váš verejný kľúč a token Turnstile.
Frontmail skontroluje origin, CAPTCHA a parametre a o chvíľu odpovie { messageId, status }. Samotný e-mail sa odosiela na pozadí.
queued aj held znamenajú úspech – správa je bezpečne prijatá. V oboch prípadoch návštevníkovi zobrazte bežné poďakovanie.
Pri probléme sa promise zamietne s chybou, ktorá má code a čitateľnú message, napr. invalid_template_params, keď je e-mailová adresa neplatná alebo chýba povinné pole. Sieťové chyby a krátke výpadky servera sa automaticky zopakujú, bez dvojitého odoslania.

Používate framework?

Balíky pre frameworky obsahujú hotový komponent formulára, ktorý vykreslí widget Turnstile a postará sa za vás o stav odosielania:

React

Vue

Svelte

React NativeMobilné aplikácie: hook na odosielanie a Turnstile vo WebView.

Ďalšie príkladyKompletné ukážkové projekty pre každé SDK.