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.
<!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>