Web3Forms

https://github.com/surjithctly/web3forms-docs
Admin
Web3Forms is a serverless contact form solution that allows static websites to receive form...
Tokens:50,178
Snippets:458
Trust Score:9.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### React Filepond Integration for File Uploads

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/pro-features/advanced-file-uploader.md

Integrate Filepond in your React application for a rich file uploading experience. This example shows how to set up Filepond with custom logic for getting pre-signed URLs and uploading files.

```jsx
import React, { useState } from 'react';
import { FilePond, registerPlugin } from 'react-filepond';
import 'filepond/dist/filepond.min.css';

// Register plugins if needed
// registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

function FileUploader() {
  const [files, setFiles] = useState([]);

  const getPresignedUrl = async (file) => {
    try {
      const response = await fetch(`https://api.web3forms.com/upload?file=${file.name}`);
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('Error generating pre-signed URL:', error);
      throw error;
    }
  };

  return (
    <FilePond
      files={files}
      onupdatefiles={setFiles}
      allowMultiple={true}
      maxFiles={3}
      name="attachment"
      labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
      server={{
        process: async (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
          try {
            const { url, key } = await getPresignedUrl(file);
            
            const response = await fetch(url, {
              method: 'PUT',
              body: file,
              headers: {
                'Content-Type': file.type,
              },
            });

            if (response.ok) {
              load(key);
            } else {
              error('Upload failed');
            }
          } catch (err) {
            error('Error uploading file');
          }
        },
      }}
    />
  );
}

export default FileUploader;
```

--------------------------------

### Complete Form Example with Advanced Uploader

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/pro-features/advanced-file-uploader.md

This example demonstrates a full HTML form integrating the advanced file uploader with multiple file selection and size limits.

```html
<form action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    
    <! -- Step 1: Add this line (showing advanced options) -->
  <input
        type="file"
        name="attachment"
        data-advanced="true"
        multiple
        data-max-file-size="3MB"
        data-max-files="3" />
    
    <button type="submit">Submit Form</button>
</form>

<! -- Step 2: Add the script -->
<script src="https://web3forms.com/client/script.js" async defer></script>
```

--------------------------------

### Default Form Example (Email as Reply-To)

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/customizations/custom-reply-to.md

This example demonstrates a default form where the 'email' input is automatically used as the reply-to address for submissions.

```html
<!-- // Default Form. Here, `email` is used as `replyto` -->

<form action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
    <input type="text" name="name" required>
    <!-- replyto set by this input. usually, it's the user who submits the form.  -->
    <input type="email" name="email" required>
    <button type="submit">Submit Form</button>
</form>
```

--------------------------------

### Install Web3Forms React Plugin

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/js-frameworks/react-plugin.md

Install the necessary packages for using the Web3Forms React plugin and react-hook-form. Supports both npm and pnpm package managers.

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

--------------------------------

### Install @hcaptcha/react-hcaptcha Package

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/customizations/spam-protection/hcaptcha.md

Use this command to install the official hCaptcha React package, necessary for integrating hCaptcha into React or Next.js applications.

```bash
npm install @hcaptcha/react-hcaptcha --save
```

--------------------------------

### Custom Reply-To Form Example

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/customizations/custom-reply-to.md

This example shows a form configured with a custom reply-to email address using a hidden 'replyto' input field.

```html
<!-- // Custom `replyto` Form -->

<form action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
    <!-- `replyto` email will be the given value.  -->
    <input type="hidden" name="replyto" value="custom@gmail.com" />
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <button type="submit">Submit Form</button>
</form>
```

--------------------------------

### Basic HTML Form Setup

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/installation.md

Use this basic HTML form structure for simple submissions. Ensure you replace 'YOUR_ACCESS_KEY_HERE' with your actual Web3Forms access key.

```html
<form action="https://api.web3forms.com/submit" method="POST">

    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <input type="hidden" name="redirect" value="https://web3forms.com/success">
    <button type="submit">Submit Form</button>

