Creating contact forms on static HTML websites

When creating a static HTML website, or using static website generators (such as Jekyll or Hugo), dealing with emails can cause some issues. The lack of a database or any server-side language is one of the main advantages of static HTML websites for performance and security, however it does prevent the typical route of adding a contact form to a website.

Many websites resort to adding a simple mailto link. There are a few problems with this approach:

• Many users do not have their browsers configured correctly with their mail client of choice. Clicking the link won't perform the desired action in this case.
• Adding an email address into the source code can result in bots crawling the website searching for emails, resulting in spam being sent. This can be prevented by obfuscating email addresses with some simple Javascript (Cloudflare can add this for you), however this still isn't ideal.
• Many users are familiar with filling out contact forms to get in touch with companies etc. They are clearly labelled, and result in standardised responses. A mailto link may result in less engagement with the website.

One way around this is to use Formspree, or another alternative service for static website forms.

This service allows contact forms to be easily added to a static HTML website. The best part; it's free for up to 1000 submissions per month. The free version is fully functional and is likely to have everything you need. It uses the Sendgrid API to process your contact form and send any submissions to your email address. As always with user-supplied information you should ensure you are running a SSL and enforce validation. Formspree implements reCAPTCHA which will help filter out spam submissions.

Getting started is easy. You should create your HTML form as normal, including any styling. The important part is to make sure you add your the Formspree link with your email address to the action attribute. Check out this simple form below:

<form action="https://formspree.io/your@email.com" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name" />
  <label for="mail">E-mail:</label>
  <input type="email" id="mail" name="user_mail" />
  <label for="msg">Message:</label>
  <textarea id="msg" name="user_message"></textarea>
  <button type="submit">Send your message</button>
</form>

In order for Formspree to do its job, ensure that every form element has a "name" attribute. Without this the field will not be processed and emailed to you.

Go ahead and submit your form. You will receive a verification email which you must click before your forms will use the service. An important note is that this will have to be done each time a form is submitted via a new URL (such as when moving to a staging or live website URL, or even other pages on the same website).

Submit the form again once this has been done. Checking your email inbox, you should be greeted with something like this:

It's as simple as that. These steps allow you to easily add a fully functioning contact form to a static HTML website.

There are a number of additional options you can use to tailor your experience. These are configured by adding hidden input fields to the form with the desired options. Some I typically use are:

• _next: Allows you to define which page the user will be redirected to after submitting the form
• _subject: Defines the subject line to appear in the emails received
• _cc: All emails be sent to your email address and the additional email address specified

See below for an example with hidden input fields:

<form action="https://formspree.io/your@email.com" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name" />
  <label for="mail">E-mail:</label>
  <input type="email" id="mail" name="user_mail" />
  <label for="msg">Message:</label>
  <textarea id="msg" name="user_message"></textarea>
  <button type="submit">Send your message</button>
  <input type="hidden" name="_next" value="/thank-you" />
  <input
    type="hidden"
    name="_subject"
    value="New submission from contact form"
  />
  <input type="hidden" name="_cc" value="another-email@email.com" />
</form>

You can go here to view the full documentation for Formspree.