Kontaktformular auf Ihrer Website: So kommen Anfragen tatsächlich an

Um ein Kontaktformular zu bauen, das funktioniert, erstellen Sie ein kurzes Formular (Name, E-Mail, Nachricht), das an eine Server-Route gesendet wird, die die Eingaben prüft, die Nachricht in einer Datenbank speichert und Ihnen dann über einen E-Mail-Anbieter mit einem geheimen API-Schlüssel eine Benachrichtigung schickt. Ein verstecktes Honeypot-Feld und eine Ratenbegrenzung stoppen die meisten Spam-Nachrichten, eine klare Erfolgsmeldung zeigt, dass alles angekommen ist, und Sie testen die Strecke vollständig auf der veröffentlichten Seite. Das Speichern vor dem Versand ist der wichtigste Teil: Wenn die E-Mail einmal ausfällt, haben Sie die Anfrage trotzdem.

Ihre Optionen

Wenn Ihre Seite bereits ein Backend und eine Datenbank hat – was Apps aus KI-App-Buildern oft haben –, ist die letzte Option am zuverlässigsten und hält Anfragen dort, wo Sie sie sehen.

Was ein gutes Kontaktformular enthält

• So wenige Felder wie möglich. Name, E-Mail, Nachricht. Ein Dropdown für das Thema („Vertrieb“, „Support“, „Sonstiges“) nur, wenn Sie danach weiterleiten.
• Klare Beschriftungen über jedem Feld, nicht nur Platzhaltertext, der verschwindet.
• Hilfreiche Prüfung: „Bitte geben Sie eine gültige E-Mail-Adresse ein“, direkt neben dem Feld angezeigt.
• Ein Erfolgszustand, der sagt, was als Nächstes passiert: „Danke – wir antworten innerhalb eines Werktags.“
• Ein Datenschutzhinweis, der erklärt, wie Sie die Angaben verwenden, mit Link zu Ihrer Datenschutzerklärung.
• Eine Alternative, etwa Ihre E-Mail-Adresse oder Telefonnummer, für Menschen, die das lieber nutzen.

Beispiel-Prompts

Das einfache Formular:

Füge auf der Kontaktseite ein Kontaktformular mit Name, E-Mail und Nachricht hinzu (alle Pflichtfelder, Nachricht bis 2.000 Zeichen). Sende es an eine Server-Route, die die Eingaben prüft, in der Tabelle contact_messages mit Eingangszeit speichert und eine Erfolgsmeldung zeigt: „Danke, wir antworten innerhalb eines Werktags.“ Zeige Fehler direkt am Feld an. Es soll auf dem Handy gut funktionieren.

E-Mail-Benachrichtigungen:

Wenn eine Kontaktnachricht gespeichert wird, sende mir eine Benachrichtigungs-E-Mail an hallo@example.com über Resend, mit dem Schlüssel aus RESEND_API_KEY. Setze Reply-to auf die E-Mail-Adresse des Absenders, damit ich direkt antworten kann. Wenn der Versand fehlschlägt, behalte die gespeicherte Nachricht und protokolliere den Fehler, ohne den Schlüssel offenzulegen.

Spam-Schutz:

Füge dem Kontaktformular Spam-Schutz hinzu: ein verstecktes Honeypot-Feld, das leer bleiben muss, ein Limit von 5 Einsendungen pro IP-Adresse und Stunde auf dem Server, und lehne Nachrichten mit mehr als 3 Links ab. Verwirf Honeypot-Einsendungen stillschweigend, zeige aber trotzdem Erfolg an.

Ein Posteingang:

Füge eine passwortgeschützte Admin-Seite hinzu, die Kontaktnachrichten neueste zuerst auflistet, mit einem Kontrollkästchen „bearbeitet“ und einem Filter für unbearbeitete Nachrichten.

Schritt für Schritt

