React Netlify Forms
React Netlify Forms, is easy with Bot fields and invisible reCaptcha including dropZone for image upload.

React Netlify Forms
React components and hooks giving you the power of Netlify Forms. Start building serverless forms on Netlify with React. Honeypot fields and reCAPTCHA are included as ready-to-use components.
Go to documentation with live demo.
Features
It gives you all the features of Netlify Forms as simple and reusable React components which have been tested on Netlify.
- Default form handlers with support for file uploads.
- Spam prevention through included honeypot and reCAPTCHA components.
- Can be used alone or together with form libraries such as Formik or react-hook-form.
Before using
This component must be used with Server-Side Rendering (SSR) because Netlify
searches for a data-netlify
attribute on HTML form
tags to setup their
Forms backend for you.
Install
Either install with NPM via:
Yarn Install
Usage
In the following example a contact form with two inputs, a form hidden input for Netlify form handling reCaptcha v2 invisible and a honeypot for extra spam prevention is shown. It also works without JavaScript by falling back to a serverside-rendered form which just submits data with an usual POST request:
My Form
I am using react-dropZone for image uploads to Netlify Forms.
Adding to the form for image upload
Basic Form
Form with React dropZone
React dropZone Previews
React dropZone Previews Component
For more examples please browse the below website.
Thanks to create-react-library for providing quick setup for NPM packages.