Implementing a honeypot field to block spam bots
Adding a honeypot field to your HTML forms is a simple, effective way to catch and block automated spambots without impacting real users. Below is an example Subscribe form that uses a hidden honeypot field named language, along with two CSS techniques to keep it invisible.
By adding this small honeypot field and a quick server-side check, you can reduce automated spam submissions with virtually no extra effort and no impact on legitimate users.
Sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exatom sample - Subscribe form with Honeypot</title>
<style>
/* A) Simple honeypot hiding technique */
#subscribeForm .language {
display: none;
}
/* B) Advanced honeypot hiding technique */
#subscribeForm .language {
position: absolute;
left: -9999px;
transform: scale(0.00001);
opacity: 0.00001;
z-index: -9999;
pointer-events: none;
overflow: hidden;
}
</style>
</head>
<body>
<form id="subscribeForm" method="POST">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required autocomplete="name">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required autocomplete="email">
</div>
<!-- Honeypot field, that bot will fill in -->
<div class="language">
<label for="language">Language:</label>
<input type="text" id="language" name="language" autocomplete="none">
</div>
<button type="submit">Subscribe</button>
</form>
</body>
</html>
How It Works
Honeypot Field
- The <div class="language">…</div> block contains an innocuous field that human visitors never see.
CSS Hiding Techniques
- Simple (display: none;): quick and straightforward, but some advanced bots might detect it.
- Advanced (off-screen, zero opacity, scaled down): harder for bots to spot.
Validation
- On form submission, check whether the language field is empty.
- If it contains any value, assume a bot filled it out and reject or discard the submission.
- If it’s empty, process the subscription normally.
Benefits
- No extra JavaScript, it works even when scripts are disabled.
- Zero impact on user experience.
Implementation Tips
- Name the field inconspicuously: avoid obvious names like honeypot - use something a human would ignore.
- Validate strictly: on the server, discard any submission where the honeypot field is non-empty.
- (optional) Combine with rate limits: for extra protection, limit the number of requests per IP per hour.
Related Articles
Form field identification
One of the requirements for form fields to be recognised by Exatom is that they have one or both of the following HTML attributes: name="your-form-field-name" id="your-form-field-id" This uniquely identifies each field and allow our analytics engine ...
Align your field labels top-left
Aligning labels above fields on the left-hand side decreases form completion time. This is because it requires fewer visual fixations, as you only need to view top-down instead of left-right and then top-down.
Install with Google Tag Manager
1. In order to add the Exatom tags to Google Tag Manager, log in to your account and select New Tag and click Add a new tag. 2. In the upper-left corner, rename the tag and change 'Untitled Tag' into 'Exatom Event Tag', click on Tag Configuration and ...
IP blocking
When performing tests on your forms you do not want your or your teams test-data to pollute your Exatom insights. With our IP blocking feature you can block all the IP addresses within your organization or you personal IP addresses if you're often ...
Privacy controls
Exatom is a cookieless, privacy-first platform by design. We also took that route whilst developing our Session Replay product. Exatom's default privacy measurements for Session Recordings, all occurring locally within the user's browser before any ...