</form>
```

--------------------------------

### Install hCaptcha React Component

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/customizations/spam-protection/hcaptcha.md

Install the hCaptcha React component using pnpm. This is the first step to integrating hCaptcha into your React application.

```bash
pnpm add @hcaptcha/react-hcaptcha
```

--------------------------------

### Daily Digest Integration

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/integrations/soon/integromat.md

An example of an integration that collects data daily, aggregates it, and sends a digest via email.

```text
[Webhook] → [Data Store: Add] → [Scheduler: Daily 9AM]
  → [Data Store: Search] → [Aggregator] → [Email: Send Digest]
```

--------------------------------

### Example Webhook Payload Structure

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/integrations/webhooks.md

This is an example of the JSON payload structure sent via HTTP POST for a form submission. It includes all submitted form fields and metadata.

```json
{
  "name": "John Doe",
  "email": "john@example.com",
  "phone": "+1234567890",
  "message": "Hello, I'm interested in your services...",
  "subject": "New Contact Form Submission",
  "from_name": "My Website",
  "submittedAt": "2025-12-22T10:30:00.000Z"
}
```

--------------------------------

### Basic React Contact Form with Web3Forms

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/js-frameworks/react-plugin.md

A basic example demonstrating how to set up a contact form using the useWeb3Forms hook from @web3forms/react and react-hook-form. Ensure you replace 'YOUR_ACCESS_KEY_HERE' with your actual Web3Forms access key.

```jsx
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>
 );
}
```

--------------------------------

### Correct URL Format for Redirection

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/customizations/redirection.md

Always use a full, absolute URL starting with `https://` for the `redirect` value. Relative URLs will not work.

```html
<!-- ❌ Wrong. This won't work -->
<input type="hidden" name="redirect" value="/thanks.html">
```

```html
<!-- ✅ Correct. Full URL with https:// -->
<input type="hidden" name="redirect" value="https://yourwebsite.com/thanks.html">
```

--------------------------------

### Vanilla React Form with File Uploader Component

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/pro-features/advanced-file-uploader.md

This example demonstrates how to use the FileUploader component within a standard React form. It includes a hidden access key input and a submit button.

```jsx
import React from 'react';
import FileUploader from './FileUploader';

function App() {
  return (
    <div className="App">
      <h1>File Upload Example</h1>
      <form method="POST" action="https://api.web3forms.com/submit">
        <input
          type="hidden"
          name="access_key"
          value="c00d70af-1ca3-466d-98a7-c82408e76e91"
        />
        <input type="text" name="First Name" />
        <FileUploader />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

export default App;
```

--------------------------------

### Full HTML Form with hCaptcha

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/customizations/spam-protection/hcaptcha.md

A complete example of an HTML form including the hCaptcha integration and the Web3Forms submission script.

```html
<form action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    
    <! -- Step 1: Add this line -->
    <div class="h-captcha" data-captcha="true"></div>
    
    <button type="submit">Submit Form</button>
</form>

<! -- Step 2: Add the script -->
<script src="https://web3forms.com/client/script.js" async defer></script>
```

--------------------------------

### HTML Form with All Web3Forms Options

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/examples/advanced-all-options.md

This HTML form includes examples for all optional and advanced features of Web3Forms, such as access key, subject, from name, CC email, reply-to, redirect, bot check, hCaptcha, reCAPTCHA/Turnstile, webhooks, and file attachments. Ensure the script tag is included if using hCaptcha or advanced file uploads.

