Blaugust 2022 – Making an HTML Contact Form

Posted on August 14, 2022 by Aywren

Placing a contact form on your HTML website – such as this – is not as difficult as it seems! You can use these forms for just about anything from initiating an email, gathering information from visitors, or running a poll.

The exact code behind a contact form will differ depending on what you use it for. Some forms might need checkboxes or drop down menus while others might be simpler. I won’t go into full detail on how to code a contact form, but I will provide a few resources to get you started:

Powering Your Form

You might notice that the code for these forms point back to a .php file such as:

<form action="/action_page.php">

But what if you can’t use PHP to power your form?

Hosting on Neocities, I had that issue. My solution is to use a free third party form backend called Formspree.

You sign up for an account there, set up a project name (your website), and create forms within that project. You can use up to two different email addresses on the free account, and choose which form submissions go to which.

When you set up a form, Formspree gives you the code that you need for  your <form action> line.

Instead of using php, you’d replace it with code such as  this (just an example made up code):

<form action="https://formspree.io/f/plopwebre" method="POST">

Formspree will provide you with this on the Integration tab of any form you create. You can also see things like statistics – how many posts were legit vs. spam – and set up things like reCAPTCHA. Of course, you get more options if you pay for the service, but I’ve done just fine with the free version so far.

 Just keep in mind that the free version does limit you to 50 submissions a month. So if you need something more robust, you might either have to upgrade or look elsewhere. I’ve never even come close to hitting 50 in a month, even with spam.

If you were looking at setting up an HTML contact form without a php backend but didn’t know where to start, I hope this helps!

Comments