Recieve form submissions directly to your inbox without any configuration. Powered by Web3forms. Integrates with react-hook-form and other form libs too!
npm install @web3forms/react

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
- ✅ 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 ✌️
For other examples please look into the examples directory.
First, create your Web3forms Access Key from web3forms.com.
``bash`
npm i @web3forms/reactor
yarn add @web3forms/react
> Note: Web3forms Access key can be shared in public code.
`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);
},
});
`submit
then just provide the data to be submitted to 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`
---
`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
---
#### 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
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 devyarn dev first builds the project so that the type definitions are emitted to dist and then microbundle` starts watching for file changes.
This plugin is originally created by our community member Lalit2005. We sincerely thank them for their contributions.