This guide will teach you how to send form data to any API endpoint.
In case you're starting a brand new project, you'll need some initial steps. One of the most straightforward ways is to use the create-react-app package. To start:
npm install create-react-app --global
mkdir ~/react-project && cd ~/react-project
npx create-react-app .
npm start
Use your favorite code editor to work with files in ~/react-project/src. You will be able to make a contact form there.
Create a new file called UseForm.js in the src folder. The hook will intercept regular form submit and will send JSON data to the API endpoint.
Create a new file called Form.js in the src folder. You can use any fields and any framework for styling it. For now, we're staying with the standard "Name," "Email," and "Message" for the simple contact form. We're also going to use TailwindCSS to make it beautiful, but you can use your own custom CSS code too.
Open App.js in your src folder, add contact form component, and enable TailwindCSS. If it's an existing project, open the file where the contact form should appear. You need to:
If you're using HeroTofu forms backend it's easy to handle spam bots too. You have to check whenever the API returned 422 status code and redirect visitor to the captcha error page. This is done by modifying your hook around the line #34:
See the React contact form guide for a complete guide how to implement HeroTofu forms backend.