Introduction

Welcome to this tutorial on integrating Web3Forms in a React.js application!
This guide will show you how to set up Web3Forms in your React projects, so you can handle form submissions without needing a backend server.

Check out the video guide below and the UI preview here.

Prerequisites

Before starting, make sure you have:

• Node.js and npm installed
• Basic knowledge of React and JavaScript
• A Web3Forms access key (sign up at Web3Forms.com)

Setup Instructions

1. Clone the Repository

git clone https://github.com/whistlink/web-3-forms-tut.git
cd web-3-forms-tut

2. Configure the .env File

Create a .env file in the project root and add your Web3Forms access key. This helps prevent spam submissions, though it's not foolproof :):

VITE_WEB_ACCESS_TOKEN="YOUR_ACCESS_KEY_HERE"

Note: This key is safe to use on the client side. You can also enable Trusted Domains in Web3Forms (Pro plan) to reduce unwanted submissions.

3. Install Dependencies & Start the Project

npm install
npm run dev

4. Open in Your Browser

Visit the development server for our case in your preferred browser:

http://localhost:5173

You now have a working placeholder setup for Web3Forms in React. Replace the repo and access key with your own project details when ready.