This is a tutorial on how to enable basic form handling in your static site, using Netlify’s forms.
This is a followup to my previous post about how to Create a static site in 15 minutes or less using Vue/Nuxt and Netlify. Check that out to get started.
Forms are one of the most basic methods of user interactivity on the web. A user answers some questions, fills in their information, and sends the data to the server. Simple!
The complexity is in the details…
Here are some problems that might arise when implementing a form handling system on a normal website:
- How to validate the data.
- How to send the data to the right place.
- How to sanitize and store that data.
- How to ensure your servers and users are protected from malicious attacks.
This is a lot of overhead to just let your users contact you if they need assistance or have questions. Thankfully these problems can be easily solved by using the forms feature in Netlify, combined with the ease of frontend development in Vue and Nuxt.
For this project, you will need the following:
- A static site, built with Nuxt, and hosted by Netlify. Follow my previous tutorial for help.
- A custom domain registered with your site, and HTTPS enabled.
Security and privacy are important to a safe user experience. Do not follow this tutorial if you haven’t set up HTTPS protocol on your site. Netlify offers this normally paid feature for free, so you have almost no excuse to leave it off. You do not want your users sending potentially sensitive data over an unencrypted connection 😬.
The first thing we want to do is create the basic HTML structure of the form. Start your nuxt server by running
nuxt in the terminal or through a script like
npm run dev.
Create a new file in the
pages directory called
contact.vue. This is where we will define the template for our form. It will have three fields:
Your file could look something like this:
If you are used to normal HTML forms, this should look pretty familiar.
form element is using
method=”post" to send the data to the server. The action attribute is left blank for now, we will fill that in later. Within the form, we have two text
input elements for the Name and Email fields, one
textarea for the message, and one submit
input to submit the form.
Make sure the
name attributes are set correctly on the inputs, so they will map to the correct values in the backend.
After some CSS, this form could look something like this:
The template above needs a couple more changes before Netlify will correctly handle the data.
When the user presses the submit button and the data is sent to the server, we need to let Netlify know that they should handle the data, we do this by adding a
netlify attribute to the
form element. This tag is sent along with the form data, as a queue for their servers.
<form name="contact" action="" method="post" netlify>
Since a site will probably have more than one form, its important to let the servers know which form has been submitted. We do this by adding a hidden input with a value matching the name of the form. In this case, that’s “contact”. Add the following lines inside the form, preferably above the first field.
<input type="hidden" name="form-name" value="contact" />
That’s about all you need to get started! Now it’s time to test it out.
Unfortunately, you cannot test the form on
localhost so we must trigger a deploy to see results. Commit the code, push to your GitHub repo, and wait for your site to build. Then navigate to
https://www.yoursite.com/contact, and you should see the form right there. Fill out the fields and submit!!
Navigate to your Netlify dashboard and open the “Forms” page. If everything went smoothly, you should see a form called “contact” with one entry inside!
Well at least you got a message all the way from the clients browser to your server. You can even stop right here as those are the basics! I’m recommending, though, that you stay tuned! I’m going to cover a little bit of the behind-the-scenes stuff that will make your forms be more secure and less prone to spambots 🤖!
Robots can’t see. Well, they don’t see what we (real life humans) do. When a spambot reads a website, they go through the HTML, find the form inputs, fill them out with junk information and hit “submit”. The robots (unless they are super smart) don’t check where and how the form really appears on the page, if at all! If some fields are all invisible to a human, but still appear in the HTML, the spambots will probably fill it out.
Huh! Maybe we can use that to our advantage!
We are going to employ a common strategy known as a honeypot, a trick that lures in the spambots, and leaves our fellow humans none the wiser! We’ll start by adding another input to our form:
<label>Don’t fill this out: <input name="bot-field"></label> </p>
Notice something? Yeah, the class
hidden is applied to this whole field! Now this class should be styled in your CSS, and look something like this:
The form shouldn’t look any different in the browser, but there is technically one more field.
One of Netlify’s featured is automatic spambot detection. If they detect a lot of submissions coming from the same IP address, they will have the user fill out a CAPTCHA to complete the request. I’ve actually encountered this page when testing my forms.
We can help out this spambot detection by telling Netlify that one of the fields in this form is a honeypot. If it is not empty, then the submitter is probably a spambot!
We convey this information by adding another attribute to the
<form> element. It should look like this:
<form name="contact" netlify-honeypot="bot-field" action="" method="post" netlify>
That should be all you need! Now Netlify should check each submission, and kick out those that have a value for
The last step is to create a landing page for your customers. A basic example is a simple page saying “Thanks!” with a link to the homepage. Let’s create a new page called
thank-you.vue make sure you put this in the
pages directory. You can style it however you like, and it doesn’t need to be complicated. It can be as simple as:
<a href="/">Back to home</a>
Once that is done, you need to tell Netlify to redirect your visitors to that page once they fill out the form. This is done through the
action attribute on the
form. Set it to
You now just have to push these changes to netlify and they will handle the rest. Let the comments roll in! If at any point you want to download the form responses, you can download them right from the “Forms” tab.
Heres a sample of the finished code for your contact page: