Jak přidat kontaktní formulář na web bez backendu

Postavíte běžný HTML formulář, který každé odeslání doručí do vaší schránky. E-mail odešle Frontmail přes schránku, kterou už používáte (Gmail, Outlook, libovolný SMTP server nebo transakční služba), takže nemusíte provozovat žádný vlastní server.

Budete potřebovat: bezplatný účet Frontmail a zhruba deset minut.

1. Připojte svou schránku

1. V dashboardu otevřete E-mailové služby a klikněte na Přidat službu.
2. Vyberte poskytovatele. Gmail a Outlook připojíte přes svůj účet (žádné heslo se neukládá); SMTP, Resend, Postmark, Mailgun a další potřebují API klíč nebo přihlašovací údaje.
3. Zaškrtněte Nastavit jako výchozí a klikněte na Ověřit a uložit. Frontmail údaje zkontroluje, aniž by cokoli odeslal.

2. Vytvořte šablonu z galerie

1. Otevřete Šablony → Z galerie a vyberte Kontaktní formulář (kategorie Formuláře).
2. Klikněte na Použít šablonu. V poli Komu je vaše adresa a v Odpovědět na adresa návštěvníka, takže když kliknete na Odpovědět, odpovídáte rovnou jemu.

Šablona očekává tyto parametry – z nich se stanou atributy name polí formuláře:

Parametr	Povinný	Co obsahuje
name	ano	Jméno návštěvníka
email	ano	E-mail návštěvníka (ověřuje se formát)
phone	ne	Telefon
topic	ne	Téma, zobrazí se v předmětu
message	ano	Zpráva

3. Povolte svůj web

Veřejný klíč je vidět ve zdrojovém kódu stránky, a to je v pořádku – používat ho ale smí jen váš web.

1. Otevřete Zabezpečení a do seznamu Povolené weby přidejte svou doménu (například example.com a www.example.com; během vývoje i localhost). Klikněte na Uložit.
2. Doporučujeme: vytvořte si bezplatný widget Cloudflare Turnstile pro své hostnames, vložte jeho site key a secret key do Zabezpečení → Ochrana proti botům a klikněte na Zapnout CAPTCHA u všech šablon. Boti pak formulář nezneužijí a lidé si kontroly většinou ani nevšimnou.

4. Vložte formulář do stránky

Zkopírujte veřejný klíč (Zabezpečení) a ID šablony (záložka Kód pro web u šablony) a na místo, kde má formulář být, vložte:

<form id="contact">
  <label>Name <input name="name" required maxlength="200" /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Turnstile adds a hidden cf-turnstile-response field; leave it out if you skipped the CAPTCHA -->
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Send</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 = 'Sending…';
    try {
      // null = your default service
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thank you! We’ll get back to you soon.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset(); // a Turnstile token works only once
    }
  });
</script>

sendForm() čte pole podle jejich name, takže formulář a šablona zůstávají v souladu bez jakéhokoli mapovacího kódu. Chyby sítě a výpadky serveru se automaticky zopakují se stejným idempotency key – návštěvník vám tutéž zprávu nikdy nepošle dvakrát.

5. Vyzkoušejte to

Otevřete stránku, vyplňte formulář a odešlete ho. E-mail dorazí do schránky během několika sekund a v sekci Historie v dashboardu uvidíte zprávu i s celou časovou osou.

Pokud něco nefunguje, chyba vám řekne proč:

• origin_not_allowed – doména stránky není v seznamu Povolené weby (zkontrolujte www a port).
• captcha_required – šablona vyžaduje Turnstile, ale ve formuláři chybí widget.
• invalid_template_params – povinné pole je prázdné nebo hodnota neodpovídá parametru.

Došly vám v rušném týdnu kredity? Zpráva se neztratí: přijme se se stavem held a odejde automaticky, jakmile kredity doplníte.

Další kroky

• Pošlete návštěvníkovi potvrzení: přidejte z galerie šablonu Automatická odpověď: díky za zprávu a vyberte ji v kontaktní šabloně v Nastavení → Doručování.
• Používáte React, Vue nebo Svelte? Balíčky pro frameworky obsahují hotovou komponentu FrontmailForm s vestavěným widgetem Turnstile – podívejte se do dokumentace SDK.