1. Legen Sie fest, wohin die Nachrichten gehen: wer die Benachrichtigungen bekommt und wer antwortet.
2. Bauen Sie das Formular mit den oben genannten Feldern, barrierefreien Beschriftungen und handyfreundlichen Eingabefeldern (verwenden Sie den E-Mail-Eingabetyp, damit Handys die passende Tastatur zeigen).
3. Erstellen Sie die Server-Route. Sie prüft Pflichtfelder, das E-Mail-Format und Längenbegrenzungen. Vertrauen Sie niemals einer reinen Browser-Prüfung.
4. Speichern Sie zuerst in der Datenbank. Siehe wie Sie Ihrer App eine Datenbank hinzufügen.
5. Richten Sie einen E-Mail-Anbieter ein. Legen Sie ein Konto an, verifizieren Sie Ihre Versanddomain und speichern Sie den API-Schlüssel als Geheimnis. Wie Sie E-Mails aus Ihrer App versenden beschreibt die Domain-Einrichtung (SPF, DKIM) im Detail.
6. Senden Sie die Benachrichtigung vom Server aus, nachdem Sie gespeichert haben. Verwenden Sie Ihre verifizierte Domain als Absender und die Adresse des Besuchers als Reply-to – setzen Sie den Besucher nicht als Absender, sonst wird die Nachricht wahrscheinlich als Fälschung abgelehnt.
7. Optional eine automatische Antwort an den Besucher, aber kurz halten; automatische Antworten an Spam-Adressen können Ihrem Absender-Ruf schaden.
8. Ergänzen Sie den Spam-Schutz: Honeypot, Ratenbegrenzung, dann bei Bedarf eine CAPTCHA-artige Prüfung.
9. Testen Sie auf der veröffentlichten Seite: absenden, die Datenbank prüfen, Ihren Posteingang und den Spam-Ordner kontrollieren, auf Antworten klicken.

Spam stoppen

Kontaktformulare ziehen Bots an, oft schon wenige Tage nach dem Start. Schichten Sie die Abwehr vom mildesten zum aufdringlichsten Mittel:

1. Honeypot-Feld. Ein für Menschen unsichtbares Feld; Bots füllen es aus. Echte Besucher kostet es nichts.
2. Ratenbegrenzung auf dem Server. Begrenzt, wie viele Nachrichten eine Adresse in einem Zeitraum senden kann.
3. Inhaltsregeln. Nachrichten mit vielen Links ablehnen oder mit leerem oder absurd langem Nachrichtenfeld.
4. Eine CAPTCHA-artige Prüfung, etwa Cloudflare Turnstile oder Google reCAPTCHA. Das Token muss auf Ihrem Server verifiziert werden; eine Prüfung, die nur im Browser läuft, lässt sich umgehen.

Häufige Fehler

• „Gesendet!“ anzeigen, obwohl nichts gesendet wurde. Die Oberfläche meldet Erfolg vor oder unabhängig von der Serverantwort. Warten Sie immer auf den Server.
• Nur E-Mail, keine Datenbank. Ein falsch konfigurierter Schlüssel, und Anfragen verschwinden wochenlang, ohne dass es jemand bemerkt.
• API-Schlüssel im Frontend-Code. Jeder kann ihn nutzen, um in Ihrem Namen E-Mails zu versenden.
• Nicht verifizierte Versanddomain. Benachrichtigungen landen im Spam oder kommen nie an.
• Im Namen der E-Mail-Adresse des Besuchers senden. Verwenden Sie stattdessen Reply-to.
• Keine Längenbegrenzungen. Bots fügen riesige Textblöcke ein.
• Die Live-Seite nie testen. Schlüssel und Domains unterscheiden sich oft zwischen Vorschau und Produktivbetrieb.

Checkliste

• Kurzes Formular mit sichtbaren Beschriftungen und klaren Fehlermeldungen
• Serverseitige Prüfung und Längenbegrenzungen
• Jede Nachricht wird in der Datenbank gespeichert
• Benachrichtigungs-E-Mail von einer verifizierten Domain, mit gesetztem Reply-to
• E-Mail-API-Schlüssel nur als serverseitiges Geheimnis hinterlegt
• Honeypot und Ratenbegrenzung eingerichtet
• Erfolgsmeldung erscheint erst, wenn der Server bestätigt hat
• Datenschutzhinweis verlinkt Ihre Datenschutzerklärung
• Vollständig auf der veröffentlichten Seite getestet, einschließlich des Spam-Ordners

Kontaktformulare in Mythex

In Mythex können Sie das Ganze aus dem Chat bauen. Bitten Sie in demselben Prompt um das Formular und eine Datenbank (oder tippen Sie /database), damit Einsendungen gespeichert bleiben. Mythex hat kein eingebautes Produkt für E-Mail-Versand, daher bringen Sie für Benachrichtigungen einen Anbieter wie Resend, SendGrid oder Postmark mit, hinterlegen den Schlüssel über /secrets oder die Projekteinstellungen und bitten den Agenten, vom Server aus zu senden – siehe E-Mails aus Ihrer App versenden. Bevor Sie sich darauf verlassen, führen Sie App-Tests (/test) für das Formular in der Vorschau aus, veröffentlichen Sie dann und testen Sie auf der Live-URL.

Ein Kontaktformular gehört zu den wichtigsten Bausteinen der meisten Websites für kleine Unternehmen und Landingpages. Prüfen Sie vor dem Start die Sicherheits-Checkliste.

Fragen