Hugo

Hugo erzeugt einfaches HTML, und ein einfacher Formular-POST ist alles, was Ikiform braucht, also musst du kein JavaScript hinzufügen. Der einzige Hugo-spezifische Haken ist Markdown: Hugos Renderer entfernt rohes HTML aus Inhaltsdateien, solange du markup.goldmark.renderer.unsafe nicht einschaltest, und ein eingefügtes Formular wird zu <!-- raw HTML omitted -->. Ein Shortcode hält das HTML stattdessen in einem Template.

Einrichten

1. Formular-ID zu deiner Config hinzufügen

   baseURL = "https://example.com/"
   
   [params.ikiform]
   formId = "frm_xxxxxxxxxxxxxxxx"
   thanks = "/thanks/"

   baseURL muss deine echte https:-Adresse sein. Das Partial macht damit aus thanks eine absolute URL, und Ikiform folgt nur https:-Weiterleitungen.

2. Partial erstellen

   {{ $id := .id | default site.Params.ikiform.formId }}
   {{ $thanks := .thanks | default site.Params.ikiform.thanks }}
   <form class="ikiform" action="https://ikiform.com/f/{{ $id }}" method="post">
     <label>Email <input name="email" type="email" autocomplete="email" required></label>
     <label>Message <textarea name="message" rows="5"></textarea></label>
     {{ with .subject }}<input type="hidden" name="_subject" value="{{ . }}">{{ end }}
     {{ with $thanks }}<input type="hidden" name="_redirect" value="{{ . | absURL }}">{{ end }}
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
     <button type="submit">{{ .button | default "Send" }}</button>
   </form>

   Ruf es immer mit einem dict auf, auch wenn es leer ist. Jeder Schlüssel ist optional und fällt auf die Site-Params zurück.

3. In einen Shortcode packen

   {{ partial "ikiform-form.html" (dict "id" (.Get "id") "subject" (.Get "subject") "button" (.Get "button")) }}

   Hugo 0.146 hat Templates nach layouts/_partials und layouts/_shortcodes verschoben. Nutze bei älteren Versionen layouts/partials und layouts/shortcodes.

4. Verwenden

   In einer beliebigen Inhaltsdatei:

   ---
   title: Contact
   ---
   
   Questions about pricing? Write to us.
   
   {{< ikiform subject="Pricing question" >}}

   Oder in einem Layout, für ein Formular auf jeder Seite:

   <footer>
     {{ partial "ikiform-form.html" (dict "subject" "Footer enquiry") }}
   </footer>

Füge für die Weiterleitung eine Seite content/thanks.md hinzu. Ikiform folgt _redirect nur, wenn das Formular erlaubte Domains hat, die deine Site enthalten; ohne sie sehen Besucher die Danke-Seite von Ikiform. Siehe Regeln für _redirect.

Erlaubte Domains

Liste deine Produktionsdomain auf und jeden Ort, an dem du eine Vorschau der gebauten Site ansiehst.

• Füge niemals netlify.app, pages.dev oder github.io allein hinzu. Jede Site auf diesem Host würde passen, auch die anderer Leute.

Test-Checkliste

1. Führe hugo server aus, öffne die Seite und sieh dir den Quelltext an. Du solltest das <form> sehen, nicht <!-- raw HTML omitted -->.
2. Sende lokal mit localhost in den erlaubten Domains ab. Du landest auf der Danke-Seite von Ikiform, weil absURL eine http://localhost-Adresse liefert und nur https:-Weiterleitungen befolgt werden.
3. Deploye eine Preview, sende von dort ab und prüfe, dass die Einsendung in Ikiform gelistet und nicht als Spam markiert ist.
4. Sende auf deiner Produktionsdomain ab und prüfe, dass du auf /thanks/ landest.

Fehlerbehebung

Verwandte Themen

• JekyllEin Include und die Einrichtung für GitHub Pages.
• EleventyEin Shortcode für Nunjucks, Liquid und Markdown.
• HTML-FormulareWeiterleitungen, reservierte Felder und der Honeypot.
• Erlaubte DomainsWie Origins abgeglichen werden und was eine Abweichung bewirkt.