Hugo

Hugo builds plain HTML, and a plain form post is all Ikiform needs, so there is no JavaScript to add. The one Hugo-specific catch is Markdown: Hugo's renderer drops raw HTML from content files unless you turn on markup.goldmark.renderer.unsafe, and a pasted form turns into <!-- raw HTML omitted -->. A shortcode keeps the HTML in a template instead.

Set it up

1. Add the form id to your config

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

   baseURL must be your real https: address. The partial turns thanks into an absolute URL with it, and Ikiform only follows https: redirects.

2. Create the partial

   {{ $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>

   Always call it with a dict, even an empty one. Every key is optional and falls back to the site params.

3. Wrap it in a shortcode

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

   Hugo 0.146 moved templates to layouts/_partials and layouts/_shortcodes. On older versions, use layouts/partials and layouts/shortcodes.

4. Use it

   In any content file:

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

   Or in a layout, for a form on every page:

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

Add a content/thanks.md page for the redirect. Ikiform follows _redirect only when the form has allowed domains that include your site; without them, visitors see Ikiform's thank-you page. See Rules for _redirect.

Allowed domains

List your production domain plus every place you preview the built site.

• Never add netlify.app, pages.dev or github.io on its own. Every site on that host would match, including other people's.

Test checklist

1. Run hugo server, open the page and view the source. You should see the <form>, not <!-- raw HTML omitted -->.
2. Submit locally with localhost in allowed domains. You'll land on Ikiform's thank-you page, because absURL gives an http://localhost address and only https: redirects are followed.
3. Deploy a preview, submit from it, and confirm the submission is listed in Ikiform and not marked spam.
4. Submit on your production domain and confirm you land on /thanks/.

Troubleshooting

Related

• JekyllAn include, and GitHub Pages setup.
• EleventyA shortcode for Nunjucks, Liquid and Markdown.
• HTML formsRedirects, reserved fields and the honeypot.
• Allowed domainsHow origins are matched, and what a mismatch does.