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.
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
You will need to change
email@example.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" />
Here’s the complete snippet of the form.
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.