```html
<form action="https://api.web3forms.com/submit" method="POST">

  <!-- REQUIRED: Your Access key here. Don't worry this can be public -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

  <!-- Optional: Subject an be prefilled using type="hidden"
       or type="text" for normal user submitted input -->
  <input type="hidden" name="subject" value="New Submission from Web3Forms">

  <!-- Optional: From Name you want to see in the email
       Default is "Notifications". you can overwrite here -->
  <input type="hidden" name="from_name" value="Your Website Name">

  <!-- Optional: To send the form submission as CC email
       This feature available to PRO Plan users only -->
  <input type="hidden" name="ccemail" value="partner@example.com">

  <!-- Optional: Default replyto will be "email" field (if available)
       you may overwrite replyto with different email here -->
  <input type="hidden" name="replyto" value="customer@example.com">

  <!-- Optional: Custom Redirection or Thank you Page
       Make sure you add full URL including https:// -->
  <input type="hidden" name="redirect" value="https://web3forms.com/success">

  <!-- Optional: But Recommended: To Prevent SPAM Submission.
       Make sure its hidden by default -->
  <input type="checkbox" name="botcheck" class="hidden" style="display: none;">
  
   <!-- hCaptcha: Recommended for Advanced Spam Protection. -->
  <div class="h-captcha" data-captcha="true"></div>

  <!-- Google reCaptcha & Cloudflare Turnstile:
       This feature is available for paid users only -->
  <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
  <div class="cf-turnstile" data-sitekey="<YOUR_SITE_KEY>"></div>
  
  <!-- Webhooks: Send your form data to Notion, Google Sheets or Zapier.
       This feature is available for paid users only -->
  <input type="hidden" name="webhook" value="WEBHOOK_URL_HERE" />

  <!-- Attachments: Make sure the <form> has enctype="multipart/form-data"
       This feature is available for paid users only -->
  <input type="file" name="attachment" />
  
  <!-- Advanced File Upload: This feature is available for paid users only -->
  <input type="hidden" data-fileupload="true" />

  <!-- Custom Form Data: Form data you wish to receive in email. -->
  <input type="email" name="email" required>
  <input type="text" name="First Name" required>
  <input type="text" name="Phone Number" required>
  <textarea name="message" required></textarea>

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

</form>

<!-- Required only if you are using hCaptcha or Advanced File Upload. -->
<script src="https://web3forms.com/client/script.js" async defer></script>
```

--------------------------------

### Apply Dark Theme to Advanced File Uploader

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/pro-features/advanced-file-uploader.md

Customize the appearance of the advanced file uploader by overriding default FilePond CSS class names. This example shows how to apply a dark theme.

```html
<!-- Dark Theme -->

<style>
  .filepond--panel-root {
    background-color: #2c2c2c;
  }
  .filepond--drop-label {
    color: #d4d4d4;
  }
</style>
```

--------------------------------

### Set Default and Custom Redirect URLs

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/customizations/redirection.md

