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 tags.
Below is how you could prevent spam with simple javascript.
LAST TESTED IN AND WORKS IN: 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
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> tag <form name="exampleform" method="POST" id="exampleform">
Step 3: Add some simple requirements to our form. I will use first name and last name.
<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.
<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.
<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.
<!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>
Comments
Cool
Thanks so much for this. Easy for me to follow and get set up! It appears to work. Saves me about 40-50 spam a day.