React Netlify Forms

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

2021-08-12

1 min read

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.

Usage with Typescript and React Hook Form

This is built with tailwind css and you will have to modify the UX your your usage.

node

bash

Form

tsx

Typescript file

index.description

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:

node

bash

Yarn Install

node

bash

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](https://react-dropzone.js.org/) for image uploads to Netlify Forms.

Adding to the form for image upload

src/page/page.tsx

tsx

Basic Form

src/components/comments.tsx

tsx

Form with React dropZone

src/components/comments.tsx

tsx

React dropZone Previews

src/components/previews.tsx

tsx

React dropZone Previews Component

src/components/previews.tsx

tsx

For more examples please browse the below website.

🔗 Björn Clees

Thanks to 🔗 create-react-library for providing quick setup for NPM packages.