Use a hidden input field with the name `redirect` to specify the success URL. Ensure the URL is absolute (starts with https://).

```html
<!-- Default URL -->
<input type="hidden" name="redirect" value="https://web3forms.com/success">
```

```html
<!-- Custom URL -->
<input type="hidden" name="redirect" value="https://yourwebsite.com/thanks.html">
```

```html
<!-- Redirect to another website (Requires a Paid Plan) -->
<input type="hidden" name="redirect" value="https://partnerwebsite.com/someaction/">
```

--------------------------------

### Contact Form with Tailwind CSS

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/js-frameworks/react-plugin.md

This example demonstrates a complete contact form using the Web3Forms React plugin and Tailwind CSS for styling. It includes input validation and submission handling. Ensure your access key is set in your environment variables.

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

export default function Contact() {
  const {
    register,
    handleSubmit,
    reset,
    watch,
    control,
    setValue,
    formState: { errors, isSubmitSuccessful, isSubmitting },
  } = useForm({
    mode: "onTouched",
  });
  const [isSuccess, setIsSuccess] = useState(false);
  const [message, setMessage] = useState(false);

  // Please update the Access Key in the .env
  const apiKey = process.env.PUBLIC_ACCESS_KEY || "YOUR_ACCESS_KEY_HERE";

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

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)} className="my-10">
        <input
          type="checkbox"
          id="" 
          className="hidden"
          style={{ display: "none" }}
          {...register("botcheck")}></input>

        <div className="mb-5">
          <input
            type="text"
            placeholder="Full Name"
            autoComplete="false"
            className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white rounded-md outline-none dark:placeholder:text-gray-200 dark:bg-gray-900   focus:ring-4  ${
              errors.name
                ? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
                : "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
            }`}
            {...register("name", {
              required: "Full name is required",
              maxLength: 80,
            })}
          />
          {errors.name && (
            <div className="mt-1 text-red-600">
              <small>{errors.name.message}</small>
            </div>
          )}
        </div>

        <div className="mb-5">
          <label htmlFor="email_address" className="sr-only">
            Email Address
          </label>
          <input
            id="email_address"
            type="email"
            placeholder="Email Address"
            name="email"
            autoComplete="false"
            className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white rounded-md outline-none dark:placeholder:text-gray-200 dark:bg-gray-900   focus:ring-4  ${
              errors.email
                ? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
                : "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
            }`}
            {...register("email", {
              required: "Enter your email",
              pattern: {
                value: /^\S+@\S+$/i,
                message: "Please enter a valid email",
              },
            })}
          />
          {errors.email && (
            <div className="mt-1 text-red-600">
              <small>{errors.email.message}</small>
            </div>
          )}
        </div>

        <div className="mb-3">
          <textarea
            name="message"
            placeholder="Your Message"
            className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white dark:placeholder:text-gray-200 dark:bg-gray-900   rounded-md outline-none  h-36 focus:ring-4  ${
              errors.message
                ? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
                : "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
            }`}
            {...register("message", {
              required: "Enter your Message",
            })}
          />
          {errors.message && (
            <div className="mt-1 text-red-600">
              {" "}
              <small>{errors.message.message}</small>
            </div>
          )}
        </div>

        <button
          type="submit"
          className="w-full py-4 font-semibold text-white transition-colors bg-gray-900 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-offset-2 focus:ring focus:ring-gray-200 px-7 dark:bg-white dark:text-black ">
          {isSubmitting ? (
            <svg
              className="w-5 h-5 mx-auto text-white dark:text-black animate-spin"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24">
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"

```

--------------------------------

### Gridsome Contact Form Example

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/static-site-generators/gridsome.md

This Gridsome component includes a contact form with input fields for name, email, and message. It uses Web3Forms for backend submission. Replace 'YOUR_ACCESS_KEY_HERE' with your actual Web3Forms access key.

```markup
<template>
    <form @submit.prevent="submitForm">
      <input type="text" name="name" v-model="name"/>
      <input type="email" name="email"  v-model="email"/>
      <textarea name="message" v-model="message"></textarea>
      <button type="submit">Send Message</button>
    </form>
  </template>

  <script>
  const WEB3FORMS_ACCESS_KEY = "YOUR_ACCESS_KEY_HERE";

  export default {
    data() {
      return {
        name: "",
        email: "",
        message: "",
      };
    },
    methods: {
      async submitForm() {
        const response = await fetch("https://api.web3forms.com/submit", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
          body: JSON.stringify({
            access_key: WEB3FORMS_ACCESS_KEY,
            name: this.name,
            email: this.email,
            message: this.message,
          }),
        });
        const result = await response.json();
        if (result.success) {
          console.log(result);
        }
      },
    },
  };
  </script>
```

--------------------------------

### File Upload Form in Next.js with React Hook Form

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/static-site-generators/next.js.md

Create a file upload form in Next.js using React Hook Form. This example demonstrates how to append a file to the form data and submit it.

```jsx
import React from "react";
import { useForm } from "react-hook-form";

function App() {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (data) => {
        const formData = new FormData(data);
        
        formData.append("access_key", "YOUR_ACCESS_KEY_HERE");
        formData.append("file", data.file[0]);

        const res = await fetch("https://api.web3forms.com/submit", {
            method: "POST",
            body: formData,
        }).then((res) => res.json());
        
        if (res.success) {
            console.log("Success", res);
        } else {
        console.log("Error", res);
        }
    };

    return (
        <div className="App">
            <form onSubmit={handleSubmit(onSubmit)}>
                <input type="text" name="name" />
                <input type="file" {...register("file")} />

                <input type="submit" />
            </form>
        </div>
    );
}

export default App;
```

