Today, I added a new contact form to this site. It’s in the “contact” menu right to “blog” in the navigation menu above. Actually, I don’t really need this form to be on this site, but then built it anyway to add more interactivity.

As this site is purely static, there are limitations to what I can accomplish here, especially when it comes to making it more dynamic. For example, I cannot add any back-end code when adding a simple contact form or comment section. Fortunately, there are many services out there that offer simple and easy solutions for these kinds of problems.

For adding the contact form, I chose a simple and easy way using Formspree. It’s very easy to set up – no need any backend code, even you don’t need to register to use their service.

Using Formspree

I’m going to share the steps for creating a contact form which the result will be similar to the contact form in this site. The first step is to create a simple form using HTML. It’s quite easy and you can just copy-paste code snippet below:

Create a form

1
2
3
4
5
6
<form action="https://formspree.io/your@email.com" method="POST">
  <input type="text" name="name" placeholder="Your name">
  <input type="email" name="_replyto" placeholder="Your email address">
  <textarea name="message" placeholder="Your message"></textarea>
  <input type="submit" value="Send">
</form>

You will need to change your@email.com with your real email address. Make sure you don’t change the values name, _replyto, and message because these attribute values will be used by Formspree.

Add a hidden input for the subject

In order to customize the subject of the submissions coming to your email, you can add a hidden input similar to this below:

<input type="hidden" name="_subject" value="Email subject" />

Add a hidden input for custom thank you page

You can also show a custom thank you page to be shown after someone has successfully submitted the form.

<input type="hidden" name="_next" value="/path/yourthankyoupage.html">

Add a honeypot field with the name _gotcha for spam prevention

Formspree uses reCAPTCHA to identify spam submissions, but you can also add this additional technique. The idea is to hide a field inside your form. A person won’t see it because it’s hidden, but spambots do. A spambot will fill in the field, while a person won’t. Any submission with this field filled in will be considered spam.

<input type="text" name="_gotcha" style="display:none" />

Final code

Here’s the complete snippet of the form.

1
2
3
4
5
6
7
8
9
<form action="https://formspree.io/your@email.com" method="POST">
  <input type="text" name="name" placeholder="Your name">
  <input type="email" name="_replyto" placeholder="Your email address">
  <textarea name="message" placeholder="Your message"></textarea>
  <input type="hidden" name="_subject" value="Email subject" />
  <input type="hidden" name="_next" value="/path/yourthankyoupage.html">
  <input type="text" name="_gotcha" style="display:none" />
  <input type="submit" value="Send">
</form>

Final step

Finally, it’s time to test the form and make sure it works. Fill in your form and then submit it. A minute later, you will receive an email from Formspree asking you to confirm your email address.