### 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>
```

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

### 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]
```

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

### 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
```

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

### 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">
```

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

### 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>
```

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

### 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;
```

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

### 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>
```

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

### Vue 3 Contact Form with Fetch API

Source: https://context7.com/surjithctly/web3forms-docs/llms.txt

A composable contact form for Vue 3 using `<script setup>` and the Fetch API. Ensure 'YOUR_ACCESS_KEY_HERE' is replaced with your actual access key. The form submission is handled asynchronously.

```html
<script setup lang="ts">
import { ref } from "vue";

const ACCESS_KEY = "YOUR_ACCESS_KEY_HERE";
const name    = ref("");
const email   = ref("");
const message = ref("");
const result  = ref("");

const submitForm = async () => {
  result.value = "Sending...";
  const response = await fetch("https://api.web3forms.com/submit", {
    method:  "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify({
      access_key: ACCESS_KEY,
      name:       name.value,
      email:      email.value,
      message:    message.value,
    }),
  });
  const data = await response.json();
  result.value = data.success ? "Sent successfully!" : data.message;
  if (data.success) { name.value = email.value = message.value = ""; }
};
</script>

<template>
  <form @submit.prevent="submitForm">
    <input type="text"  v-model="name"    placeholder="Name"    required />
    <input type="email" v-model="email"   placeholder="Email"   required />
    <textarea           v-model="message" placeholder="Message" required />
    <button type="submit">Send Message</button>
    <p>{{ result }}</p>
  </form>
</template>
```

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

### Contact Form with Dark Mode

Source: https://github.com/surjithctly/web3forms-docs/blob/main/SUMMARY.md

Style your contact form for dark mode compatibility. This example includes basic CSS for dark mode styling.

```html
<form action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>
    <button type="submit">Send Message</button>
</form>

<style>
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode textarea {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
}
body.dark-mode button {
    background-color: #6200ee;
    color: #fff;
}
</style>

<script>
// Add logic to toggle dark mode class on body
</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>
```

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

### 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/">
```

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

### Multi-Column Contact Form Layout

Source: https://github.com/surjithctly/web3forms-docs/blob/main/SUMMARY.md

Structure your contact form with multiple columns for a more organized and visually appealing layout. This example uses basic HTML and CSS for layout.

```html
<form action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
    <div class="col-container">
        <div class="col">
            <input type="text" name="name" placeholder="Your Name" required>
        </div>
        <div class="col">
            <input type="email" name="email" placeholder="Your Email" required>
        </div>
    </div>
    <textarea name="message" placeholder="Your Message" required></textarea>
    <button type="submit">Send Message</button>
</form>

<style>
.col-container {
  display: table;
  width: 100%;
}
.col {
  display: table-cell;
  padding: 5px;
  width: 50%;
}
</style>
```

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

### AJAX Contact Form using JavaScript

Source: https://github.com/surjithctly/web3forms-docs/blob/main/SUMMARY.md

Implement an AJAX-powered contact form using JavaScript for a seamless user experience without page reloads. This example uses the Fetch API.

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

form.addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(form);
    const object = Object.fromEntries(formData);
    const json = JSON.stringify(object)

    response.innerHTML = "Please wait..." +
        "<br>"

    fetch("https://api.web3forms.com/submit", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: json
        })
        .then(async (res) => {
            let m = await res.json();
            if (m.success) {
                form.reset();
                response.innerHTML = "<p style='color:green;'>" + m.message + "</p>" ;
            } else {
                response.innerHTML = "<p style='color:red;'>" + m.message + "</p>" ;
            }
        })
        .catch(err => {
            response.innerHTML = "<p style='color:red;'>Something went wrong!</p>" ;
        })
        .finally(() => {
            // Optional: Clear the response message after a few seconds
            // setTimeout(() => {
            //     response.innerHTML = "";
            // }, 5000);
        });
});
```

```html
<form id="myForm" action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>
    <button type="submit">Send Message</button>
</form>
<div id="response"></div>
```

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

### 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>
```

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

### 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"

```

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

### 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;
```

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

### 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
```

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

### 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 reCaptcha Site Key. This script initializes reCaptcha and executes it when the page is ready.

```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>
```

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

### Webhook Payload Example

Source: https://context7.com/surjithctly/web3forms-docs/llms.txt

This JSON structure represents the data payload received by your webhook endpoint upon form submission. Sensitive fields are automatically removed.

```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"
}
```

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

### HTML Form with File Attachments

Source: https://context7.com/surjithctly/web3forms-docs/llms.txt

Use this HTML structure to enable file uploads in your form. Ensure the form has `enctype="multipart/form-data"`. Single attachments have a 5MB limit on free/basic plans.

```html
<form action="https://api.web3forms.com/submit"
      method="POST"
      enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
  <input type="text"   name="name"       required>
  <input type="email"  name="email"      required>

  <!-- Single attachment (max 5 MB on free/basic file input) -->
  <input type="file" name="attachment">

  <!-- Multiple named attachments -->
  <input type="file" name="resume">
  <input type="file" name="photo">

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

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

