Easy way to add static HTML contact us form in webpage?

When it comes to how to add a functioning contact us form in a static website, javascript and third party libraries hold their part well.

 

There are multiple ways to add contact form in a static website. In this tutorial I am going to share the easiest way I found among other ways. I am personaly using this contact us form on my career portfolio

I am using FormSpree service, yet its easy to setup and free to use. Lets learn in a 5 little step method how to use formspree for contact us form in a static webpage.

Step 1: Find contact us form in your html code (template)

The form code would be start from <form and end with </form>

Step 2: Replace Form action in html

replace action and method attributes of your html form. If action and method does not exists in your form, add them.

action = "https://formspree.io/email@domain.tld"  method = "POST"

It should be looking somewhat similar to following:

<form action="https://formspree.io/email@domain.tld" method="POST" />

Step 3: Add name attribute to html form elements

existing:

<input type="text" placeholder="Name">

<input type="text" name="_subject" placeholder="Subject">

after attribute added:

<input name="name" type="text" placeholder="Name">

<input name="_subject" type="text" placeholder="Subject">

Step 4: Press Submit and Confirm

Confirm your email and that’s all, Congrats you made it !!

Thanks to FormSpree to make it happen !!