How to handle form submissions on Netlify via your completely free hosted no-code website

Netlify comes with built-in form handling without any extra API calls or including extra JavaScript on your website. With the Netlify free tier, we can get up to 100 form submissions each month for free compared to 50 a month with Webflow. It’s fairly easy and you don’t have to be a software engineer. If you can use no-code tools you’re most likely to do this as well.

Check out How to Host your Website on Netlify with your Own Domain for Free, first. Then come back to check out how to handle form submissions for your no-code website completely for free as well.

I’ll use the Webflow builder while it's being hosted by Netlify.

In 10 min you're finished:

  1. Add a data attribute
  2. Set-up a success event (optional)
  3. Extra SPAM protection (optional)

1. Add a Data Attribute

On the page where you have your contact form, all you have to do is to give the <form> tag a data-netlify="true" attribute.

data-netlify="true"

I do that in Webflow designer. I have set up an extra contact page for this, but you can choose any contact form anywhere.

If you have more than one form on your website, you should choose a different name attribute for each.

Now you’ll start receiving form submissions in your Netlify site admin panel.

Important for No-code tool users: make sure that it is the form element itself and not a surrounding div block!

2. Setting up a Success Event

You will also want to give your form an action which fires on a successful form submission.

When your visitors complete a form on your website that is hosted by Webflow, your user gets a success message that appears and that you can customize. On Netlify they will see a generically styled success message with a link back to the form page.

If we want that kind of customization with Netlify as well, we need to replace the default success message with a custom page. We create that by adding an action attribute to the <form> tag, entering the path of your custom page (like "/pages/success") as the value.

When a visitor successfully submits the form, instead of the success message, they will be redirected to our success page.

You can create your own and call it whatever you like. You just need to make sure that the path must be relative to the site root, in my case this is just "/success".

For even more info read: https://docs.netlify.com/forms/setup/

Photo by Museums Victoria. Hero Photo by Gemma Evans.

3. Spam Protection for your form fields

With Netlify all the form submissions are already filtered for spam.

Only submissions that pass the filter can be found at

  • “Form submissions” / “Verified submissions” list.

Submissions flagged as spam can be found at

  • “Form submissions” / “Spam submissions” list.

Extra spam prevention

For extra spam prevention with honeypot fields or reCaptcha check out: https://docs.netlify.com/forms/spam-filters/#extra-spam-prevention