Last Updated: May 24, 2024
·
30.96K
· rathboma

How to add a contact form to a static website in 2 minutes

Static websites don't need to bother themselves with server-side code, web frameworks, or any of that jazz. However that creates a problem -- how to handle dynamic content, in particular how do you add a contact form to a static website?

Step 1: Build your HTML Form

If you're building a static website you probably already know how to make a HTML form, either way here is a quick template to get you started:

<form method="POST" target="_blank">
  <h2>Contact Us</h2>
  <input type="email" name="email" placeholder="enter your email" required>
  <input type="text" name="name" placeholder="enter your name" required>
  <textarea name="message" cols="30" rows="10"></textarea>
  <button>Submit</button>
</form>

If you need more form templates there are many online, but here is a set of free bootstrap contact form templates that I made available last week.

Step 2: Handling Form Submissions

The easiest way to handle form submissions is to use a third party service. I recommend using the 99Inbound form endpoint API because there's a generous free plan, and it allows both email and Slack notifications for new submissions.

You'll need to make sure that each of your form inputs has a name attribute (this is how the form endpoint identifies your form fields)

To integrate the API, simply replace the form action with the endpoint URL provided by the service. Here's an example below.

<form action="https://app.99inbound.com/api/e/123456" method="POST" target="_blank">

Now when a user submits your form, the submission will be handled by 99Inbound.

Alternative - Roll your own back-end

Instead of using a third party service, you could roll your own form submission back-end. There's actually a great guide to doing this right here on coderwall. This approach works great, but it does require you to run your own webserver, which may not be what you were trying to do with your static website!

Wrap up

Static websites are a great simple way to publish marketing content, blogs, and more. If you need to handle interactive elements (like forms!) there are a range of affordable, or free, online services ready to help. Hopefully you are now able to make a simple, but powerful contact form for your static site.

6 Responses
Add your response

Thank you for a tip!

over 1 year ago ·

Thank you for this excellent article. No error checking for invalid email address? So much of Static Sites. SSG is over-hyped and over-rated. Static sites without any dynamic contents are rarely sufficient. There should be a market for an all-in-one hybrid Static Site Generator with some dynamic contents.

over 1 year ago ·

And we also need captcha in the form...

over 1 year ago ·

Really convenient and fast, thank you

over 1 year ago ·

Thanks por this information

over 1 year ago ·

thanks, this was helpful.

over 1 year ago ·