Preskočiť na obsah

Ako pridať kontaktný formulár na web bez backendu

Obyčajný HTML kontaktný formulár, ktorý vám každú správu pošle e-mailom – bez servera, bez PHP a bez pluginu. Funguje na každom statickom webe, od ručne písaného HTML po Astro, Hugo či WordPress.

Aktualizované:

Video je v angličtine; nižšie nájdete celý návod v slovenčine.

Vytvoríte bežný HTML formulár, ktorý každé odoslanie doručí do vašej schránky. E-mail odošle Frontmail cez schránku, ktorú už používate (Gmail, Outlook, ľubovoľný SMTP server alebo transakčný poskytovateľ), takže nemusíte prevádzkovať žiadny vlastný server.

Potrebujete: bezplatný účet Frontmail a zhruba desať minút.

1. Pripojte svoju schránku

  1. V dashboarde otvorte E-mailové služby a kliknite na Pridať službu.
  2. Vyberte poskytovateľa. Gmail a Outlook pripojíte cez svoj účet (heslo sa nikde neukladá); SMTP, Resend, Postmark, Mailgun a ďalší potrebujú API kľúč alebo prihlasovacie údaje.
  3. Zaškrtnite Nastaviť ako predvolenú a kliknite na Overiť a uložiť. Frontmail overí prihlasovacie údaje bez toho, aby čokoľvek odoslal.

2. Vytvorte šablónu z galérie

  1. Otvorte Šablóny → Z galérie a vyberte Kontaktný formulár (kategória Formuláre).
  2. Kliknite na Použiť šablónu. V poli Komu je vaša vlastná adresa a Reply-To je návštevník, takže keď kliknete na Odpovedať, odpoviete priamo jemu.

Šablóna očakáva tieto parametre – stanú sa z nich atribúty name polí vo formulári:

Parameter Povinný Čo obsahuje
name áno Meno návštevníka
email áno Adresa návštevníka (validuje sa)
phone nie Telefónne číslo
topic nie Téma, zobrazí sa v predmete
message áno Samotná správa

3. Povoľte svoj web

Verejný kľúč je vidieť v zdrojovom kóde stránky a to je v poriadku – používať ho však má môcť len váš web.

  1. Otvorte Zabezpečenie a v časti Povolené weby pridajte svoju doménu (napríklad example.com a www.example.com; počas vývoja aj localhost). Kliknite na Uložiť.
  2. Odporúčame: vytvorte si pre svoje domény bezplatný widget Cloudflare Turnstile, vložte jeho site key a secret key do Zabezpečenie → Ochrana pred botmi a kliknite na Zapnúť CAPTCHA pre všetky šablóny. Roboty potom váš formulár nezneužijú a ľudia overenie väčšinou ani nepostrehnú.

4. Vložte formulár na stránku

Skopírujte verejný kľúč (Zabezpečenie) a ID šablóny (karta Kód v šablóne) a tento kód vložte tam, kde sa má formulár zobraziť:

<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() číta polia podľa ich atribútu name, takže formulár a šablóna zostanú zosúladené bez akéhokoľvek mapovacieho kódu. Sieťové chyby a výpadky servera sa automaticky zopakujú s rovnakým idempotency kľúčom – návštevník vám tú istú správu nikdy nepošle dvakrát.

5. Vyskúšajte to

Otvorte stránku, vyplňte formulár a odošlite ho. E-mail vám príde do schránky v priebehu niekoľkých sekúnd a v dashboarde v časti História uvidíte správu aj s jej kompletnou časovou osou.

Ak niečo nefunguje, chyba vám povie prečo:

  • origin_not_allowed – doména stránky nie je v zozname Povolené weby (skontrolujte www aj port).
  • captcha_required – šablóna vyžaduje Turnstile, ale vo formulári chýba widget.
  • invalid_template_params – povinné pole je prázdne alebo hodnota nezodpovedá parametru.

Počas rušného týždňa vám došli kredity? Správa sa nestratí: prijme sa so stavom held a automaticky odíde, hneď ako si kredity doplníte.

Ďalšie kroky

  • Pošlite návštevníkovi potvrdenie: pridajte z galérie šablónu Automatická odpoveď: ďakujeme za správu a vyberte ju v kontaktnej šablóne v Nastavenia → Doručovanie.
  • Používate React, Vue alebo Svelte? Balíčky pre frameworky obsahujú hotový komponent FrontmailForm so zabudovaným widgetom Turnstile – pozrite si dokumentáciu SDK.

Ďalšie návody

Všetky návody