Integrationen · site builder

Webflow-Einsendungen ohne tarifgebundene Limits.

Webflows native Formulare funktionieren gut, haben aber tarifabhängige Monatslimits. Ein Embed mit eigenem HTML und Mailcontact-Endpunkt umgeht diese Verarbeitung. Einsendungen landen im Projektpostfach mit Discord, Slack, E-Mail oder Webhook.

Gestalte weiter in Webflow. Dein HTML kann w-input und w-button nutzen und bestehende Styles übernehmen. Besucher sehen keinen Unterschied.

Jedes Mailcontact-Postfach hat auch eine echte Adresse ([email protected]). Webflow und andere Projekte bleiben an einem Ort statt in einzelnen Forms-Panels.

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 Webflow.

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.

Embed-Element (Webflow Designer → Add-Panel)

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input class="w-input" type="text" name="name" placeholder="Your name" />
  <input class="w-input" type="email" name="email" placeholder="[email protected]" required />
  <textarea class="w-input" name="message" placeholder="How can we help?" required></textarea>
  <button class="w-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.

Postfach erstellen

Ein Postfach pro Website. Projektname eingeben, sofort Endpunkt und Adresse erhalten. Ohne DNS oder Head-Code.

Embed-Element einfügen

Ziehe im Designer ein Embed an die Formularposition, füge das Snippet ein und veröffentliche. w-input und w-button übernehmen Website-Styles.

Benachrichtigt werden

Füge Discord, Slack, E-Mail oder Webhook hinzu. Nachrichten melden sich ohne Website-Dashboard.

warum Mailcontact

Passt gut zu Webflow.

Wird deinem Kontingent nicht angerechnet

Webflow zählt native Einsendungen derzeit tarifabhängig. Ein HTML-Embed sendet direkt an Mailcontact; Webflow zählt und begrenzt sie nicht.

Im Stil deiner Website

Das Embed gehört dir. Nutze w-input und w-button für bestehende Webflow-Styles oder eigene Klassen mit CSS.

Ein Postfach über Kundenwebsites hinweg

Mehrere Webflow-Websites oder gemischte Stacks? Jedes Projekt bekommt Postfach und Adresse, gemeinsam an einem Ort statt einzelner Forms-Panels.

FAQ

Webflow + Mailcontact, beantwortet

Wie viele Formulareinsendungen erlaubt Webflow?

Native Webflow-Formulare haben zum Zeitpunkt der Erstellung ein vom Website-Tarif abhängiges Monatskontingent. Genaue Zahlen findest du in aktuellen Webflow-Preisen. Eigenes HTML mit Mailcontact-Endpunkt umgeht Webflows Formularverarbeitung; diese Limits gelten dafür nicht.

Brauche ich einen bezahlten Webflow-Tarif für ein Embed-Element?

Webflow erfordert zum Zeitpunkt der Erstellung bezahlte Tarife für eigenen Code einschließlich Embed. Prüfe deinen Tarif zuerst. Erlaubt er Embeds bereits, kostet das Formular nichts extra und verbraucht kein natives Einsendekontingent.

Passt das eingebettete Formular zu meinem Webflow-Design?

Ja, wenn du es festlegst. Gib Inputs die Webflow-Klasse w-input und dem Button w-button für native Webflow-Styles. Oder nutze eigene Klassen und CSS.

Wie zeige ich nach dem Absenden eine Erfolgsnachricht?

Der Endpunkt antwortet bei Erfolg mit JSON ohne Weiterleitung. Nutze das gehostete MailContact-Skript im Embed für Versand, Verifizierung und Rückmeldung auf der Seite. Offenes CORS erlaubt webflow.io-Staging und eigene Domains. Konfigurierbare native Weiterleitungen gibt es derzeit nicht.

verwandt

Funktioniert auch mit

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