Integrationen · static site generator

Ein Hugo-Kontaktformular ohne Serverlaufzeit.

Hugo has no server runtime: it compiles your whole site to static HTML at build time, so there's nothing running to receive a form submission. Point a plain <form> at your mailcontact endpoint instead 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 Hugo module.

Hugo-Vorlagen liefern HTML. Ein Partial unter layouts/partials/contact-form.html wird mit {{ partial "contact-form.html" . }} in Seiten, Layouts und Shortcodes eingebunden. Einmal schreiben, überall nutzen.

Die fertige Website besteht aus Dateien. Das Formular funktioniert bei jedem statischen Host: GitHub Pages, Cloudflare Pages, Netlify oder S3 hinter einem CDN.

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

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.

layouts/partials/contact-form.html
{{/* layouts/partials/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.

01

Postfach erstellen

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

02

Partial hinzufügen

Speichere das Snippet als layouts/partials/contact-form.html und binde {{ partial "contact-form.html" . }} auf der Kontaktseite oder im Layout ein. Gestalte es mit deinem Theme-CSS.

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

Keine zusätzliche Serverlaufzeit

Hugo erstellt statische Dateien ohne POST-Laufzeit. Mit externem Endpunkt brauchst du keine Serverless-Funktion nur für ein Formular.

Ein Partial für jede Vorlage

Definiere contact-form.html einmal und binde es mit {{ partial }} in Seiten, Listen oder Shortcodes ein. Eine Änderung aktualisiert jede Seite.

Läuft überall, wo Hugo läuft

Das Formular gehört zum statischen Output und zieht mit zu GitHub Pages, Cloudflare Pages, Netlify oder S3. Keine hostspezifische Formularfunktion nötig.

FAQ

Hugo + Mailcontact, beantwortet

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

Nein. Hugo erstellt nur statisches HTML. Dein Formular sendet direkt an den Mailcontact-Endpunkt, der Nachrichten speichert und Benachrichtigungen versendet. Auf deiner Seite läuft nichts.

Funktioniert es auf GitHub Pages, Cloudflare Pages oder S3?

Ja. Der Endpunkt akzeptiert jede Herkunft. Das Formular läuft überall mit Hugo-Output, auch auf GitHub Pages oder einfachen S3-Buckets.

Kann ich das Formular an mein Hugo-Theme anpassen?

Ja, vollständig. Mailcontact empfängt nur den POST. Das Markup im Partial gehört dir, dein Theme-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 wie {"ok": true}. Eine konfigurierbare native Weiterleitung gibt es derzeit nicht.

verwandt

Funktioniert auch mit

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