Innerhalb der Pages-Grenzen nutzbar
GitHub Pages führt keinen Backend-Code aus und muss es mit Mailcontact nicht. Der POST geht an unsere Server; dein Repository bleibt vollständig statisch.
Integrationen · hosting platform
Ein Kontaktformular auf GitHub Pages, ohne GitHub Pages zu verlassen.
GitHub Pages liefert nur statische Dateien: keine Funktionen, APIs oder Serververarbeitung. Verbinde deshalb HTML mit einem externen Mailcontact-Endpunkt. Einsendungen landen im Projektpostfach mit Discord-, Slack- oder E-Mail-Meldungen.
Nichts installieren oder bauen. Das Snippet läuft in index.html, Jekyll-Layout oder Include sowie jedem auf gh-pages veröffentlichten Build. Commit, Push, fertig.
Dazu kommt eine echte Empfangsadresse ([email protected]), damit du deine private E-Mail nicht im öffentlichen Repository zeigen musst.
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 GitHub 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.
index.html
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
<input type="text" name="name" placeholder="Your name" />
<input type="email" name="email" placeholder="[email protected]" required />
<textarea name="message" placeholder="What's on your mind?" 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 deinem Repository und erhalte sofort Endpunkt und Projektadresse.
02
Formular committen
Füge das Snippet in index.html, Jekyll-Include oder Kontaktbereich ein. Pushe wie gewohnt auf deinen Pages-Branch.
03
Benachrichtigt werden
Füge Discord, Slack, E-Mail oder Webhook hinzu. Zugestellte Nachrichten erreichen dich in deinen gewohnten Tools.
warum Mailcontact
Passt gut zu GitHub Pages.
Keine E-Mail-Adresse im öffentlichen Repository
Ein mailto:-Link veröffentlicht deine Adresse für Quelltextsammler. Endpunkt und [email protected] halten private E-Mail vollständig aus dem Repository.
Ein Postfach pro veröffentlichtem Repository
Dokumentation, Portfolio oder Projektseite: Jede Pages-Website erhält Postfach und Adresse statt privatem Sammelpostfach.
FAQ
GitHub Pages + Mailcontact, beantwortet
Kann GitHub Pages selbst Formulare verarbeiten?
Nein. GitHub Pages liefert statische Dateien und führt keinen Servercode aus. Es kann keine POST-Anfrage verarbeiten. Formulare müssen daher an einen externen Endpunkt wie Mailcontact senden.
Funktioniert das mit Jekyll auf GitHub Pages?
Ja. Das HTML funktioniert in Jekyll-Layouts, Includes und Markdown-Seiten mit Inline-HTML. GitHubs Jekyll-Build verändert es nicht.
Wie zeige ich nach dem Absenden eine Erfolgsnachricht?
Nutze das gehostete MailContact-Skript für Rückmeldungen und automatische Prüfung oder MailContact.send() im eigenen Handler. Dank offenem CORS funktioniert es auf github.io und eigenen Domains. Eine konfigurierbare native Weiterleitung gibt es derzeit nicht.
Kann ich das Formular an meine Website anpassen?
Ja, vollständig. Es ist dein Markup. Mailcontact stellt nur den Endpunkt. Nutze dein CSS, die Klassen deines Jekyll-Themes oder beliebige andere. Es gibt kein Widget und keinen iframe.
verwandt
Funktioniert auch mit
Ein Postfach für jedes deiner GitHub Pages-Projekte.
Formulare und echte E-Mail-Adresse vereint, mit Benachrichtigungen in deinen Tools. Starte mit einem kostenlosen Konto.
Kostenloses Formular erstellenKeine Kreditkarte nötig. Free umfasst ein Projekt und 50 Formularnachrichten pro Monat.