Kontaktný formulár s automatickou odpoveďou

Kompletný postup – kontaktný formulár, ktorý vám pošle e-mail a návštevníkovi poďakuje – teraz nájdete v Tutoriáli. Kroky, na ktorých v tomto recepte záleží najviac:

Vytvorte kontaktnú šablónuKrok 2 tutoriálu: šablóna Kontaktný formulár z galérie.

Pridajte automatickú odpoveďKrok 3 tutoriálu: ďakovný e-mail prepojený v Nastavenia → Doručovanie.

Vytvorte formulárKrok 5 tutoriálu: čisté HTML so sendForm() a Turnstile.

Keď všetko funguje, oplatí sa pozrieť aj na tieto doplnky.

Ukladanie odosielateľov ako kontaktov

Šablóna Kontaktný formulár z galérie má Zber kontaktov už zapnutý (v šablóne Nastavenia → Zber kontaktov, Zbierať kontakty z tejto šablóny) s Parameter s e-mailom email a Parameter s menom name. Každá úspešne odoslaná správa vytvorí alebo aktualizuje záznam v sekcii Kontakty. Ak chcete ku kontaktu uložiť aj ďalšie parametre, zadajte ich do poľa Ďalšie polia oddelené čiarkami. Pozrite si Zber kontaktov.

Pýtajte sa na viac než len správu

Pridajte polia do šablóny na karte Parametre a potom do formulára pridajte vstupy s rovnakým name. Hodnoty z formulára prichádzajú ako text a Frontmail ich prevedie na deklarovaný typ, napríklad:

Parameter	Typ	Vstup vo formulári
`topic`	`enum` s Povolené hodnoty `sales, support, other`	`<select name="topic">`
`newsletter`	`boolean`, Predvolená hodnota `false`	`<input type="checkbox" name="newsletter">` – zaškrtnuté sa zmení na `true`, nezaškrtnuté použije predvolenú hodnotu

{{#if newsletter}}<p>Chce dostávať newsletter.</p>{{/if}}

Podrobnosti: prevod hodnôt z formulárov.

Chyby validácie priamo pri poliach

Keď hodnota poruší pravidlo parametra (neplatný e-mail, chýbajúce povinné pole, príliš krátka správa), požiadavka zlyhá s chybou invalid_template_params a nič sa neodošle. Chyba obsahuje zoznam všetkých problémov, takže každý môžete zobraziť pri správnom poli:

try {
  await frontmail.sendForm(null, 'tpl_…', form);
} catch (err) {
  form.querySelectorAll('.field-error').forEach((el) => (el.textContent = ''));
  for (const issue of err.details?.issues ?? []) {
    // napr. <small class="field-error" data-for="email"></small> pod každým poľom
    const el = form.querySelector(`.field-error[data-for="${issue.param}"]`);
    if (el) el.textContent = issue.message;
  }
}

Pozrite si Spracovanie chýb.

Ochrana pred spamom

Povolené weby a CAPTCHA Turnstile (krok 4 tutoriálu) zastavia väčšinu zneužitia. Pri frekventovanom verejnom formulári môžete navyše:

zapnúť Blokovať headless prehliadače v Zabezpečenie → Ochrana pred zneužitím,
znížiť Rate limit na IP adresu,
vyplniť Zoznam blokovaných hodnôt adresami alebo doménami, od ktorých nikdy nechcete nič dostať,
pridať šablóne Záložnú službu (Nastavenia → Doručovanie), aby výpadok poskytovateľa nezdržal vaše správy.

Pozrite si Ochrana pred botmi.