Form Submissions

BotID does not support traditional HTML forms that use the action and method attributes, such as:

<form id="contact-form" method="POST" action="/api/contact">
  <!-- form fields -->
  <button type="submit">Send</button>
</form>

Native form submissions don't work with BotID due to how they are handled by the browser.

To ensure the necessary headers are attached, handle the form submission in JavaScript and send the request using fetch or XMLHttpRequest, allowing BotID to properly verify the request.

Enable form submissions to work with BotID

Here's how you can refactor your form to work with BotID:

async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  const formData = new FormData(e.currentTarget);
  const response = await fetch('/api/contact', {
    method: 'POST',
    body: formData,
  });
  const data = await response.json();
  // handle response
}
 
return (
  <form onSubmit={handleSubmit}>
    {/* form fields */}
    <button type="submit">Send</button>
  </form>
);

Form submissions with Next.js

If you're using Next.js, you can use a server action in your form and use the checkBotId function to verify the request:

'use server';
import { checkBotId } from 'botid/server';
 
export async function submitContact(formData: FormData) {
  const verification = await checkBotId();
  if (verification.isBot) {
    throw new Error('Access denied');
  }
  // process formData
  return { success: true };
}

And in your form component:

'use client';
import { submitContact } from '../actions/contact';
 
export default function ContactForm() {
  async function handleAction(formData: FormData) {
    return submitContact(formData);
  }
 
  return (
    <form action={handleAction}>
      {/* form fields */}
      <button type="submit">Send</button>
    </form>
  );
}

Last updated on August 14, 2025

Advanced BotID Configuration

Local Development Behavior

Was this helpful?