Strong Form Protection From Bots

Some of my long-term focus relates to providing ever-better means to use web page forms without the use of a demeaning "prove you are human" captcha. Any proof related to protection from bots, if obtained, should be transparent to the form user.

One of the best ways to protect a form from bots is to hide the form.

If they don't see your form, they won't spam it.

When a bot scans a web page, it is looking for a form tag or form fields. When no forms are present, the bot goes to other web pages to continue its search.

It is one of the protections that Spam-free Form uses. Spam-free Form is a wonderful free service, quite effective. But not everybody likes the idea of using a third party product when an almost-as-good alternative may be available.

Strong form protection from bots can be implemented by loading the form with Ajax some seconds after the web page has loaded. By the time the form loads, the bot has scampered to the next page.

You make a form and save it in a file on your server.

On the page where the form will be pulled in and published, create a div to contain the form. Also publish Ajax to wait a few seconds and then fetch the form and insert it into the div where it belongs.

I think you will find this relatively easy to install.

Following are generic instructions. They are meant to be a guide.

To install this strong form protection from bots, you will need a form and a web page.

The Form

Any HTML web page form can be used. If you don't have one handy, you may use this one to get acquainted with the process.

<form method="post" action="/script.php">
<p>
Favorite color in the morning:<br>
<input type="text" name="color">
</p>
<p>
<input type="submit" value="Tap to submit">
</p>
</form>

The form needs to be saved somewhere on your server that has public access (like web pages have public access). For hiding from bots, it is best not to name the file anything that suggests it might contain a form. These instructions assume the file with your form is named myinfo.php and is saved in the document root.

The Web Page

The web page may be a temporary one until you are ready to go live.

Put this into your web page (comments follow):

<div id="information-container"></div>
<script type="text/javascript">
var source = "myinfo.php";
var container = "information-container";
var delaySeconds = 4;
setTimeout(GetFunctionality,parseInt(delaySeconds*1000));
function GetFunctionality()
{
   var http = new XMLHttpRequest();;
   if(! http) { return false; }
   http.onreadystatechange = function() { document.getElementById(container).innerHTML = http.responseText; }
   http.open("GET",source,true);
   http.send('');
}
</script>

The first line of the above source code is a div. The rest is JavaScript.

Comments —

1. The first line of the source code is bolded to make it extra noticeable for you.

   <div id="information-container"></div>

   It is the div where the form will be inserted after a short delay. The div does not have to be near the JavaScript. It needs to be at the location on the web page where the form will be published.

   The information-container that you see within the div is the id of the div. The same id is a value within the JavaScript (mentioned further below).

2. The myinfo.php that you see within the JavaScript is the location of the file that contains the form source code that you are importing.

   If you can, put the form source code into the same directory as the web page where the form will be published. Then replace myinfo.php with only the file name where the form is located. Doing it that way, the URL does not look like a URL to a roving spamming robot.

   If the source file can not be in the same directory as the web page, then remove the "https://example.com" part from its URL before replacing myinfo.php with the file's location. With the http or https and the domain name removed, there is less chance a bot will recognize the value as a URL.

3. The information-container that you see within the JavaScript is the id value of the div where the form will be inserted after a short delay.

   If information-container is changed, it must be changed in both the div and in the JavaScript. In other words, the two must match.

4. The 4 that you see within the JavaScript specifies the number of seconds to delay before inserting the form into the div where the form will be inserted.

   If you wish to delay the insertion of the form more or less than 4 seconds, replace 4 with your preferred number of seconds. A decimal number is acceptable.

   The idea is to pause long enough for the bot to leave the page before bringing in the form. Depending on the bot, it may take a few milliseconds or up to a few seconds to scan and process the page. It is likely that some bots are programmed to see if any delayed content appears on the page. If they are programmed to intentionally delay, it is likely to be less than 3 seconds (although that is pure speculation on my part).

After any modification the above source code needs, put the source code on a test web page.

Load the web page into your browser. If the file with the form is available, the form should load into your page.

Test the form.

And smile. You have a form that should be invisible to all form spam bots.

(This content first appeared in Possibilities newsletter.)

Will Bontrager