Integrationen · hosting platform

Kontaktformular auf Cloudflare Pages ohne eigenen Worker.

Cloudflare Pages liefert deine Website aus über 300 Städten aus, nimmt aber keine Formulare an. Kein Netlify-Forms-Gegenstück. Cloudflares Anleitung empfiehlt Drittanbieter. Das Static-Forms-Plugin ist selbst kein Formulardienst: Es leitet POST an eine selbst geschriebene Funktion mit selbst eingerichtetem KV-Namespace.

Mit action auf einen Mailcontact-Endpunkt entfällt diese Schicht: kein Functions-Verzeichnis, KV-Binding, wrangler-Konfiguration oder Worker. Einsendungen landen im Projektpostfach mit Discord, Slack, E-Mail oder Webhook.

Konto erstellen Dokumentation lesen

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 Cloudflare Pages.

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.

public/contact.html

<!-- No functions/ directory. No KV namespace. No wrangler.toml. -->

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What's on your mind?" required></textarea>

  <!-- Bots fill this in. Humans never see it. -->
  <input type="text" name="company_website" type="text" tabindex="-1" autocomplete="off"
      style="position:absolute;left:-10000px" aria-hidden="true" />

  <button type="submit">Send</button>
</form>

so funktioniert es

Drei Schritte, vom Start bis zum Ziel.

Postfach erstellen

Ein Postfach pro Projekt. Benenne es nach deinem Pages-Projekt und erhalte sofort Endpunkt und Projektadresse.

Formular in deine Ausgabe einfügen

Ob HTML, Astro-Build oder React-Bundle: Das Formular ist Markup der Seite. Dein Build-Befehl bleibt gleich.

Wie gewohnt bereitstellen

git push oder wrangler pages deploy. Das Formular funktioniert auf erster Vorschau, jedem Branch-Alias und eigener Domain ohne Umgebungseinrichtung.

warum Mailcontact

Passt gut zu Cloudflare Pages.

Das Static-Forms-Plugin ist kein Formular-Backend

Das Plugin liest Einsendungen und ruft deinen Handler auf. Speicherung, Benachrichtigung, Spam und Fehlerpfade schreibst du selbst. Genau diese eigentliche Arbeit übernimmt es nicht.

Keine zusätzliche Free-Grenze im Blick behalten

Workers berechnen Anfragen und CPU-Zeit. Ein E-Mail-Handler braucht außerdem Mail-API und Schlüssel. Ein externer Endpunkt hat kein Funktionsbudget und keine nachts zu untersuchenden Kaltstartpfade.

Übersteht den Wechsel von Pages zu Workers

Cloudflare lenkt neue Fullstack-Projekte Richtung Workers. Formular-Markup mit externer URL bleibt davon unabhängig, weil keine Plattformbindung migriert werden muss.

FAQ

Cloudflare Pages + Mailcontact, beantwortet

Bietet Cloudflare Pages eine Formularverarbeitung wie Netlify Forms?

Nein. Netlify erkennt beim Deployment ein Formularattribut und speichert Einsendungen. Cloudflare bietet das nicht. Dokumentiert sind das Static-Forms-Plugin mit selbst geschriebenem Handler und Speicheranbindung oder ein externer Formulardienst. Eine Lösung ohne Code bietet die Plattform nicht.

Was ist mit dem Static-Forms-Plugin für Pages Functions?

Es ist ein Baustein, kein fertiges Produkt. Das Plugin fängt POST-Anfragen eines Formulars mit data-static-form-name ab und übergibt sie einem selbst implementierten respondWith-Handler. Speicherung, Benachrichtigung und Spamschutz musst du weiter selbst bauen. Wenn du das willst, hilft das Plugin. Wenn du es vermeiden willst, ist ein Endpunkt der kürzere Weg.

Kann ich Pages Functions weiter für andere Zwecke nutzen?

Ja, ohne Konflikte. Das Formular nutzt action auf eine andere Herkunft. functions/-Verzeichnis, Middleware und Bindings bleiben unberührt. Es ersetzt nur die sonst für das Formular nötige Function.

Funktioniert das Formular in Vorschauen und Branch-Aliasen?

Ja. Der Endpunkt akzeptiert POSTs jeder Domain. *.pages.dev-Vorschauen, Branch-Aliase und eigene Domains senden ohne Umgebungsregeln oder Freigabelisten ins gleiche Postfach.

verwandt

Funktioniert auch mit

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