--------------------------------

### HTML Form with reCaptcha v3

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/examples/recaptcha-v3.md

This HTML structure sets up a contact form styled with TailwindCSS and includes hidden input fields for reCaptcha v3. Ensure you replace 'YOUR_ACCESS_KEY_HERE' and 'YOUR_PUBLIC_KEY_HERE' with your actual keys. This setup is for the PRO plan only.

```html
<div class="flex items-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="container mx-auto">
    <div class="max-w-md mx-auto my-10 bg-white p-5 rounded-md shadow-sm">
      <div class="text-center">
        <h1 class="my-3 text-3xl font-semibold text-gray-700 dark:text-gray-200">
          Contact Us
        </h1>
        <p class="text-gray-400 dark:text-gray-400">
          Fill up the form below to send us a message.
        </p>
      </div>
      <div class="m-7">
        <form action="https://api.web3forms.com/submit" method="POST" id="form">
          <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
          <input type="hidden" name="subject" value="New Submission from Web3Forms" />
          <input type="checkbox" name="botcheck" id="" style="display: none;" />
          <!-- Google reCaptcha v3: To Prevent SPAM Submission.PRO Plan only -->
          <input type="hidden" name="recaptcha_response" id="recaptchaResponse">

          <div class="mb-6">
            <label for="name" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Full Name</label>
            <input type="text" name="name" id="name" placeholder="John Doe" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
          </div>
          <div class="mb-6">
            <label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Email Address</label>
            <input type="email" name="email" id="email" placeholder="you@company.com" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
          </div>
          <div class="mb-6">
            <label for="phone" class="text-sm text-gray-600 dark:text-gray-400">Phone Number</label>
            <input type="text" name="phone" id="phone" placeholder="+1 (555) 1234-567" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
          </div>
          <div class="mb-6">
            <label for="message" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Your Message</label>

            <textarea rows="5" name="message" id="message" placeholder="Your Message" class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" required></textarea>
          </div>
          <div class="mb-6">
            <button type="submit" class="w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none">
              Send Message
            </button>
          </div>
          <p class="text-base text-center text-gray-400" id="result"></p>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Needed for Recaptcha -->

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_PUBLIC_KEY_HERE"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('YOUR_PUBLIC_KEY_HERE', {
      action: 'contact'
    }).then(function(token) {
      recaptchaResponse.value = token;
    });
  });
</script>
```

--------------------------------

### JavaScript File Upload with Validation

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/examples/file-upload-form.md

Handle form submissions with file uploads using JavaScript. This example includes client-side validation for file size before sending the data to the API. Note that 'headers' and 'content-type' should not be manually added to the fetch options when sending attachments.

```javascript
const form = document.getElementById("myForm");

form.addEventListener("submit", function (e) {
  e.preventDefault();
  
  const formData = new FormData(form);
  
  formData.append("access_key", "YOUR_ACCESS_KEY_HERE");
  formData.append("subject", "New Submission from Web3Forms");

  const file = document.getElementById("attachment");
  const filesize = file.files[0].size / 1024;

  if (filesize > 1000) {
    alert("Please upload file less than 1 MB");
    return;
  }
  
  // Don't add `headers` or `content-type` in this fetch call
  // Since it contains attachments, the browser auto-adds them. 
  fetch("https://api.web3forms.com/submit", {
    method: "POST",
    body: formData
  })
    .then(async (response) => {
      let json = await response.json();
      if (response.status == 200) {
        console.log(json.message);
      } else {
        console.log(response);
      }
    })
    .catch((error) => {
      console.log(error);
    })
    .then(function () {
      form.reset();
    });
});

```

--------------------------------

### Initialize and Deploy to GitHub

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/hosting-providers/github.md

Use these Git commands to initialize a repository, add your HTML file, commit changes, set the main branch, link to your remote origin, and push your code to GitHub for deployment.

```bash
git init
git add index.html
git commit -m "first commit"
git branch -M main
git remote add origin your_origin_url
git push -u origin main
```

