I was adding email functionality to the contact form on one of my websites earlier today. The site was built with Next.js, so I built out a backend for it with Node and Express and included a library called Nodemailer for SMTP messaging. It had some errors that were taking me a while to figure out.

I ended up taking a break and showering. When I returned, I did a search for alternate means to add email functionality to forms on a website. I know that generally, it can’t be done from the frontend. You need a backend to actually send out the email. Well, this is still true, but Netlify actually provides a free service that essentially gives websites deployed there a backend for forms and email!

It was also amazingly easy to set up. There are two variations that I tried. The first is for a pure static HTML website. The second is for a site built using JavaScript, so React, Next, Vue, Angular, etc.

Method 1: HTML

Add the following attributes to the <form> tag in your HTML: method=’POST’ data-netlify=’true’. That’s it. You’re all set. Make sure that the form has a name attribute, so Netlify knows what to call it and that the form fields have name attributes as well so that their data can be captured. The form’s name attribute is also necessary for the case of distinguishing forms if there is more than one form on a site.

<form name="contact" method="POST" data-netlify="true">

Method 2: JavaScript

If you have a JavaScript-based site that’s rendered on the client instead of the server (React, Next.js, etc.) the process is twice as long – so its two steps. Add the attributes from above to your form’s opening tag, just like the HTML method. Then, add the following line of code right below the <form> tag:

<input type='hidden' name='form-name' value='contact-form' />

That’s it. Make sure that ‘value’ is set to the name of your form. For example, mine was value=’contact-form‘ because my form had the attribute name=’contact-form’. If your form has labels, you’ll need to change the ‘for’ attribute to ‘htmlFor‘, but that’s just standard JavaScript since ‘for’ is a reserved word.

Oh, if you’re using Next.js to build your site, remember to include these in the site’s build settings on Netlify:
Build command: next build && next export
Publish directory: out

Viewing messages / Sending email

Once you’re all set up and your site is deployed, you can test by just completing your contact form and submitting it. Netlify will show a modal that confirms for the viewer that the message was sent and offer a link to return to the site. You can customize the modal, but I haven’t done that yet.

You can then go to the dashboard for your site, refresh the page and on the bottom-left, you’ll see a section for submissions, with a list of received messages. Just click on one to expand it and read its contents. What’s even more amazing is that at the top of the screen by Site Overview, if you click on Forms and the on Settings and Usage, you can scroll down to Form Notifications and add different notifications, including email. You can then enter an email address and whenever a contact form is submitted, it will appear in the dashboard and get emailed to that address. For free. For 1-2 lines of code.

The free tier allows up to 100 submissions per month. After that, there are other tiers that handle larger quantities of messages.

Videos

These are the two videos I watched that really explained the process well. The first is from Brad Traversy, which works fine for static/HTML sites. The second is from Colby Fayock, which covered the Next.js requirements. Ok. I’m going to add contact forms to all of my sites now. ;)

• Netlify documentation: Forms setup