How to use Netlify Forms in React JS

Показать описание

Here's how to setup a Netlify Form in React JS using Gatsby JS as the framework. Netlify forms need a few additional components when working in JSX (React language). Plus, we will go over how to add additional fields and setup a honeypot, which is crucial in catching spammers.

Download the Source Code:

How to create a success / Thank You Page with Netlify Forms:

Table of Contents:
00:00 Introduction
00:40 Setting up the Form in JSX
06:45 Deploying the form to Netlify
10:19 Adding additional fields to the fom
12:21 Changing the Form Name
13:19 Getting results emailed to you
14:38 Adding spam protecting via a honeypot
18:07 In conclusion

Thanks!
Haydn

// Helpful YouTube Playlists:

// SHOP MY PRODUCTS!

// COURSES THAT WILL HELP YOU BUILD BETTER WEBSITES

🛠 THE TOOLS & SERVICES I USE:

► Join ADWC Nation on Discord

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

Hi there! Haydn Adams, BFA. I'm all about helping web developers and web designers build better websites, through code. Yes, coding and be difficult at first. But I'm here to demystify that. To make coding easy so that you can ultimately build a better website.

Got a question for me?

Рекомендации по теме

Комментарии

Thanks for the video. You don't mention anything about including static HTML form to index.html. It doesn't work without it. Netlify doesn't recognize the form without these lines. Please correct me if I am wrong

nikoman

What a coincidence, I was just thinking about how I would get this done, and then I checked my subscriptions. Thanks a lot, this method so much easier than what I was otherwise going to do.

jord_n

Thank you. You've contributed to my education as a react developer. Sincerely, Tony Radin.

anthonyradin

Thank you! Great informative info! Might think about making an add on with form validation. Thank you again!

GypsyVb

Good video, but it didn't work initially. I had to add a hidden html form in my index.html file like this. <form name='contact-v1' netlify netlify-honeypot="bot-field" hidden>. Without it I would get a 404 error when submitted.

mikemoradi