Den api/-Ordner ganz sparen
Üblich sind Serverless-Funktion, Mail-SDK und API-Schlüssel in Umgebungsvariablen. Eine action ersetzt alles: nichts schreiben, bereitstellen oder rotieren.
Integrationen · hosting platform
Vercel hat kein eingebautes Formularprodukt. Der übliche Rat ist Serverless plus Mail-API. Überspringe beides: HTML mit Mailcontact-Endpunkt ergibt Projektpostfach und Discord-, Slack-, E-Mail- oder Webhook-Meldungen.
Eine form action funktioniert mit Next.js, Astro, SvelteKit oder statischem HTML auf Vercel. Seiten bleiben statisch oder ISR, ohne Funktionsaufruf oder Mailanbieterkonto.
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">
<input type="text" name="name" placeholder="Your name" />
<input type="email" name="email" placeholder="[email protected]" required />
<textarea name="message" placeholder="What's on your mind?" 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 deinem Deployment und erhalte sofort Endpunkt und Projektadresse.
Füge es in statische Seite, Next.js-Komponente oder Astro-Vorlage ein. Vercel veröffentlicht es nach Push wie jede Änderung.
Füge Discord, Slack, E-Mail oder Webhook hinzu. Zugestellte Nachrichten erreichen dich in deinen gewohnten Tools.
warum Mailcontact
Üblich sind Serverless-Funktion, Mail-SDK und API-Schlüssel in Umgebungsvariablen. Eine action ersetzt alles: nichts schreiben, bereitstellen oder rotieren.
POSTs gehen an Mailcontact statt dein Deployment. Kontaktanfragen zählen nicht zu deinen Funktionsaufrufen. Kein Kaltstart zwischen Besucher und Nachricht.
Der Endpunkt akzeptiert jede Herkunft: *.vercel.app-Vorschauen und Produktionsdomain ohne Umgebungsregeln oder Variablen.
FAQ
Nein. Zum Zeitpunkt der Erstellung hat Vercel kein Formularprodukt. Üblich sind Serverless-Funktion und E-Mail-API. Mit Mailcontact sendet das Formular direkt ins Projektpostfach und deine Website bleibt statisch.
Ja. Der Endpunkt akzeptiert POSTs jeder URL. Dasselbe Snippet läuft auf Preview-URLs, Produktionsdomain und localhost.
Nutze das gehostete MailContact-Skript oder MailContact.send() im eigenen Handler und zeige eine Dankesnachricht auf der Seite. Eine konfigurierbare native Weiterleitung gibt es derzeit nicht.
Der Endpunkt begrenzt auf 20 Anfragen pro Minute und IP mit höchstens 64 KB Inhalt, großzügig für Kontaktformulare. Das schützt vor einfacher Überflutung.
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.