Prevent Spam without Captcha
The following will show you how to prevent spam without the use of those annoying captcha images. I use javascript, which according to W3C, approximately 95% of the people browsing the web have it enabled. The odds of one of your visitors having it disabled is slim. If it does concern you however, you could always place a notice to turn on javascript before using the form or you could always use another method, just place the other method in <noscript> </noscript> tags.
Below is how you could prevent spam with simple javascript.
TESTED IN THE LATEST BROWSERS: Internet Explorer 8.x, Firefox 3.x, Chrome 4.x, Safari 4.x
Step 1: Create a separate javascript file and link to it in the <head> section of your page. I will call my file “formvalidation.js” and I will link to it from my form page “form.html”.
Example of the “head” section of “form.html”:
<head>
<script language="JavaScript" src="formvalidation.js" type="text/javascript"></script>
</head>
<body>
Your form would be here.
</body> |
Step 2: Remove the form’s action=”" attribute
Some Spam bots will submit directly to the form’s source, this step prevents that.
Example of the form’s attributes:
<form name="exampleform" method="POST" id="exampleform"> |
Step 3: Add some simple requirements to our form. I will use first name and last name.
Example:
<input type="hidden" id="req_id" name="req_id[]" value="first_name"> <input type="hidden" id="req_id" name="req_id[]" value="last_name"> |
Step 4: Add a hidden field called “human” and set its value to “0″. We will change this value once we determine a human is filling out the form.
Example:
<input type="hidden" id="human" name="human" value="0"> |
Step 5: On one of your required fields, add a javascript function to call once something is typed into it. This verifies that a human is filling out the form. I will place it on the “Last Name” field.
<input type="text" name="last_name" id="last_name" onchange="validateHuman('exampleform');" /> |
Step 6: Make the form submit button execute a javascript function that will check all the required fields, verify that a human submitted the form, and then submit the form for processing.
Example:
<input type="button" name="Submit" value="Submit" onclick="submitForm('exampleform');" /> |
Step 7: Add the following Javascript to your Javascript file “formvalidation.js”. These two javascript functions, “validateHuman” and “submitForm” will do all the work of preventing spam.
validateHuman – changes the “human” form element to another number once a person has typed into your required field.
submitForm – validates the required form elements have been filled in, checks to see the value of “human” has changed, and then submits the form for processing.
function submitForm(frm){ //Check is the visitor's browser supports the javascript function if (document.forms[frm]) { //START function executed //we will now check to see if all required fields were filled in var error = ''; if(document.forms[frm].elements['req_id'] != null || document.forms[frm].elements['req_id'] != '') { //store all of the required fields into "reqs" var reqs=document.forms[frm].elements['req_id[]']; //count the number of required fields var nbr_fields = reqs.length; //set a variable "req" to make sure all the "reqs" stay true var req = true; //loop through all the required fields, making sure they are not blank for(var i=0;i<nbr_fields;i++){ if(document.forms[frm].elements[reqs[i].value].value.length <= 0){ //the field is blank req = false; //list what field has been left blank to inform the user if (reqs[i].value == 'first_name') error += "\n - First Name"; if (reqs[i].value == 'last_name') error += "\n - Last Name"; } } //if all required fields are filled in //and the "human" form element has changed //submit the form if(req==true && document.forms[frm].elements['human'].value == '42'){ document.forms[frm].action = "http://somewebsite.com/submit.php"; document.forms[frm].submit(); return true; } else { alert('Opps, it looks like some fields are blank:\n'+error); return false; } return false } //END function executed } else { //START the browser does not support the function alert('Your browser lacks the capabilities required to run this script!\n\nPlease call 555-555-5555 and we will gladly take your information over the phone.'); //END the browser does not support the function } } function validateHuman(frm){ document.forms[frm].elements['human'].value = "42"; } |
That’s it! Your form should now prevent spam bots from submitting directly to it. Below is just a total picture of how “form.html” will look according to this demo.
Example of form.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example Form</title>
<script language="JavaScript" src="formvalidation.js" type="text/javascript"></script>
</head>
<body>
<form name="exampleform" id="exampleform" action="submit.php" method="POST">
<input type="hidden" id="req_id" name="req_id[]" value="first_name">
<input type="hidden" id="req_id" name="req_id[]" value="last_name">
<input type="hidden" id="human" name="human" value="0">
First Name: <input type="text" name="first_name" id="first_name" /><br />
Last Name: <input type="text" name="last_name" id="last_name" onchange="validateHuman('exampleform');" /><br />
<input type="button" name="Submit" value="Submit" onclick="submit_form('exampleform');" />
</form>
</body>
</html> |