Kontaktní formulář s automatickou odpovědí

Kompletní postup – kontaktní formulář, který pošle zprávu vám a návštěvníkovi poděkuje – teď najdete v Návodu. Pro tento recept jsou nejdůležitější tyto kroky:

Vytvořte šablonu pro formulářNávod, krok 2: šablona Kontaktní formulář z galerie.

Přidejte automatickou odpověďNávod, krok 3: děkovný e-mail propojený v Nastavení → Doručování.

Postavte formulářNávod, krok 5: obyčejné HTML se sendForm() a Turnstile.

Až vám to poběží, stojí za to podívat se i na tyhle doplňky.

Ukládejte odesílatele do kontaktů

Šablona Kontaktní formulář z galerie má Sběr kontaktů už zapnutý (v šabloně Nastavení → Sběr kontaktů, volba Sbírat kontakty z této šablony), s Parametrem s e-mailem email a Parametrem se jménem name. Každá úspěšně odeslaná zpráva vytvoří nebo aktualizuje záznam v Kontaktech. Chcete-li ke kontaktu ukládat i další parametry, vypište je čárkami v poli Další pole. Viz Sběr kontaktů.

Ptejte se na víc než jen na zprávu

Na kartě Parametry přidejte do šablony další pole a do formuláře k nim vstupy se stejným name. Hodnoty z formuláře přicházejí jako text a Frontmail je převede na deklarovaný typ, třeba:

Parametr	Typ	Pole ve formuláři
`topic`	`enum`, Povolené hodnoty `sales, support, other`	`<select name="topic">`
`newsletter`	`boolean`, Výchozí hodnota `false`	`<input type="checkbox" name="newsletter">` – zaškrtnuté je `true`, nezaškrtnuté použije výchozí hodnotu

{{#if newsletter}}<p>Chce odebírat newsletter.</p>{{/if}}

Podrobnosti: převod hodnot z formulářů.

Ukažte chyby validace u polí

Když hodnota poruší pravidlo parametru (neplatný e-mail, chybějící povinné pole, moc krátká zpráva), požadavek skončí chybou invalid_template_params a nic se neodešle. Chyba obsahuje seznam všech problémů, takže je můžete ukázat u správného pole:

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

Viz Zpracování chyb.

Zpevněte ochranu proti spamu

Povolené weby a CAPTCHA Turnstile (krok 4 návodu) zastaví většinu zneužití. U hodně navštěvovaného veřejného formuláře můžete navíc:

v Zabezpečení → Ochrana proti zneužití zapnout Blokovat headless prohlížeče,
snížit Limit požadavků na IP adresu,
do Seznamu blokovaných hodnot zapsat adresy nebo domény, od kterých nic nechcete,
v šabloně nastavit Záložní službu (Nastavení → Doručování), aby výpadek poskytovatele vaše zprávy nezdržel.

Viz Ochrana proti botům.