Creating a Form In Hugo Using Shortcodes

Hugo is a great tool.

Writing posts in Markdown is great. Having your site load incredibly quickly is great. Caching a static site is a dream. There’s just one place where static sites generated by tools like Hugo fall flat: forms. With static site, there’s no backend to send your data to.

So, how can you build something like a contact form (or any form, really) in Hugo? How do you keep your site simple and fast, but still give your users the ability to submit forms?

What’s more, what do you do if you want an email every time the user submits a form? Or if you want every form submit to create a Trello card, post in Slack, or show up in Salesforce?

The solution

This problem is exactly why we built FormKeep.

FormKeep provides form backends to designers and developers like you.

Setup is incredibly fast. Simply set the action attribute on your form tag to FormKeep, and you can start making submissions. It’s pretty ridiculously easy, actually. There’s no JavaScript and no iframes.

Since we’re very technical ourselves, we wanted a place where we could send our form data, but let us retain complete control over our markup and styles. It was this requirement that told us we needed an alternative to Wufoo. Ever tried to style an embedded Wufoo form? Not fun.

Here’s how to use FormKeep to add a form to a Hugo site using a custom Shortcode. If you want to just copy and paste a form into your site you can also do that, see the Jekyll guide for an example of that.

Code for a contact form on Hugo

Here’s the process:

1. Create two custom Shortcodes

See the Hugo Shortcode Documentation for detailed instructions, but we’re going to create two shortcodes formkeep and formkeep_extended for your use in your Hugo site. The first once captures just an email address, and the formkeep_extended version allows you to capture additional form fields. Here’s some examples in action:

{{< formkeep exampletoken >}}

{{< formkeep exampletoken "Contact Us" "https://example.com/thanks-we-will-be-in-contact-soon">}}

{{< formkeep_extended exampletoken >}}
  <input type="text" name="name" placeholder="Your Name">
{{</ formkeep_extended >}}

You can specify the FormKeep form id to replace the sample value exampletoken, optionally a redirection url to send a customer after they submit their data, and rename the button.

2. Create the < formkeep > shortcode

In your Hugo site create a new file called /layouts/shortcodes/formkeep.html and copy this code into that file.

<!-- more info at https://support.formkeep.com/creating-a-form-in-hugo-using-shortcodes -->
{{ $id := default "exampletoken" (.Get 0) }}{{ $button_name := default "Submit" (.Get 1) }}{{ $redirect := .Get 2 }}
<form accept-charset="UTF-8" action="https://formkeep.com/f/{{ $id }}" method="POST">
  <input type="hidden" name="utf8" value="✓">
  {{ if $redirect }}<input type="hidden" name="_redirect_url" value="{{ $redirect }}"> {{ end }}
  <input type="email"  name="email" placeholder="name@example.com">
  <button type="submit">{{ $button_name }}</button>
</form>

3. Create the < formkeep_extended > shortcode

In your Hugo site create a new file called /layouts/shortcodes/formkeep_extended.html and copy this code into that file.

<!-- more info at https://support.formkeep.com/creating-a-form-in-hugo-using-shortcodes -->
{{ $id := default "exampletoken" (.Get 0) }}{{ $button_name := default "Submit" (.Get 1) }}{{ $redirect := .Get 2 }}
<form accept-charset="UTF-8" action="https://formkeep.com/f/{{ $id }}" method="POST">
  <input type="hidden" name="utf8" value="✓">
  {{ if $redirect }}<input type="hidden" name="_redirect_url" value="{{ $redirect }}"> {{ end }}
  <input type="email"  name="email" placeholder="name@example.com">
  {{.Inner}}
  <button type="submit">{{ $button_name }}</button>
</form>

4. Create an account on FormKeep.

Don’t worry, account creation is super fast, literally 15 seconds or so.

5. Create your form endpoint on FormKeep.

All that’s required is a name for your form. You specify a name, and FormKeep will provide a unique string to identify your form.Now you’re ready to use the shortcode in your Hugo site. There’s three common use cases described below.

6. Fast and simple capture an email

Add this shortcode on whatever page you want a contact form to apprear. Just replace the exampletoken below with the the form id of your new form from your FormKeep account.

{{< formkeep exampletoken >}}

This will automatically generate this html on your site:

<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST">
  <input type="hidden" name="utf8" value="✓">
  <input type="email"  name="email" placeholder="name@example.com">
  <button type="submit">Submit</button>
</form>

7. Custom Button and Redirect Example

Just replace the exampletoken below with the the form id of your new form from your FormKeep account.

{{< formkeep exampletoken "Contact Us" "https://example.com/thanks-we-will-be-in-contact-soon">}}

This will automatically generate this html on your site. It’s renamed the submit button to say ‘Contact Us’ and after the form is successfully sent to be saved on formkeep.com, the user will be redirected back to your website at https://example.com/thanks-we-will-be-in-contact-soon.

<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST">
  <input type="hidden" name="utf8" value="✓">
  <input type="hidden" name="_redirect_url" value="https://example.com/thanks-we-will-be-in-contact-soon">
  <input type="email"  name="email" placeholder="name@example.com">
  <button type="submit">Contact Us</button>
</form>

8. Custom Form Example

Just replace the exampletoken below with the the form id of your new form from your FormKeep account. And then add add any additional HTML form fields you’d like to add.

{{< formkeep_extended exampletoken >}}
  <input type="text" name="name" placeholder="Your Name">
  <input type="tel" name="phone" placeholder="123-555-1234">
{{</ formkeep_extended >}}

This will automatically generate this html on your site. Here’s we’ve been able to add two more fields to capture a name and a phone number. You can add any fields you’d like to capture between the formkeep_extended and they’ll be captured and saved on formkeep.com.

<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST">
  <input type="hidden" name="utf8" value="✓">
  <input type="email"  name="email" placeholder="name@example.com">
  <input type="text" name="name" placeholder="Your Name">
  <input type="tel" name="phone" placeholder="123-555-1234">
  <button type="submit">Submit</button>
</form>

9. Optional: Tell FormKeep to email you on every entry, or email your whole team, or create a Trello card, or post in Slack…

If you like, you can simply visit FormKeep when you want to view your entries. Or you can forward them along via email or to one of our many integrations. Whatever works for you.