DEV Community

Cover image for Jamstack forms
irishgeoff9
irishgeoff9

Posted on

1

Jamstack forms

This is going to be a very quick tutorial on how to add jamstack forms to a static website.

Static websites as you may know are websites that comprise of no more than just HTML, CSS and Javascript.

A static website by it's very nature does not have a server back-end, so there are no server languages to "post" your forms to --so to speak.

At some point you may want to add forms to your site and since your static website does not have a backend , you will need to employ the services of a jamstack forms backend.

To add a contact us form to your website we will be using the forms backend service fabform.io.

It's just a simple case of creating a endpoint on fabform.io and adding a HTML contact form to your web page and pointing the form's action method to your newly created fabform.io endpoint.

With your contact form up and running you can now easily collect all of your form submissions.

Here is all the code you will need to get a jamstack forms contact us page up and working on your site.

<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>
Enter fullscreen mode Exit fullscreen mode

You will need to replace the form's action method to point to a endpoint that you will of have created on the jamstack forms forms backend service fabform.io

For additional information see how to
create a static website with contact form on github pages

There you have it folks. All you needed to get jamstack forms up and running on your website.

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️