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.