5. Postavte formulář

Teď část, která žije na vašem webu: obyčejný HTML formulář a pár řádků JavaScriptu.

Připravte si tři hodnoty

Co	Jak vypadá	Kde to najdete
Veřejný klíč	pk_…	Zabezpečení → Veřejný klíč (tlačítko pro kopírování), nebo na kartě šablony Kód pro web
ID šablony	tpl_…	seznam Šablony, sloupec ID šablony, nebo na kartě Kód pro web
ID služby	svc_…	na kartě Kód pro web – nebo ho vynechte a předejte null, pak se použije výchozí služba

Nejjednodušší je karta Kód pro web v šabloně Kontaktní formulář. Vygeneruje hotový kód pro HTML / JS, React, Vue, Svelte, Node.js a cURL – s vaším klíčem, ID a všemi parametry šablony.

Vygenerovaný kód volá send() s objektem hodnot. U formuláře je jednodušší sendForm(), které si pole přečte přímo z <form> – a to použijeme níže.

Formulář

1. Vložte formulář na stránku. Atributy name musí odpovídat parametrům šablony: name, email a message jsou povinné, phone a topic nepovinné.

2. Widget Turnstile dejte dovnitř formuláře. Přidá skryté pole cf-turnstile-response, které sendForm() odešle spolu s ostatními. Použijte site key svého widgetu Turnstile z kroku 4. Pokud jste CAPTCHA zatím přeskočili, widget vynechte.

3. Načtěte SDK z CDN. Vytvoří globální objekt frontmail.

4. Zavolejte frontmail.init() s veřejným klíčem a při odeslání frontmail.sendForm().

<form id="contact">
  <label>Jméno <input name="name" required maxlength="200" /></label>
  <label>E-mail <input name="email" type="email" required /></label>
  <label>Zpráva <textarea name="message" required></textarea></label>

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

  <button type="submit">Odeslat</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 = 'Odesílám…';
    try {
      // null = výchozí služba; případně vložte ID svc_… z karty Kód pro web
      const result = await frontmail.sendForm(null, 'tpl_…', form);
      // result.status je "queued" (na cestě) nebo "held" (přijato, odejde po doplnění kreditů)
      status.textContent = 'Děkujeme! Brzy se vám ozveme.';
      form.reset();
    } catch (err) {
      status.textContent = 'Omlouváme se, nepovedlo se to: ' + err.message;
    } finally {
      window.turnstile?.reset(); // token Turnstile platí jen jednou
    }
  });
</script>

Co se při odeslání stane:

• sendForm() pošle Frontmailu pole formuláře, váš veřejný klíč a token Turnstile.
• Frontmail zkontroluje origin, CAPTCHA a parametry a během okamžiku odpoví { messageId, status }. Samotný e-mail se odesílá na pozadí.
• queued i held znamenají úspěch – zpráva je bezpečně přijatá. V obou případech návštěvníkovi ukažte běžné poděkování.
• Při problému se promise zamítne s chybou, která má code a srozumitelnou message, např. invalid_template_params, když je e-mailová adresa neplatná nebo chybí povinné pole. Výpadky sítě a dočasné chyby serveru SDK samo zopakuje, a to bez dvojitého odeslání.

Upozornění

Na web patří jen veřejný klíč (pk_…). Privátní klíče (sk_…) jsou pro servery – nikdy je nedávejte do kódu ve frontendu. Viz Veřejný a privátní klíč.

Tip

Radši npm? npm install @frontmail/browser a import { init, sendForm } from '@frontmail/browser' – funkce jsou stejné. Další možnosti najdete v Čistém JavaScriptu.

Používáte framework?

Balíčky pro frameworky mají hotovou komponentu formuláře, která za vás vykreslí widget Turnstile a pohlídá stav odesílání:

React

Vue

Svelte

React NativeMobilní aplikace: hook pro odesílání a Turnstile ve WebView.

Další příkladyKompletní ukázkové projekty pro každé SDK.