Add a Netlify Form to a site to gather user's feedback
Getting feedback from our users is important for us to be able to improve our site.
Ideally, we'd like to gather feedback with minimal development time possible, that's where Netlify Forms come in.
In this quick lesson we're going to learn how to use Netlify Forms in other to gather feedback from our users by adding small changes (like data-netlify property) to a form.
Tomasz Łakomy: [0:00] Since our blog is somewhat finished, we would like to ask our users for some feedback. As such, I've added a feedback form to our site.
[0:07] You can see that over here. I've added this FeedbackForm component over here. This is just a simple form. It has an input for a name, and also textarea for a message, and a button of type submit. This is going to send a post request whenever someone submits the form.
[0:24] We would like to be able to get this feedback with minimal development time possible. I don't want to setup a backend. I don't want to setup a database. I want to be able to gather user feedback as easy as possible. This is where Netlify Forms come in. I'm going to zoom it a bit, so we can see it better. I'm going to add two things.
[0:42] First up, we have to add data-netlify="true", in order for notify bots to be able to traverse this form and generate a button for us. If this was a simple HTML page with no React, no Next.js, this would be enough. But since we are using static site generation with Next.js, we have to add one more thing. We have to include a hidden input with the value equal to the name of our form.
[1:06] Let me copy and paste that over here. I'm going to change the value of this input to feedback, because this value has to match the form name defined over here. Now, we are ready to go. Let's go ahead and deploy that to GitHub.
[1:19] I'm going to create a new commit, git commit -m "Finished form", and I'm going to push that. Once we log into Netlify, we can see that our build has already finished. Let me click over here in order to see our deployed blog.
[1:32] Let me scroll down to the feedback form, and I'm going to fill it in. My name is Tomasz, and my feedback is, "This blog is awesome." Let me send that, and we can see that this page was generated for us by Netlify. It says that our form submission has been received.
[1:48] Let's go back to Netlify and see where can I find this feedback. We can click on Forms and then on feedback in order to see this kind of feedback. Tomasz says that this blog is awesome. You can use that to collect all sorts of data from your users. If you want to, you can also download all this data as a CSV file.
[2:09] One more thing, we don't have to use the default Thank you message. We can create our own. In order to do that, I'm going to create a new page, which I'm going to call thankyou.tsx, and I'm going to paste in some JSX. This is just a simple component with a header which says, "Thanks! Your form submission has been received."
[2:27] Now, we can go back to our feedback form and add one more property to our form. We have to set the action, which is going to be equal to '/thankyou'. Whenever someone is going to submit the form, they are going to be redirected to this Thank you page.
[2:41] After we deploy that to GitHub, we can see the changes over here. Right now, if I submit this form, we are going to be directed to this Thank you page. We're going to see the message that our form submission has been received. We can see how we can customize this page to display whatever we want.