use-web3forms

Web3forms react hook 📦

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

Features ✨

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

Demo

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

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

Installation

npm i use-web3forms

And for yarn users👇

yarn add use-web3forms

Usage 📖

Javascript

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>

---

Typescript

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 😉

---

FAQ ❓

Should I have a Web3forms account to use this library?

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

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

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.