Web3forms React Plugin

Recieve form submissions directly to your inbox without any backend or server. Powered by Web3Forms. Easily Integrates with Next.js & plugins like react-hook-form and other form libraries!

!Downloads
!Size without zipping
!Size with zipping
!Zero dependencies
!License
!Types included

Features ✨

- ✅ Super lightweight
- ✅ Zero dependencies
- ✅ Full Typescript support
- ✅ Easy to use and a simple Access key
- ✅ Works with any form libraries
- ✅ Examples provided
- ✅ No configuration required (except for the Access key)
- ✅ Works in Node.js (non-browser) environment too ✌️

Demo

For other examples please look into the examples directory.

Installation

First, create your Web3forms Access Key from web3forms.com.

``bash
npm i @web3forms/react


or


yarn add @web3forms/react
`
> Note: Web3forms Access key can be shared in public code.

Usage 📖

$3

`js
// Import Plugin
import useWeb3Forms from "@web3forms/react";

// Add inside your function
const accessKey = "YOUR_ACCESS_KEY_HERE";
const { submit } = useWeb3Forms({
access_key: accessKey,
settings: {
from_name: "Acme Inc",
subject: "New Contact Message from your Website",
},
onSuccess: (message, data) => {
console.log(message);
},
onError: (message, data) => {
console.log(message);
},
});
`
then just provide the data to be submitted to submit function

`jsx {3-6}
onClick={(e) => {
submit({
name: "John",
email: "john@email.com",
message: "Message Content"
});
}}>
Submit form

`
or using the React Hook Form

`jsx



type="text"
{...register("name", {
required: "Full name is required",
maxLength: 80,
})}
/>
type="email"
{...register("email", {
required: "Enter your email",
pattern: {
value: /^\S+@\S+$/i,
message: "Please enter a valid email",
},
})}
/>
{...register("message", {
required: "Enter your Message",
})}
/>
Submit Form



`

---

$3

`js
interface FormData {
name: string;
checkbox: boolean;
}

const { submit } = useWeb3forms({
access_key: "YOUR_ACCESS_KEY_HERE",
onSuccess: (successMessage, data) => {
console.log(successMessage, data)
},
onError: (errorMessage, data) => {
console.log(errorMessage, data)
},
});
`

> Make sure you provide a json with atleast one key-value pair to submit

---


FAQ

#### Should I have a Web3forms account to use this library?
Yes. You should create your Access key from Web3forms.

#### How many form submissions can I make?
Web3forms has a generous free plan. You can view the latest pricing here

Run Locally

Clone the project

`bash
git clone https://github.com/web3forms/web3forms-react.git
`

Go to the project directory

`bash
cd web3forms-react
`

Install dependencies

`bash
yarn
`

Start the server

`bash
yarn dev
`
yarn dev first builds the project so that the type definitions are emitted to dist and then microbundle` starts watching for file changes.

Credits

This plugin is originally created by our community member Lalit2005. We sincerely thank them for their contributions.