Anti BOT Field

Everyone has had bots filling in their forms at one time or another, so here is a solution that can possibly help you from having your forms spammed by BOTS.

Based around a solution created by a Forum user many years ago, this solution now only uses FormLister, it no-longer requires extra snippets to be initiated to check the fields.

One important thing to note is, the field that you only want BOTS to see must be hidden in some way, probably the best idea is to use CSS.

Why does it need to be hidden, simply because if a user fills it out, the form won't be sent - that's the idea, if the field has content, the form doesn't get sent.

Rendered form

In this example you can see that the "antispam" form field is displayed above the "submit" button.

Snippet call

[!FormLister?
&formid=`ContactForm`
&to=`name@domain.com`
&config=`default:core`
&isHtml=`0`
&protectSubmit=`1`
&rules=`{
"name":{
    "required":"Please enter your full name"
},
"email":{
    "required":"Please enter your email",
    "email":"Please enter a valid email"
},
"phone":{
    "required":"Please enter your phone number",
    "phone":"Please enter a valid phone number",
    "minLength":{
        "params":5,
        "message":"Please enter a valid phone number"
    }
},
"subject":{
    "required":"Please enter your subject"
},
"message":{
    "required":"Please enter your message",
    "minLength":{
        "params":100,
        "message":"Your message must have at least 100 characters"
    }
},
"antispam":{
    "!required":"You must be a BOT"
}
}`
&allowedFields=`name,email,phone,subject,message`
&messagesTpl=`@CODE:<div><ul>[+required+][+errors+][+messages+]</ul></div>`
&messagesOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesRequiredOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesErrorOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesSplitter=`</li><li>`
&messagesRequiredSplitter=`</li><li>`
&messagesErrorSplitter=`</li><li>`
&errorClass=`error`
&requiredClass=`required`
&formTpl=`@CODE:
[+form.messages+]
<form action="[~[*id*]~]" method="post">
  <input type="hidden" name="formid" value="ContactForm">
  <!-- Name -->
  <div class="[+name.errorClass+][+name.requiredClass+]">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name" value="[+name.value+]">
  </div>
  <!-- Email -->
  <div class="[+email.errorClass+][+email.requiredClass+]">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="Email" value="[+email.value+]">
  </div>
  <!-- Phone Number -->
  <div class="[+phone.errorClass+][+phone.requiredClass+]">
    <label for="phone">Phone</label>
    <input type="tel" name="phone" id="phone" placeholder="Only Enter Digits" value="[+phone.value+]">
  </div>
  <!-- Subject -->
  <div class="[+subject.errorClass+][+subject.requiredClass+]">
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" placeholder="Subject" value="[+subject.value+]">
  </div>
  <!-- Message -->
  <div class="[+message.errorClass+][+message.requiredClass+]">
    <label for="message">Message</label>
    <textarea rows="10" name="message" id="message" placeholder="Type your message here">[+message.value+]</textarea>
  </div> 
  <!-- Submit Button -->
  <input type="text" name="antispam" id="antispam" autocomplete="off" value="[+antispam.value+]">
  <button type="submit">Submit</button>
</form>`
&successTpl=`@CODE:<div>Thank you, we will get back to you ASAP.</div>`
&reportTpl=`ContactFormReport`
!]

Additional Elements

The name used for the form field (in this demo - "antispam") can and should be changed to something you make up yourself.

Remember that BOTS are intelligent and they are programmed to search for these kinds of traps, so don't make it obvious that it is a trap by using an obvious name and id, like antispam, antibot etc.

Code added to the Formlister call

"antispam":{
    "!required":"You must be a BOT"
}

Please read the documentation for more inbformation about the ruleset used here

Code added to the Form

<input type="text" name="antispam" id="antispam" autocomplete="off" value="[+antispam.value+]">

Hide the form field

A simple way to hide the field using CSS is to simply set the display for that field to "none".

How you hide the field is down to your own coding abilities and or your ethics when it comes to website accessibility & browser compatibility

The easiest, but, by far not the most elegant solution is as follows:

input#antispam{display:none;}

Suggest an edit to this page.