Integrationen · static site generator

Ein Eleventy-Kontaktformular ohne eigenes Backend.

Eleventy compiles templates to plain HTML, so a contact form is one include away: point a standard <form> at your mailcontact endpoint and submissions land in your project's inbox, with a notification in Discord, Slack, email, or a webhook. No serverless function, no mail service, no plugin.

Dasselbe HTML-Snippet läuft unverändert in Nunjucks, Liquid, WebC, Markdown und anderen 11ty-Vorlagen. Einmal unter _includes speichern und überall einbinden.

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

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.

_includes/contact-form.njk

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" 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.

Postfach erstellen

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

Include hinzufügen

Speichere als _includes/contact-form.njk und binde {% include "contact-form.njk" %} auf der Kontaktseite ein. Es ist dein Markup mit deinem Website-CSS.

Benachrichtigt werden

Füge Discord, Slack, E-Mail oder Webhook hinzu. Zugestellte Nachrichten erreichen dich in deinen gewohnten Tools.

warum Mailcontact

Passt gut zu Eleventy.

Bleibt eine statische Website

Keine Netlify Functions, Serverless-Verbindung oder eleventy-Plugins. Dein Build bleibt HTML für jeden statischen Host.

Ein Snippet für jede Vorlagensprache

Nunjucks, Liquid, WebC, Markdown: 11ty lässt HTML unverändert. Dasselbe Include funktioniert mit jeder Vorlagen-Engine.

Ein Postfach pro 11ty-Projekt

Eleventy erleichtert kleine Websites. Gib jeder Postfach und Adresse statt privatem Sammelpostfach.

FAQ

Eleventy + Mailcontact, beantwortet

Braucht ein Eleventy-Kontaktformular ein Backend oder eine Serverless-Funktion?

Nein. Das Formular sendet direkt an deinen Mailcontact-Endpunkt. Dieser speichert Nachrichten und sendet Benachrichtigungen. Dein 11ty-Build bleibt vollständig statisch.

Funktioniert das mit jedem Host, etwa GitHub Pages, Netlify oder Cloudflare Pages?

Ja. Der Endpunkt akzeptiert jede Herkunft. Das Formular läuft überall mit Eleventy-Output, auch auf Hosts ohne Formularverarbeitung wie GitHub Pages.

Kann ich das Formular an meine Website anpassen?

Ja, vollständig. Mailcontact empfängt nur den POST. Das Markup oben gehört dir, dein Stylesheet gilt weiterhin. Füge Klassen hinzu, ordne Felder um oder bette es in dein Layout ein.

Wie zeige ich nach dem Absenden eine Erfolgsnachricht?

Nutze das gehostete MailContact-Skript oder MailContact.send() für Versand, Prüfung und Rückmeldungen. Der Endpunkt liefert JSON. Eine konfigurierbare native Weiterleitung gibt es derzeit nicht.

verwandt

Funktioniert auch mit

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