Skip to content
Formwire
Framework guide

Add a contact form to a Hugo site

Hugo builds plain HTML, so a contact form posts to Formwire and the site stays static. This guide puts the form in a shortcode you can drop into any Markdown page.

4 min read

The form

Replace YOUR-ACCESS-KEY with the key from your form's page. The highlighted line is the one that points the form at Formwire.

layouts/shortcodes/contact-form.html 

            1
            {{/* layouts/shortcodes/contact-form.html */}}
          
            2
            <form action="https://formwire.io/submit" method="POST">
          
            3
              <input type="hidden" name="access_key" value="YOUR-ACCESS-KEY" />
          
            4
              <input type="hidden" name="redirect" value="https://example.com/thanks" />
          
            5
              <input type="text" name="fax" tabindex="-1" autocomplete="off" style="display:none" />
          
            6
             
          
            7
              <label for="name">Name</label>
          
            8
              <input id="name" type="text" name="name" required />
          
            9
             
          
            10
              <label for="email">Email</label>
          
            11
              <input id="email" type="email" name="email" required />
          
            12
             
          
            13
              <label for="message">Message</label>
          
            14
              <textarea id="message" name="message" rows="5" required></textarea>
          
            15
             
          
            16
              <button type="submit">Send</button>
          
            17
            </form>

Steps

  1. 1

    Create a form and copy its access key

    Sign up at app.formwire.com and create a form. Your sign-in address receives its submissions from the start. The access key is on the form's Settings tab, under General.

  2. 2

    Add the shortcode

    Create layouts/shortcodes/contact-form.html with the code above and replace YOUR-ACCESS-KEY with your key. A shortcode keeps the form in one file, so every page that uses it stays in step.

  3. 3

    Use it in a page

    Call the shortcode from a content file. Hugo renders the HTML in place.

    markdown 
    
            1
            ---
          
            2
            title: "Contact"
          
            3
            ---
          
            4
             
          
            5
            Send us a message and we reply within one working day.
          
            6
             
          
            7
            {{< contact-form >}}
  4. 4

    Add the thank-you page

    Create content/thanks.md and set the hidden redirect field to its full URL, for example https://example.com/thanks/. Hugo adds the trailing slash by default, so match it.

  5. 5

    Send a test submission

    Open the page with hugo server, fill the form in and send it. The submission appears in the form's inbox in the dashboard within a few seconds and the notification email follows, with Reply-To set to the address the visitor typed.

Notes for Hugo

  • Put the key in hugo.toml under [params] as formwireKey and read it in the shortcode with {{ .Site.Params.formwireKey }} if you reuse the shortcode across sites.
  • Hugo's Markdown renderer leaves raw HTML out unless unsafe = true is set; the shortcode avoids that setting because it renders as a template, not as Markdown.
  • Themes that ship a contact form for Netlify Forms or Formspree usually have an action URL in their partial. Change it to the Formwire endpoint and add the access_key field.

Questions

Can I put the form straight in a Markdown file instead of a shortcode?

Yes, if markup.goldmark.renderer.unsafe is true in your config. The shortcode is the usual route because it keeps raw HTML out of content files and works with the default settings.

Is the access key safe to put in client-side code?

Yes. The access key is a public ID that can only deliver submissions to the inbox you verified. It cannot read submissions or change settings, and you can rotate it from the form's settings if it is ever abused.

How does the form stop spam without a captcha?

The hidden fax field is a honeypot: a submission that fills it in goes to the Spam folder and nobody is emailed. A spam filter and rate limits also run on every form. Settings, Spam & security has the filter level, and on Pro, allowed domains.

Can I keep visitors on the page instead of redirecting?

Yes. Remove the redirect field and submit the form with fetch and an Accept: application/json header. The response is JSON with success and data.submission_id, and you show your own thank-you message. The React, Vue and Svelte guides do this.

Related guides

All guides