Early on in most web dev learning journeys, you are usually taught how to make basic forms in HTML. You can use the <form> element and embed several <input> <label> <textarea> and more inside to create the front-end for your forms. Then you finish it off with a <button> element for submitting. But what do you do after you create the form itself?
A lot of websites today have a contact page, since it provides a nice UI/UX experience to get in touch with the person or organization, and you do not need to have a public-facing email address on your site which is open to spams, scams, and unwanted sales pitches. The contact page (or <section> if it’s just one webpage) is usually an HTML form with a few simple fields: name, email, subject, and message. Once you have used your HTML skills to create the form on the front-end, you will need a way to receive that information and be notified about it.
Netlify lets you do this very quickly and easily without having to write a lot of JavaScript and backend development. Better yet, not only can you be notified in your Netlify account about a form submission, but you can also receive an email notification each time someone submits the form on your site. It’s free as well (with limitations which we’ll cover farther below), which means it’s open to any developer who wants to add this functionality quickly to their site. Below are the steps:
Step 1: Connect your project to Netlify
The first step is to create your project, add your code, and connect it to Netlify. What I did was create a private repository on Github, add my project code there, then log into my Netlify account (free tier by the way) and connect my Github and Netlify account. This gave Netlify access to my Github projects, so I could pick and choose which ones I wanted to deploy with Netlify. Below is a screenshot of a few projects currently in Netlify using the code in Github repositories:
The top one, “aaronmccollum” is my portfolio site, which is where my contact form resides. Once my project was added and deployed, I was able to go to the next step.
Step 2: Enable form detection in my portfolio project
I clicked into my portfolio project to open it up. There a new side menu appeared for settings specific to my portfolio project. One of the side menu items is “forms.” Clicking that took me to the forms settings page. From there I could enable form detection.
When Netlify deploys or redeploys your site after changes made, it does a scan of your HTML. When you enable form detection, Netlify will include some special searching in your HTML for any forms. So I needed this switched on.
Step 3: Add some special HTML attributes to my and embedded form elements
So how does Netlify know once it’s reached a form it needs to track? When it scans your HTML, it’s looking for a specific attribute in your <form> element: data-netlify="true". The entire element could look something like this with the attribute added:
<form name="contact" method="POST" data-netlify="true">
The other thing you need to do is ensure your <form> element and all of your input elements, including <input> and <textarea> have name attributes. Netlify will use these later in the UI and in emails to help label the data that is submitted.
Once I pushed these changes to my contact form on my portfolio website, Netlify redeployed my site, parsed my HTML file with it’s updates, and since the form detection was turned on, began tracking any submissions to my HTML form on my portfolio page.
I ran a quick test by submitting a test submission, and it worked! When I refreshed my project in Netlify and went to the “Forms” section, I could see a new submission.
But that’s not all I wanted. I wanted an email sent to my email address every time someone submitted a form. Netlify offers a pretty quick way to do that as well.
Step 4: Add email notifications for your form submissions
In my portfolio project’s menu, I clicked “Project configuration” then clicked “Notifications.” This took me to all the notification settings for my specific project. Netlify lets you configure these separately for each project which is nice.
I scrolled down to “Form submission notifications.” This is where I added my email address to be notified each time a form submission was made.
When you add a new notification setting for this, you can use the following options:
- Event to listen for: New form submission
- Email to notify:
- Form: the value of the name attribute in your
<form>which Netlify may already have
Optionally you can also set up a custom subject line for the email, which could help the notification emails stand out if you receive a lot of other emails.
Step 5: Test
The last thing I did was send another test form submission in. Within about 10 seconds, I had an email with my form’s information. Because my form included an email field with name="email" in one of the <input> elements, Netlify will automatically save that email address as the reply email. This means if I want to reply to the sender, all I need to do is reply to the notification email sent to me, and the submitter’s email address will be in the address bar of my email.
A few things to know about the free tier
A free tier in Netlify gives you 300 credits per month to use. Redeploying your site cost 15 credits, and a form submission costs 1 credit. So this is not a limitless option to use. In my current cycle, I’ve redeployed my projects a total of five times, so I’ve used 75 credits alone in just redeploys. This means if you have a form, get some website visits (which costs a fraction of a credit for each visit), and you make an update or two, this can add up.
My thinking here is if I get to a point where my portfolio site is receiving incoming messages and visits to the point where I max out my monthly rate, I may be ready for a subscription. But for now, this free tier and the credits is allots to me each month is perfect.
Netlify also does help with spam detection and allows you to create an invisible honeypot element in your form to catch automated spam. I have not added one of those yet, but you can find them in Netlify’s documentation.
And speaking of documentation, here is the link to the Netlify forms documentation site where I was able to read up on all of this. I recommend reading through this when you use Netlify for the first time to connect a form.
Aaron is a Software Developer experienced in web development and business-process management applications. You can follow him on Bluesky or Mastodon.
Top comments (0)