--------------------------------

### Get Specific Submission

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/submissions-api.md

Retrieve details of a single submission using its unique ID. Requires authentication.

```bash
curl "https://api.web3forms.com/v1/submissions/sub_a1b2c3d4e5f6" \
  -H "Authorization: Bearer w3f_live_…"
```

--------------------------------

### Client-side reCaptcha v3 Integration

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/pro-features/recaptcha-integration.md

Include this script before the closing </body> tag in your HTML. Replace YOUR_SITE_KEY_HERE with your actual Google reCaptcha v3 Site Key. This script initializes reCaptcha and retrieves a token.

```html
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY_HERE"></script>
<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('YOUR_SITE_KEY_HERE', {
                action: 'contact'
            })
            .then(function (token) {
                recaptchaResponse.value = token;
            });
    });
    
</script>
```

--------------------------------

### Get a Submission

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/submissions-api.md

Retrieves a single form submission by its unique `id`. This is useful for fetching details of a specific submission when you already know its ID.

```APIDOC
## Get a Submission

### Description
Returns a single submission by its `id`.

### Method
GET

### Endpoint
https://api.web3forms.com/v1/submissions/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the submission to retrieve.

### Request Example
```bash
curl "https://api.web3forms.com/v1/submissions/sub_a1b2c3d4e5f6" \
  -H "Authorization: Bearer w3f_live_…"
```

### Response
#### Success Response (200)
- **data** (object) - The submission object, containing `id`, `form_id`, `submitted_at`, `ip_address`, `user_agent`, `site_url`, `fields`, and `attachments`.

### Response Example
```json
{
  "data": {
    "id": "sub_a1b2c3d4e5f6",
    "form_id": "0a1b2c3d-....",
    "submitted_at": "2026-05-26T18:21:09.123Z",
    "ip_address": "203.0.113.42",
    "user_agent": "Mozilla/5.0 ...",
    "site_url": "https://example.com/contact",
    "fields": { "name": "Jane Doe", "email": "jane@example.com" },
    "attachments": []
  }
}
```
```

--------------------------------

### React Contact Form with react-hook-form

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/js-frameworks/react-js/react-js.md

This snippet shows a basic React component for a contact form. It utilizes react-hook-form for state management and validation. Ensure react-hook-form is installed.

```jsx
import React from 'react';
import { useForm } from 'react-hook-form';

function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    // Handle form submission, e.g., send data to an API
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          id="name"
          {...register('name', { required: 'Name is required' })}
        />
        {errors.name && <p>{errors.name.message}</p>}
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          {...register('email', { required: 'Email is required', pattern: { value: /\S+@\S+\.\S+/, message: 'Invalid email address' } })}
        />
        {errors.email && <p>{errors.email.message}</p>}
      </div>

      <div>
        <label htmlFor="message">Message</label>
        <textarea
          id="message"
          {...register('message', { required: 'Message is required' })}
        ></textarea>
        {errors.message && <p>{errors.message.message}</p>}
      </div>

      <button type="submit">Send Message</button>
    </form>
  );
}

export default ContactForm;
```

--------------------------------

### Paginate Form Submissions

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/submissions-api.md

Continue fetching submissions by passing the 'next_cursor' from a previous response as the 'cursor' parameter. This is used when 'has_more' is true.

```bash
curl "https://api.web3forms.com/v1/submissions?form_id=FORM_ID&cursor=NEXT_CURSOR" \
  -H "Authorization: Bearer w3f_live_…"
```

--------------------------------

### Configure Advanced File Uploader Options

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/pro-features/advanced-file-uploader.md

Customize the advanced file uploader using attributes like `accept`, `data-max-files`, `data-max-file-size`, and `data-content` directly on the file input element.

```html
<input type="file" 
name="attachment"
data-form-id="YOUR_ACCESS_KEY_OR_FORM_ID_HERE" (required if not added in `form` )
data-advanced="true"                       (enable advanced file upload)
accept="image/*, application/pdf"          (accept only some file types)
data-max-files="3"                         (Total number of files allowed)
data-max-file-size="5MB"                   (Maximum file size for single item)
data-content="Drag & Drop or <i>Browse<i>" (Custom Label in your language)
 />
```

