Zum Inhalt springen
FFormhook
← Zurück zum Blog

Blog

So fügen Sie GitHub Pages ein Kontaktformular hinzu

· 3 Min. Lesezeit

GitHub Pages liefert nur statische Dateien aus - kein PHP, kein Server-Code, keine Möglichkeit, ein Formular-POST zu empfangen. Ein Kontaktformular braucht also einen externen Endpunkt, an den es senden kann. Hier sind die drei echten Optionen - und die Version, die eine Minute dauert.

Option 1: ein Formular-Backend (empfohlen)

Richten Sie die action Ihres Formulars auf einen gehosteten Formular-Endpunkt:

<form action="https://formhook.app/f/fh_your-key" method="POST">
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>

Committen, pushen, fertig. Einsendungen landen in einem Dashboard und melden sich per Push-Benachrichtigung auf Ihrem Handy. Spam wird durch einen Honeypot und Rate-Limits herausgefiltert, bevor er Sie überhaupt erreicht. Das funktioniert identisch für einfache HTML-Repos und Jekyll-Seiten (der native Generator von GitHub Pages - siehe die Jekyll-Anleitung für ein themenfähiges Include, oder die einfache HTML-Anleitung).

Vorteile: ein Attribut, kein JavaScript nötig, Spam wird gehandhabt, Einsendungen werden gespeichert.
Nachteile: es ist ein Drittanbieter-Dienst - prüfen Sie also die Limits der kostenlosen Stufe und die Aufbewahrungsrichtlinie des Anbieters, für den Sie sich entscheiden. Formhooks kostenlose Stufe speichert Einsendungen für immer.

Option 2: ein mailto:-Link

<a href="mailto:you@example.com">Email me</a>

Ehrlich, aber schwach: Es setzt voraus, dass der Besucher einen konfigurierten Mail-Client hat (auf dem Desktop zunehmend nicht der Fall), legt Ihre Adresse für Scraper offen, bietet keinerlei Spam-Schutz und sagt Ihnen nichts über die Abbruchrate. In Ordnung für eine Hobby-README-Seite; teuer für alles, bei dem Anfragen bares Geld bedeuten. (Mehr zu diesem Kompromiss in mailto vs. Kontaktformular.)

Option 3: eine serverlose Funktion an anderer Stelle

Sie können die Seite auf GitHub Pages belassen und das POST mit einem Cloudflare Worker oder Ähnlichem empfangen. Das funktioniert - aber jetzt schreiben und warten Sie den Empfänger selbst: Validierung, Spam-Filterung, Speicherung, E-Mail-Zustellung und CORS. Sie haben genau das Backend wieder eingeführt, das GitHub Pages Ihnen zu vermeiden erlaubte. Vertretbar, wenn Sie daran Freude haben; unnötig, wenn nicht.

Das AJAX-Upgrade (optional)

Das einfache HTML-Formular verlässt beim Absenden die Seite. Um auf der Seite zu bleiben:

<script>
document.querySelector("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(e.target.action, {
    method: "POST",
    body: new FormData(e.target),
    headers: { Accept: "application/json" },
  });
  e.target.outerHTML = res.ok
    ? "<p>Thanks - message sent.</p>"
    : "<p>Something went wrong. Please email us directly.</p>";
});
</script>

Kein Build-Schritt, keine Abhängigkeiten - funktioniert in einem reinen GitHub-Pages-Repo.

Hinweis zu benutzerdefinierten Domains

Wenn Ihre Pages-Seite auf einer eigenen Domain läuft, stellen Sie sicher, dass die Pro-Formular-Einstellungen Ihres Formular-Dienstes (etwa eine CORS-Allowlist) diese Domain enthalten, nicht nur username.github.io. Bei Formhook ist das ein einzelnes Feld in den Formular-Einstellungen.

Das ist die ganze Geschichte: GitHub Pages kümmert sich um Ihre Seite, ein Formular-Endpunkt übernimmt die eine Sache, die es nicht kann. Kostenlos starten - und das Formular ist live, bevor Ihr nächster git push fertig ist.

Ein funktionierendes Formular in einer Zeile

In der EU gehostet, Einsendungen für immer aufbewahrt, Push-Benachrichtigungen in jeder Stufe.

Kostenlos starten

Keine Kreditkarte · Dokumentation lesen

Weiterlesen