Integrationen · hosting platform

Ein Formular für deine Netlify-Website ohne Netlify-Bindung.

Bei Netlify ist Forms naheliegend: data-netlify="true" ergänzen, Einsendungen im Dashboard sehen. Zum Zeitpunkt der Erstellung ungefähr 100 monatlich kostenlos, darüber kostenpflichtig. Wechselgründe: Hostbindung, übersehene Dashboard-Meldungen und getrennte Einsendelisten je Website.

Mailcontact ist hostunabhängig. Dein Formular sendet an HTTPS ohne Build-Erkennung, data-netlify oder verborgenes form-name. Dasselbe Markup läuft heute auf Netlify, morgen auf Vercel, Cloudflare Pages oder VPS. Jedes Projekt erhält zudem eine sofort aktive Adresse wie [email protected] ohne DNS sowie Meldungen per Discord, Slack, E-Mail oder Webhook.

Bewusst schlank: Ein Postfach pro Projekt mit Benachrichtigungen statt Helpdesk. Keine Tickets, SLAs oder Neueinrichtung beim Hostwechsel.

empfohlene Einrichtung

Nutze das MailContact-Skript mit deinem eigenen Design.

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.

contact.html
<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

Alternative: eine direkte Integration für Netlify.

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.

contact.html
<!-- No data-netlify attribute, no hidden form-name field -->
<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="How can we help?" 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

Drei Schritte, vom Start bis zum Ziel.

01

Postfach erstellen

Ein Postfach pro Projekt. Benenne es nach deiner Website und erhalte sofort Endpunkt und Projektadresse.

02

Formular damit verbinden

Ersetze data-netlify="true" durch die action-URL oben und veröffentliche. Ohne Build-Plugin, Formularerkennung oder Dashboard-Schalter.

03

Benachrichtigt werden

Füge Discord, Slack, E-Mail oder Webhook hinzu. Nachrichten melden sich dort, wo du bist, statt im Dashboard zu warten.

warum Mailcontact

Passt gut zu Netlify.

Keine Bindung beim Hostwechsel

Netlify Forms braucht dessen Build-Erkennung; beim Umzug baust du die Verarbeitung neu. Eine Mailcontact-URL funktioniert auf Vercel oder Cloudflare Pages unverändert.

Eine echte E-Mail-Adresse, mehr als ein Formular

Netlify Forms empfängt nur Formulare. Mailcontact ergänzt je Projekt eine Adresse wie [email protected]. Beides landet im selben Postfach.

Ein Postfach über alle Hosts hinweg

Projekte auf Netlify, Vercel oder GitHub Pages? Jedes erhält ein Postfach an einem Ort statt verstreuter Host-Dashboards.

FAQ

Netlify + Mailcontact, beantwortet

Ist Netlify Forms kostenlos?

Zum Zeitpunkt der Erstellung bietet Netlify Forms ungefähr 100 kostenlose Einsendungen pro Monat, danach ein bezahltes Zusatzpaket. Für langfristig bei Netlify gehostete Websites mit wenig Anfragen ist das vernünftig. Der Nachteil: Formularverarbeitung bleibt an den Host gebunden.

Was passiert mit meinem Formular, wenn ich Netlify verlasse?

Bei Netlify Forms enden Einsendungen, sobald deine Website anderswo läuft, da die Verarbeitung von Netlifys Build abhängt. Mailcontact nutzt einen externen Endpunkt. Dasselbe Markup funktioniert nach einem Hostwechsel unverändert.

Brauche ich ein data-netlify-Attribut oder ein verborgenes form-name-Feld?

Nein. Mailcontact erkennt das Formular über die Endpunkt-URL. email und message sind Pflicht, name und subject optional; company_website muss vorhanden und leer sein. CORS ist offen. Daher funktioniert es auch in Branch-Deployments und Vorschauen ohne zusätzliche Einrichtung.

Wie zeige ich nach dem Senden eine Erfolgsnachricht?

Nutze das gehostete MailContact-Skript oder MailContact.send() im eigenen Handler, um Besucher auf der Seite zu halten und Erfolg direkt anzuzeigen. Eine konfigurierbare native Weiterleitung gibt es derzeit nicht.

verwandt

Funktioniert auch mit

Ein Postfach für jedes deiner Netlify-Projekte.

Formulare und echte E-Mail-Adresse vereint, mit Benachrichtigungen in deinen Tools. Starte mit einem kostenlosen Konto.

Kostenloses Formular erstellen

Keine Kreditkarte nötig. Free umfasst ein Projekt und 50 Formularnachrichten pro Monat.