--------------------------------

### Vue.js Form Submission with Web3Forms

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/js-frameworks/vue-js.md

Use this script setup and template to create a reactive form in Vue.js that submits data to Web3Forms. Ensure you replace 'YOUR_ACCESS_KEY_HERE' with your actual Web3Forms access key.

```html
<script setup lang="ts">
import { ref } from "vue";
const WEB3FORMS_ACCESS_KEY = "YOUR_ACCESS_KEY_HERE";
const name = ref("")
const email = ref("")
const message = ref("")

const submitForm = async () => {
  const response = await fetch("https://api.web3forms.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({
      access_key: WEB3FORMS_ACCESS_KEY,
      name: name.value,
      email: email.value,
      message: message.value,
    }),
  });
  const result = await response.json();
  if (result.success) {
    console.log(result);
  }
}
</script>
<template>
  <form @submit.prevent="submitForm">
    <input type="text" name="name" v-model="name"/>
    <input type="email" name="email"  v-model="email"/> 
    <textarea name="message" v-model="message"></textarea>
    <button type="submit">Send Message</button>
  </form>
</template>
```

--------------------------------

### HTML Form Structure for Web3Forms

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/html-and-javascript.md

Set up your HTML form with necessary hidden fields for access key and subject, along with input fields for custom data. Includes a div for displaying submission results.

```markup
<form method="POST" id="form">

    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
    <input type="hidden" name="subject" value="New Submission from Web3Forms">
    <input type="checkbox" name="botcheck" id="" style="display: none;">

    <!-- Custom Form Data -->
    <input type="email" name="email" required>
    <input type="text" name="name" required>
    <input type="text" name="phone" required>
    <textarea name="message" required></textarea>

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

    <div id="result"></div>

</form>
```

--------------------------------

### Nuxt UI Contact Form with Web3Forms and Zod Validation

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/static-site-generators/nuxt.js.md

Integrate a contact form using Nuxt UI components and Zod for schema validation. This example demonstrates form binding, validation, and submission to Web3Forms.

```html
<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormGroup label="Name" name="name">
      <UInput v-model="state.name" />
    </UFormGroup>

    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>

    <UFormGroup label="Message" name="message">
      <UTextarea v-model="state.message" type="text" />
    </UFormGroup>

    <UButton type="submit"> Submit </UButton>
  </UForm>
</template>

<script setup>
import { z } from "zod";

const schema = z.object({
  name: z.string().min(2, "Must be at least 2 characters"),
  email: z.string().email("Invalid email address"),
  message: z.string().min(10, "Must be at least 10 characters"),
  subject: z.string().min("Subject required"),
  access_key: z.string().min("Access key is required"),
});

const state = reactive({
  access_key: "YOUR_ACCESS_KEY_HERE",
  subject: "New Submission from Web3Forms",
  name: "",
  email: "",
  message: "",
});

async function onSubmit(event) {
  result.value = "Please wait...";
  try {
    const response = await $fetch("https://api.web3forms.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: form.value,
    });

    console.log(response); // You can remove this line if you don't need it

    result.value = response.message;

    if (response.status === 200) {
      status.value = "success";
    } else {
      console.log(response); // Log for debugging, can be removed
      status.value = "error";
    }
  } catch (error) {
    console.log(error); // Log for debugging, can be removed
    status.value = "error";
    result.value = "Something went wrong!";
  } finally {
    // Reset form after submission
    form.value.name = "";
    form.value.email = "";
    form.value.message = "";

    // Clear result and status after 5 seconds
    setTimeout(() => {
      result.value = "";
      status.value = "";
    }, 5000);
  }
}
</script>
```

--------------------------------

### Contact Form with Tailwind CSS

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/examples/basic-html-contact-form.md

