Kontaktformular mit automatischer Antwort

Die vollständige Anleitung – ein Kontaktformular, das Ihnen die Nachricht schickt und sich beim Besucher bedankt – ist jetzt das Tutorial. Für dieses Rezept sind diese Schritte am wichtigsten:

Vorlage für das Formular erstellenTutorial, Schritt 2: die Vorlage Kontaktformular aus der Galerie.

Automatische Antwort hinzufügenTutorial, Schritt 3: eine Dankes-E-Mail, verknüpft unter Einstellungen → Zustellung.

Formular bauenTutorial, Schritt 5: schlichtes HTML mit sendForm() und Turnstile.

Sobald alles läuft, lohnt sich ein Blick auf diese Extras.

Absender als Kontakte speichern

Bei der Galerievorlage Kontaktformular ist Kontakte sammeln bereits eingeschaltet (in der Vorlage Einstellungen → Kontakte sammeln, Option Kontakte aus dieser Vorlage sammeln), mit Parameter für E-Mail email und Parameter für Name name. Jede erfolgreich gesendete Nachricht legt einen Eintrag unter Kontakte an oder aktualisiert ihn. Weitere Parameter, die beim Kontakt gespeichert werden sollen, tragen Sie kommagetrennt unter Zusätzliche Felder ein. Siehe Kontakte sammeln.

Mehr erfragen als nur eine Nachricht

Fügen Sie der Vorlage im Tab Parameter weitere Felder hinzu und ergänzen Sie im Formular Eingabefelder mit demselben name. Formularwerte kommen als Text an, und Frontmail wandelt sie in den deklarierten Typ um, zum Beispiel:

Parameter	Typ	Formularfeld
`topic`	`enum` mit Erlaubte Werte `sales, support, other`	`<select name="topic">`
`newsletter`	`boolean`, Standardwert `false`	`<input type="checkbox" name="newsletter">` – angehakt ergibt `true`, nicht angehakt den Standardwert

{{#if newsletter}}<p>Möchte den Newsletter erhalten.</p>{{/if}}

Details: Umwandlung von Formulardaten.

Validierungsfehler direkt am Feld anzeigen

Verletzt ein Wert eine Parameterregel (ungültige E-Mail, fehlendes Pflichtfeld, zu kurze Nachricht), schlägt die Anfrage mit invalid_template_params fehl und es wird nichts gesendet. Der Fehler listet jedes Problem auf, sodass Sie es am richtigen Feld anzeigen können:

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

Siehe Fehlerbehandlung.

Besser gegen Spam absichern

Erlaubte Websites und das Turnstile-CAPTCHA (Schritt 4 des Tutorials) stoppen den Großteil des Missbrauchs. Bei einem stark frequentierten öffentlichen Formular können Sie zusätzlich:

unter Sicherheit → Schutz vor Missbrauch die Option Headless-Browser blockieren einschalten,
das Rate Limit pro IP senken,
die Blockliste mit Adressen oder Domains füllen, von denen Sie nichts hören möchten,
der Vorlage einen Ersatzdienst zuweisen (Einstellungen → Zustellung), damit ein Ausfall beim Anbieter Ihre Nachrichten nicht verzögert.

Siehe Bot-Schutz.