Simplify Contact Form Submission with Netlify
So you have a website or a blog and you probably want to add a contact form or manage your existing contact form submissions better. Netlify provides a seamless and easy way to do that.
Netlify is a web developer platform which can be used to deploy primarily static websites and has many great services which simplifies deployment processes.
Let’s start with grabbing a free HTML website template. If you have an existing website or an HTML form or want to build a form from scratch, that’s fine! You can skip this step and make use of it.
The following is a free template which I found online with a pretty simple contact form.
Configuring the form
The form in the template looks like this:
Add data-netlify="true" and name="<your-form-name>"in the <form> tag. The name attribute will correspond to the form name on Netlify Dashboard once we deploy the site. While setting data-netlify to true helps Netlify find the form.
You can also integrate reCAPTCHA to your form by adding a div with data-netlify-recaptcha="true" at the bottom of your form just above the submit button as shown in the next piece of code.
If you locally host the site now, you won’t see any reCAPTCHA as the site needs to be deployed on Netlify for the effects to be seen. So let’s move on to deployment.
If you don’t have a Netlify account yet, you can sign up at https://www.netlify.com/
After logging in you will be greeted by a dashboard:
As you can see, you can add a new site from Git, which is the recommended way to host sites as you can manage projects better from Git.
But since this is a simple static HTML site, let’s drag and the folder of the site from the system into the space provided in the site's panel.
Once you drop your folder Netlify will automatically go through the project files and deploy the site and host it on a system-generated URL.
Now let’s test out if the Form Submission works.
Click on the URL provided by Netlify for your site and scroll down to the form. It should look similar to this:
Enter test contact details and submit the form by clicking on send.
Now got the site dashboard on Netlify and open the forms panel.
As you can see, in the Active forms section there is our form with the name specified in the code.
Click on the form to open it.
You can click open the individual submissions.
You can additionally download the submissions as a CSV file and also integrate custom reCAPTCHA or additional spam-prevention to your form.
All this by simply adding a few attributes to your form.
Further, you can add a custom domain name to your site in Site Settings, if you want to deploy your site on Netlify. What I love about the platform is the way in which in they have simplified a lot of deployment and maintenance processes especially for static sites. Do give it a try!