A styled contact form using Tailwind CSS for a modern look and feel. This example includes additional fields and styling for a better user experience. Remember to replace the placeholder access key.

```markup
<div class="flex items-center min-h-screen bg-gray-50 dark:bg-gray-900">
  <div class="container mx-auto">
    <div class="max-w-md mx-auto my-10 bg-white p-5 rounded-md shadow-sm">
      <div class="text-center">
        <h1
          class="my-3 text-3xl font-semibold text-gray-700 dark:text-gray-200"
        >
          Contact Us
        </h1>
        <p class="text-gray-400 dark:text-gray-400">
          Fill up the form below to send us a message.
        </p>
      </div>
      <div class="m-7">
        <form action="https://api.web3forms.com/submit" method="POST" id="form">
          <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
          <input
            type="hidden" 
            name="subject"
            value="New Submission from Web3Forms"
          />
          <input
            type="hidden"
            name="redirect"
            value="https://web3forms.com/success"
          />
          <input type="checkbox" name="botcheck" id="" style="display: none;" />
          <div class="mb-6">
            <label
              for="name"
              class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
              >Full Name</label
            >
            <input
              type="text"
              name="name"
              id="name"
              placeholder="John Doe"
              required
              class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
            />
          </div>
          <div class="mb-6">
            <label
              for="email"
              class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
              >Email Address</label
            >
            <input
              type="email"
              name="email"
              id="email"
              placeholder="you@company.com"
              required
              class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
            />
          </div>
          <div class="mb-6">
            <label for="phone" class="text-sm text-gray-600 dark:text-gray-400"
              >Phone Number</label
            >
            <input
              type="text"
              name="phone"
              id="phone"
              placeholder="+1 (555) 1234-567"
              required
              class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
            />
          </div>
          <div class="mb-6">
            <label
              for="message"
              class="block mb-2 text-sm text-gray-600 dark:text-gray-400"
              >Your Message</label
            >

            <textarea
              rows="5"
              name="message"
              id="message"
              placeholder="Your Message"
              class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500"
              required
            ></textarea>
          </div>
          <div class="mb-6">
            <button
              type="submit"
              class="w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"
            >
              Send Message
            </button>
          </div>
          <p class="text-base text-center text-gray-400" id="result"></p>
        </form>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Basic Form to Sheet Integration

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/integrations/soon/integromat.md

Illustrates a simple integration flow where form submissions are directly added as rows to a Google Sheet.

```text
[Webhook] → [Google Sheets: Add Row]
```

--------------------------------

### Basic Contact Form in Next.js

Source: https://github.com/surjithctly/web3forms-docs/blob/main/how-to-guides/static-site-generators/next.js.md

Implement a simple contact form in a Next.js component. Ensure your Web3Forms access key is replaced with your actual key.

```jsx
export function Contact() {
    async function handleSubmit(e) {
        e.preventDefault();
        const response = await fetch("https://api.web3forms.com/submit", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
            },
            body: JSON.stringify({
                access_key: "YOUR_ACCESS_KEY_HERE",
                name: e.target.name.value,
                email: e.target.email.value,
                message: e.target.message.value,
            }),
        });
        const result = await response.json();
        if (result.success) {
            console.log(result);
        }
    }

  return (
    <>
      <form onSubmit={handleSubmit}>
          <div>
              <label htmlFor="name">Name</label>
              <input type="text" name="name" required placeholder="Your name" />
          </div>
          <div>
              <label htmlFor="email">Email</label>
              <input type="email" name="email" required placeholder="email@example.com" />
          </div>
          <div>
              <label htmlFor="message">Message</label>
              <textarea name="message" required rows="3" placeholder="Enter Message"></textarea>
          </div>
          <button type="submit">Submit Form</button>
      </form>
    </>
  );
}
```

--------------------------------

### List All Forms

Source: https://github.com/surjithctly/web3forms-docs/blob/main/getting-started/submissions-api.md

Retrieve a list of all forms associated with your account. This endpoint requires authentication.

```http
GET https://api.web3forms.com/v1/forms
```
Tokens:
Raw