lalit2005 / use-web3forms

Recieve form submissions directly to your inbox without any configuration. Powered by Web3forms. It's lightweight (354B)!

Web3forms react hook 📦

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

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

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

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

Installation

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).

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 Access 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.