Form Submissions
Last updated February 26, 2026
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.
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>
);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>
);
}Was this helpful?