Das Backend, das du nicht bereitstellen musst
Dein Host liefert weiter statische Dateien. Mailcontact übernimmt POST, Validierung, Speicherung und Benachrichtigung: das fehlende dynamische Stück.
Integrationen · approach
Ergänze statische Websites ohne eigenes Backend um ein Formular. Setze action auf einen Endpunkt, der POST annimmt. Jede Einsendung landet im Projektpostfach mit Discord, Slack, E-Mail oder Webhook. Deine Website bleibt ein Dateiordner.
Ein mailto:-Link scheitert doppelt: Er veröffentlicht die Adresse für Spamsammler und braucht ein eingerichtetes Mailprogramm. Sonst öffnet sich nichts oder eine ungenutzte App, und die Nachricht geht verloren.
Ein Endpunkt löst beides: Keine Adresse im Markup, normaler HTTP-POST in jedem Browser. Mailcontact validiert, speichert und benachrichtigt. Gleich für eigenes HTML, Generator-Output oder übernommene Altseiten.
empfohlene Einrichtung
Füge dieses HTML auf deiner Website ein oder verwende den Formulargenerator. Ersetze den Formularlink durch deinen. Das gehostete Skript fügt die verborgene Prüfung ein, übernimmt Versand und Verifizierung und bewahrt Entwürfe bei Fehlern. Du bestimmst HTML und CSS. Free-Formulare zeigen einen sichtbaren Link „Processed by mailcontact.app“, Pro und Plus nicht. Die Rückmeldung folgt der Browsersprache. Setze data-mailcontact-language="fr" am Formular, um Französisch festzulegen.
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="de" data-mailcontact-language="de">
<input type="hidden" name="_language" value="de" />
<fieldset>
<legend>Kontaktiere uns</legend>
<label>
Name (optional)
<input name="name" type="text" autocomplete="name" maxlength="200" />
</label>
<label>
E-Mail
<input name="email" type="email" autocomplete="email" maxlength="320" required />
</label>
<label>
Nachricht
<textarea name="message" rows="5" maxlength="5000" required></textarea>
</label>
<noscript>
<div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
<label>Website
<input name="company_website" type="text" tabindex="-1" autocomplete="off" />
</label>
</div>
</noscript>
<button type="submit">Nachricht senden</button>
</fieldset>
<p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Für Komponenten mit eigenem Submit-Handler lade dasselbe Skript und nutze MailContact.prepare(form) und MailContact.send() statt der automatischen Markierung. Siehe die Referenz für eigene Oberflächen für Laden, Rückmeldungen und Quellenhinweis bei Free.
das Snippet
Dieses Beispiel sendet direkt an die API. Behalte das erforderliche company_website Feld vorhanden und leer. Native Einsendungen öffnen bei Erfolg JSON oder bei Bedarf eine Prüfseite. Eigene Skripte ohne Verifizierung senden verdächtige Nachrichten zur Prüfung in Spam; deutlicher Spam wird ebenfalls ohne Benachrichtigung und Kontingentverbrauch zurückgehalten. Eine Erfolgsantwort bestätigt den Empfang einschließlich Prüfung oder das stille Verwerfen eines ausgefüllten Prüffelds. Siehe Spamschutz für das vollständige Verhalten.
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
<label for="name">Name</label>
<input id="name" type="text" name="name" />
<label for="email">Email</label>
<input id="email" type="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send</button>
<input name="company_website" type="text" tabindex="-1" autocomplete="off"
style="position:absolute;left:-10000px" aria-hidden="true" />
</form>so funktioniert es
Ein Postfach pro Projekt. Benenne es nach deiner Website und erhalte sofort Formular-URL und Projektadresse. Ohne DNS oder Mailserver.
Kopiere das Snippet in eine HTML-Seite und ersetze your-form-id. Der Endpunkt braucht nur die Feldnamen name, email und message.
Füge Discord, Slack, E-Mail oder Webhook hinzu. Neue Nachrichten erscheinen im Postfach und melden sich sofort.
warum Mailcontact
Dein Host liefert weiter statische Dateien. Mailcontact übernimmt POST, Validierung, Speicherung und Benachrichtigung: das fehlende dynamische Stück.
Kein mailto:-Link oder verschleierte Spans für Sammler. Besucher sehen das Formular, deine Postfachadresse bleibt privat.
Einfaches HTML für selbst geschriebene Seiten und jeden Generator. Ohne Bundler, Framework oder script-Tag.
FAQ
Ja, vollständig. HTML und CSS gehören dir. Der Endpunkt erwartet nur die Feldnamen: email und message sind Pflicht, name und subject optional; company_website muss vorhanden und leer sein. Alles andere im Markup bestimmst du.
Eine native Formulareinsendung zeigt derzeit die JSON-Antwort des Endpunkts. Für die beste Nutzererfahrung nutze das gehostete MailContact-Skript: Es sendet die Felder, übernimmt die Verifizierung und zeigt Rückmeldungen direkt im Formular. Eine konfigurierbare Weiterleitung für native Einsendungen gibt es derzeit nicht.
Mit allen: GitHub Pages, Netlify, Vercel, Cloudflare Pages, einem S3-Bucket oder nginx, das einen Ordner ausliefert. Das Formular sendet an die Mailcontact-Server. Anfragen jeder Herkunft werden angenommen; auf dem Host musst du nichts einrichten.
Free enthält ein Projekt, ein Formular und 50 Einsendungen pro Monat mit Benachrichtigungszielen. Pro ergänzt Empfangsadressen, zehn Projekte und 1.000 Nachrichten pro Monat für das gesamte Konto. Formularanfragen sind auf 20 pro Minute und IP begrenzt.
verwandt
Formulare und echte E-Mail-Adresse vereint, mit Benachrichtigungen in deinen Tools. Starte mit einem kostenlosen Konto.
Kostenloses Formular erstellenKeine Kreditkarte nötig. Free umfasst ein Projekt und 50 Formularnachrichten pro Monat.