static website forms

If you are using a static website generator (SSG) like Hugo, Jekyll, eleventy or many of the others, to create static websites (only plain HTML, CSS, Javascript) you may we wondering how can you can create a contact form and collect all the form submissions if there is not website backend.

This is were the use of a forms back-end comes into play.

I will be showing you in this quick tutorial a very good static website forms backed called Fabform.

First create a free account at https://fabform.io

From there, click on Create Endpoint and give it any name you like.

Make a note of the form_id for your newly created endpoint.

In your website, you create your HTML contact form in the usual way.

The only difference will be you point the forms action method to your newly created endpoint on fabform

<form action="https://fabform.io/f/{form_id}" method="post">
  <label for="email">Your Email</label>
  <input name="Email" id="email" type="email">
  <button type="submit">Submit</button>
</form>

Voila! That's it folks. You have a fully working static website contact form that will collect all your contact form submissions.