Formularz kontaktowy z automatyczną odpowiedzią

Kompletny przewodnik – formularz kontaktowy, który wysyła e-mail do ciebie i dziękuje odwiedzającemu – jest teraz w Samouczku. Kroki najważniejsze dla tego przepisu:

Utwórz szablon kontaktowySamouczek, krok 2: szablon Formularz kontaktowy z galerii.

Dodaj automatyczną odpowiedźSamouczek, krok 3: e-mail z podziękowaniem podpięty w Ustawienia → Doręczanie.

Zbuduj formularzSamouczek, krok 5: czysty HTML z sendForm() i Turnstile.

Gdy wszystko działa, warto przyjrzeć się tym dodatkom.

Zapisuj nadawców jako kontakty

Szablon Formularz kontaktowy z galerii ma już włączone Zbieranie kontaktów (Ustawienia szablonu → Zbieranie kontaktów, Zbieraj kontakty z tego szablonu) z Parametr z e-mailem email i Parametr z imieniem name. Każda pomyślnie wysłana wiadomość tworzy lub aktualizuje wpis w Kontaktach. W Dodatkowe pola dopisz kolejne parametry oddzielone przecinkami, żeby zachować je przy kontakcie. Zobacz Zbieranie kontaktów.

Pytaj o więcej niż samą wiadomość

Dodaj pola do szablonu w zakładce Parametry, a potem pola o tym samym name do formularza. Wartości z formularza przychodzą jako tekst, a Frontmail zamienia je na zadeklarowany typ, na przykład:

Parametr	Typ	Pole formularza
`topic`	`enum` z Dozwolone wartości `sales, support, other`	`<select name="topic">`
`newsletter`	`boolean`, Wartość domyślna `false`	`<input type="checkbox" name="newsletter">` – zaznaczone daje `true`, niezaznaczone wartość domyślną

{{#if newsletter}}<p>Chce dostawać newsletter.</p>{{/if}}

Szczegóły: konwersja wartości z formularzy.

Pokazuj błędy walidacji przy polach

Gdy wartość łamie regułę parametru (nieprawidłowy e-mail, brak wymaganego pola, za krótka wiadomość), żądanie kończy się błędem invalid_template_params i nic nie zostaje wysłane. Błąd wymienia wszystkie problemy, więc możesz pokazać każdy przy właściwym polu:

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

Zobacz Obsługa błędów.

Wzmocnij ochronę przed spamem

Dozwolone domeny i CAPTCHA Turnstile (krok 4 Samouczka) zatrzymują większość nadużyć. Przy mocno obciążonym publicznym formularzu możesz dodatkowo:

włączyć Blokuj przeglądarki headless w Bezpieczeństwo → Ochrona przed nadużyciami,
obniżyć Limit żądań na IP,
uzupełnić Listę blokad o adresy lub domeny, od których nigdy nie chcesz nic dostawać,
dodać do szablonu Usługę zapasową (Ustawienia → Doręczanie), żeby awaria dostawcy nie opóźniała twoich wiadomości.

Zobacz Ochrona przed botami.