### 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;
```

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

### hCaptcha Integration with React/Next.js

Source: https://context7.com/surjithctly/web3forms-docs/llms.txt

Integrate hCaptcha into a React form using the @hcaptcha/react-hcaptcha package. This example uses react-hook-form for form management and sets the hCaptcha response token.

```jsx
// React / Next.js: using @hcaptcha/react-hcaptcha
// npm install @hcaptcha/react-hcaptcha
import HCaptcha from "@hcaptcha/react-hcaptcha";
import { useForm } from "react-hook-form";

export default function ContactForm() {
  const { register, handleSubmit, setValue } = useForm();

  const onSubmit = async (data) => {
    const res  = await fetch("https://api.web3forms.com/submit", {
      method: "POST",
      body:   JSON.stringify({ access_key: "YOUR_ACCESS_KEY_HERE", ...data }),
      headers: { "Content-Type": "application/json", Accept: "application/json" },
    });
    const json = await res.json();
    console.log(json.success ? "Sent!" : json.message);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")}    placeholder="Name"    required />
      <input {...register("email")}   placeholder="Email"   required type="email" />
      <textarea {...register("message")}                    required />
      <HCaptcha
        sitekey="50b2fe65-b00b-4b9e-ad62-3ba471098be2"
        reCaptchaCompat={false}
        onVerify={(token) => setValue("h-captcha-response", token)}
      />
      <button type="submit">Send</button>
    </form>
  );
}
```

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

### JavaScript Form Validation

Source: https://github.com/surjithctly/web3forms-docs/blob/main/SUMMARY.md

Implement client-side form validation using JavaScript to provide immediate feedback to users before submitting the form. This example checks for required fields.

```javascript
const form = document.getElementById('myForm');
const nameInput = document.querySelector('input[name="name"]');
const emailInput = document.querySelector('input[name="email"]');
const messageInput = document.querySelector('textarea[name="message"]');

form.addEventListener('submit', function (e) {
    if (!validateForm()) {
        e.preventDefault(); // Prevent form submission if validation fails
    }
});

function validateForm() {
    let isValid = true;

    if (nameInput.value.trim() === '') {
        setError(nameInput, 'Name is required');
        isValid = false;
    } else {
        clearError(nameInput);
    }

    if (emailInput.value.trim() === '') {
        setError(emailInput, 'Email is required');
        isValid = false;
    } else if (!isValidEmail(emailInput.value)) {
        setError(emailInput, 'Invalid email format');
        isValid = false;
    } else {
        clearError(emailInput);
    }

    if (messageInput.value.trim() === '') {
        setError(messageInput, 'Message is required');
        isValid = false;
    } else {
        clearError(messageInput);
    }

    return isValid;
}

function setError(input, message) {
    const parent = input.parentNode;
    const errorMessage = parent.querySelector('.error-message');
    if (!errorMessage) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.style.color = 'red';
        errorDiv.textContent = message;
        parent.appendChild(errorDiv);
    } else {
        errorMessage.textContent = message;
    }
    input.classList.add('input-error');
}

function clearError(input) {
    const parent = input.parentNode;
    const errorMessage = parent.querySelector('.error-message');
    if (errorMessage) {
        errorMessage.remove();
    }
    input.classList.remove('input-error');
}

function isValidEmail(email) {
    // Basic email format validation
    const re = /^(([^<>()[\\]\.,;:\s@"]+(\.[^<>()[\\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}
```

```html
<form id="myForm" action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
    <div>
        <input type="text" name="name" placeholder="Your Name">
    </div>
    <div>
        <input type="email" name="email" placeholder="Your Email">
    </div>
    <div>
        <textarea name="message" placeholder="Your Message"></textarea>
    </div>
    <button type="submit">Send Message</button>
</form>

<style>
.input-error {
    border-color: red !important;
}
</style>
```

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

### 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>
```

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

### 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]
```

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

### JavaScript File Upload with Size Validation

Source: https://context7.com/surjithctly/web3forms-docs/llms.txt

Handle form submissions with file attachments using JavaScript. This example includes client-side validation for file size before sending the data. Do not manually set the Content-Type header.

```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; // KB
  if (fileSize > 1000) {
    alert("Please upload a file smaller than 1 MB");
    return;
  }

  // Do NOT set Content-Type header — the browser sets it with the boundary automatically
  fetch("https://api.web3forms.com/submit", { method: "POST", body: formData })
    .then(res => res.json())
    .then(data => {
      if (data.success) { console.log("Sent!", data.message); form.reset(); }
      else              { console.error(data.message); }
    })
    .catch(err => console.error("Error:", err));
});
```

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

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

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

### 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>
```