Using 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.

Formspree logo

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/[email protected]" 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:

Example email from Formspree

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/[email protected]" 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="[email protected]" />
</form>

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

Posted by Steven Cotterill - 20/07/2018

Want to work with us on a project? Get in touch!