Integrationen · approach

Ein HTML-Kontaktformular für statische Websites ohne Backend.

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

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 Static sites.

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.

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

Drei Schritte, vom Start bis zum Ziel.

01

Postfach erstellen

Ein Postfach pro Projekt. Benenne es nach deiner Website und erhalte sofort Formular-URL und Projektadresse. Ohne DNS oder Mailserver.

02

Formular einfügen

Kopiere das Snippet in eine HTML-Seite und ersetze your-form-id. Der Endpunkt braucht nur die Feldnamen name, email und message.

03

Benachrichtigt werden

Füge Discord, Slack, E-Mail oder Webhook hinzu. Neue Nachrichten erscheinen im Postfach und melden sich sofort.

warum Mailcontact

Passt gut zu Static sites.

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.

Deine Adresse bleibt aus dem HTML

Kein mailto:-Link oder verschleierte Spans für Sammler. Besucher sehen das Formular, deine Postfachadresse bleibt privat.

Kein Build-Schritt, kein JavaScript

Einfaches HTML für selbst geschriebene Seiten und jeden Generator. Ohne Bundler, Framework oder script-Tag.

FAQ

Static sites + Mailcontact, beantwortet

Kann ich das Formular an meine Website anpassen?

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.

Wie zeige ich nach dem Absenden eine Dankesnachricht?

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 welchen statischen Hosts funktioniert es?

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.

Gibt es Einsendelimits?

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

Funktioniert auch mit

Ein Postfach für jedes deiner Static sites-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.