Honeypot
To safeguard your website from spammers and malicious bots, you can employ honeypots. One effective way of achieving this is by incorporating a honeypot into your HTML form. Doing so will help to verify that only genuine users can submit the form
To enable this feature, add a field with the name _honeypot
to your form and hide it with CSS (see example below). The submission will be silently ignored when a spam bot enters a value.
<form action="https://submit-form.com/your-form-id">
<input type="checkbox" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off" />
<input type="email" name="email" />
<button type="submit">Subscribe</button>
</form>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FormZillion -honeypot Form Submit Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="mx-auto flex h-[100vh] max-w-7xl items-center justify-center">
<div class="w-[600px] border border-gray-100 px-10 py-8 shadow">
<div class="flex justify-center"></div>
<h1 class="text-center text-3xl text-gray-700 font-bold ">Form Zillion</h1>
<h4 class="text-center text-base text-gray-500 mt-4">Formzillion.com HTML Form with honeypot</h4>
<form id="form" class="my-6" action="https://formzillion.com/f/your-form-id" method="POST">
<label class="mb-2 block text-sm font-bold text-gray-500" for="emailaddress"> Email Address </label>
<input
class="focus:shadow-outline mb-4 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
id="emailaddress"
type="emailaddress"
placeholder="Enter Email Address"
required
name="emailaddress"
/>
<label class="mb-2 block text-sm font-bold text-gray-500" for="emailaddress"> Full Name </label>
<input
class="focus:shadow-outline mb-4 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
id="fullname"
type="fullname"
placeholder="Enter your Fullname"
required
name="fullname"
/>
<input type="text" id="_honeypot" name="_honeypot" style="display: none;" />
<div class="w-full">
<button id="button" class="mt-4 w-full rounded bg-orange-500 px-4 py-2 font-bold text-white" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>