Edit

Web3Forms React Plugin

We have an official Web3Forms React Plugin to help you send form submissions easily using Web3Forms & React, Next.js etc.

@web3forms/react is available to download from npm and the source on github.

The following example shows how you can create a working contact form using this react hook.

First, install the plugins from NPM:

npm install @web3forms/react
npm install react-hook-form
# or
pnpm add @web3forms/react
pnpm add react-hook-form

Then, Import the Plugin & add the following code.

Basic Example

import { useState, useEffect } from "react";
// npm install react-hook-form @web3forms/react
import { useForm } from "react-hook-form";
import useWeb3Forms from "@web3forms/react";

export default function Contact() {

  const {register, reset, handleSubmit} = useForm();

  const [isSuccess, setIsSuccess] = useState(false);
  const [result, setResult] = useState(null);

  const accessKey = "YOUR_ACCESS_KEY_HERE";

  const { submit: onSubmit } = useWeb3Forms({
    access_key: accessKey,
    settings: {
      from_name: "Acme Inc",
      subject: "New Contact Message from your Website",
      // ... other settings
    },
    onSuccess: (msg, data) => {
      setIsSuccess(true);
      setResult(msg);
      reset();
    },
    onError: (msg, data) => {
      setIsSuccess(false);
      setResult(msg);
    },
  });

  return (
    <div>
    <form onSubmit={handleSubmit(onSubmit)}>
        <input type="text" {...register("name", { required: true })}>
        <input type="email" {...register("email", { required: true })}>
        <textarea {...register("message", { required: true })}></textarea>

        <button type="submit">Submit Form</button>

      </form>

      <div>{result}</div>
  </div>
 );
}

Advanced Example (with tailwindcss)

PreviousReact JSNextReact Hook Form

Last updated

Was this helpful?