Recieve form submissions directly to your inbox without any configuration. Powered by Web3forms. Integrates with react-hook-form and other form libraries too!

✅ 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 ✌️

https://use-web3forms.netlify.app/

☝️ useWeb3forms + React hook form. See the code here

First get your Web3forms access from here. And then👇

npm i use-web3forms

And for yarn users👇

yarn add use-web3forms

Also please do note that the Web3forms Access key can be shared in public (just like the firebase keys).

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

then just provide the data to be submitted to submit function

<button onClick={(e) => { submit({ hello: "world", isWorking: "Yesss!!!", }); }}> Submit form </button>

interface FormData { hello: string; isWorking: boolean | "Probably"; } const { submit } = useWeb3forms<FormData>({ apikey: "YOUR_ACCESS_KEY_HERE", onSuccess: (successMessage, data) => { console.log(successMessage, data) }, onError: (errorMessage, data) => { console.log(errorMessage, data) }, });

<button onClick={(e) => { submit({ hello: "world", isWorking: "Yesss!!!", }); }}> Submit form </button>

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

For other examples please look into the examples directory. If you cannot find your favourite library/framework, just open a issue or just make a tiny contribution 😉

You should get your Access key from Web3forms which requires your email.

Web3forms has a generous free plan. You can view the latest pricing here

Clone the project

git clone https://github.com/Lalit2005/use-web3forms.git

Go to the project directory

cd use-web3forms

Install dependencies

yarn

Start the server

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.