FormRill
  1. Docs
  2. Quick starts

Hugo contact form without a server

Hugo builds static files, so a form needs somewhere else to post. One partial, one shortcode and a config value give every page on your site a working contact form.

1. Store your form ID

[params]
  formrill_form_id = "f_…"

Copy the ID from the Form URL in your dashboard. It’s public by design: it can only submit.

2. Add a partial

<form method="POST" action="https://api.formrill.com/{{ site.Params.formrill_form_id }}/submit">
  <input type="hidden" name="redirect" value="{{ "thanks/" | absURL }}" />
  <input type="checkbox" name="botcheck" hidden />
  <label>Name <input name="name" required /></label>
  <label>Email <input type="email" name="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>

absURL turns the thank-you path into the full URL FormRill needs, using your baseURL. Create a content/thanks.md page for it.

3. Use it in content

Partials can’t be called from Markdown directly, so wrap it in a shortcode:

{{ partial "contact-form.html" . }}
---
title: Contact
---
{{< contact-form >}}

In a template, call the partial directly: {{ partial "contact-form.html" . }}.

Get the form URL for this guide

Free up to 500 submissions a month and unlimited forms. No server, no credit card.

Start free

Related

Last updated