Integrationen · static site generator

Ein Jekyll-Kontaktformular ohne Plugin oder Server, für GitHub Pages.

Jekyll erzeugt HTML ohne POST-Empfänger; GitHub Pages führt keinen dafür aus. Verbinde ein HTML-Formular mit Mailcontact. Einsendungen landen im Projektpostfach mit Discord-, Slack-, E-Mail- oder Webhook-Meldungen.

Keine Gemfile-Änderungen, Plugins außerhalb der Pages-Freigabeliste oder JavaScript. Speichere das Formular einmal als Include und füge {% include contact-form.html %} auf Seiten und in Layouts ein.

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

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

<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 Website. Benenne es nach deinem Jekyll-Projekt und erhalte sofort Endpunkt und Projektadresse.

Include hinzufügen

Speichere das Snippet als _includes/contact-form.html und binde es auf Kontaktseite, im Layout oder Footer ein. Dein Markup, dein Theme.

Benachrichtigt werden

Füge Discord, Slack, E-Mail oder Webhook hinzu. Benachrichtigungen kommen in deinen Tools, ohne Dashboard-Prüfen.

warum Mailcontact

Passt gut zu Jekyll.

Mit GitHub Pages kompatibel

GitHub Pages erlaubt nur festgelegte Jekyll-Plugins und keinen Servercode. Ein externer Formular-Endpunkt umgeht beide Grenzen: nichts installieren oder bauen.

Ein Include für jede Seite

Schreibe das Formular einmal in _includes/ und verwende es in Seiten und Layouts. Ändere den Endpunkt in einer Datei für alle Seiten.

Ein Postfach pro Website

Blog, Dokumentation oder Landingpage: Jede Jekyll-Website bekommt Postfach und Adresse statt privatem Sammelpostfach.

FAQ

Jekyll + Mailcontact, beantwortet

Kann Jekyll selbst Formulare verarbeiten?

Nein. Jekyll erzeugt statisches HTML beim Build. Es gibt keinen Serverprozess für POST. Du brauchst einen externen Endpunkt wie Mailcontact, um Einsendungen anzunehmen und zu speichern.

Funktioniert das auf GitHub Pages?

Ja. GitHub Pages führt keinen Servercode aus und erlaubt nur ausgewählte Plugins. Dieses Formular braucht beides nicht: Es sendet aus dem Besucherbrowser direkt an Mailcontact.

Wie zeige ich nach dem Senden eine Dankesnachricht?

Nutze das gehostete MailContact-Skript für Rückmeldungen im Formular und automatische Prüfung oder MailContact.send() im eigenen Handler. Eine konfigurierbare native Weiterleitung gibt es derzeit nicht.

Kann ich das Formular an mein Jekyll-Theme anpassen?

Ja. Das HTML im Include lässt sich mit Minima, Chirpy oder eigenen Themes wie der Rest deiner Website gestalten. Ergänze Klassen und CSS wie gewohnt.

verwandt

Funktioniert auch mit

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