jamstack static website forms

jamstack forms

I am going to show you a quick solution on how to quickly add static website forms to any static website.

As you may know, a static website does not have a backend -- so there are no server-side languages to handle any forms.

A static site only consists of just (HTML,CSS and Javascript). Static website are also known as jamstack websites.

That begs the question. How can you add a static website form to your website?

Turns out, its quite simple. We will be using a forms back-end service called fabform.io to add a contact form to our static site.

Simply navigate to fabform.io to create a free account and click on "Create Endpoint". Cut and paste your new endpoint id into the action property of your HTML contact form.

Here is an example HTML contact form for your jamstack ~ static website.

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

Feel free to modify your contact form and add any fields you which to collect forms data from.

Just remember to name each html forms field with the name you want to store each field for.

That's all there is to it. You can now publish your jamstack ~ static website as you normally do.

Congratulations! You have a fully working a static website form on up and running on your site.

Bonus

If you are creating a new website with the hugo static website generator.

I would recommend you check out these awesome free hugo themes that have static website forms already built into the themes.