Simple Captcha Script

Easy to add responsive contact form captcha

A captcha is a script added to contact forms to help determine if a real human is submitting the info. It prevents bots from submitting your website forms and using them to send out spam emails through your website. This script is free to use for any business or personal website.

See Also…

How to add the captcha
The following short tutorial, with copy and paste code, will show you how to add the following form validation script to your HTML form. This captcha generates a random number using Javascript and does not use images. You can edit the colors in the css code. Code is valid for all websites including responsive sites.

In our example above, if the correct number is entered in the form, you will be rewarded with a new number to enter. Exciting? Yes. But if you add this to your HTML form page it has a more practical use to prevent auto form submit bots.

You can edit the colors in the css code you'll add in step #1. The background is a two color gradient. You can freely experiment with the css styles.

Before you start
It is very important to do all 4 steps on this page, and also test your form after you add the code below. Make backups of your HTML page and CSS file before you start!

Captcha Styles

Two styles are available below, compact or stacked. Select only the css styles from either step 1A or 1B.

See other color options for step #1.

Option 1A.) Add COMPACT css code
Copy the following code and add it to the bottom of your CSS file like the "style.css" or "coolstyle.css". If you do not have a global css file you can add it to the <head> of your HTML page only if you include <style type="text/css"> opening and </style> closing tags. View the source code of this page to see how it's used in the <head> section.

/* COMPACT CAPTCHA */

.capbox {
	background-color: #BBBBBB;
	background-image: linear-gradient(#BBBBBB, #9E9E9E);
	border: #2A7D05 0px solid;
	border-width: 2px 2px 2px 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	display: inline-block;
	padding: 5px 8px 5px 8px;
	border-radius: 4px 4px 4px 4px;
	}

.capbox-inner {
	font: bold 12px arial, sans-serif;
	color: #000000;
	background-color: #E3E3E3;
	margin: 0px auto 0px auto;
	padding: 3px 10px 5px 10px;
	border-radius: 4px;
	display: inline-block;
	vertical-align: middle;
	}

#CaptchaDiv {
	color: #000000;
	font: normal 25px Impact, Charcoal, arial, sans-serif;
	font-style: italic;
	text-align: center;
	vertical-align: middle;
	background-color: #FFFFFF;
	user-select: none;
	display: inline-block;
	padding: 3px 14px 3px 8px;
	margin-right: 4px;
	border-radius: 4px;
	}

#CaptchaInput {
	border: #38B000 2px solid;
	margin: 3px 0px 1px 0px;
	width: 105px;
	}

Option 1B.) Add STACKED css code
Skip if you used 1A code! Copy the following code and add it to the bottom of your CSS file like the "style.css" or "coolstyle.css". If you do not have a global css file you can add it to the <head> of your HTML page only if you include <style type="text/css"> opening and </style> closing tags. View the source code of this page to see how it's used in the <head> section.

/* STACKED CAPTCHA */

.capbox {
	width: 100%;
	max-width: 220px;
	background-color: #BBBBBB;
	background-image: linear-gradient(#BBBBBB, #9E9E9E);
	border: #2A7D05 0px solid;
	border-width: 2px 2px 2px 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	display: inline-block;
	padding: 5px 15px 5px 15px;
	border-radius: 4px 4px 4px 4px;
	}

.capbox-inner {
	font: bold 12px arial, sans-serif;
	color: #000000;
	background-color: #E3E3E3;
	margin: 8px auto 0px auto;
	padding: 5px 10px 5px 10px;
	border-radius: 4px;
	}

#CaptchaDiv {
	font: normal 25px Impact, Charcoal, arial, sans-serif;
	font-style: italic;
	color: #000000;
	background-color: #FFFFFF;
	user-select: none;
	padding: 4px;
	border-radius: 4px;
	}

#CaptchaInput { border: #38B000 2px solid; margin: 3px 0px 1px 0px; width: 98%; }

Step 2.) Add captcha box
Copy the following code and add it to the main body of your HTML page inside the form between the <form> start and </form> end tags. Add this code where you want the captcha box to appear, usually just above the <submit> button.

Step 3.) Add form function
The code in the box below is added to your <form> action line as in this example:

<form method="post" action="http://your-web-domain.com/cgi-bin/formmail.cgi" onsubmit="return checkform(this);">

Note: View the source code of this page if you are not sure how to add the above code.

Step 4.) Add Javascript
Copy the code below and paste it just after the end of your form. Paste it just after the </form> closing tag. Do not add this code in the HTML page head section.

<script type="text/javascript">

// Captcha Script

function checkform(theform){
var why = "";

if(theform.CaptchaInput.value == ""){
why += "- Please Enter CAPTCHA Code.\n";
}
if(theform.CaptchaInput.value != ""){
if(ValidCaptcha(theform.CaptchaInput.value) == false){
why += "- The CAPTCHA Code Does Not Match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}

var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';

var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("CaptchaDiv").innerHTML = code;

// Validate input against the generated number
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('CaptchaInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}

// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>

Troubleshooting:

If the form is not working, do the steps above on this page again.
If the CSS code is not adding the proper colors and alignment, try adding the code near the top (not above the Google fonts or body css) or near the bottom of the CSS file, and then error check your CSS file.
Form is not working or looks broken: Try re-copying the code above and be sure you have copied every line of the code in the boxes.

Related Topics:
Contact Form Setup
Free Scripts and Plug-ins

Support the Project
The Simple Captcha script is free to use. Please consider making a small donation so we can keep it updated and make new styles.

Support by QR Code

Free! Free! Free! This limited edition gold Simple Captcha theme is available with any donation. Okay, it's not really limited, and it's not technically free, but it is gold!
Stacked Gold Captcha

Build a Table Tutorial
Add a Sidebar Tutorial
Css Locate DIV Tutorial
Selector Menu Tutorial

Captcha Form Script

Captcha Color Themes
Sticky Header
Mini Responsive Slideshow
CSS3 Scrolling Ticker
Favicon in the Address Bar
Adding Drop Menus

Scripts & Add-ons

Make backups of your template files before you start editing, and also make backups every few edits.

Mega Menu CEO HTML website templates. Downloadable design for professionals.

Business Layouts HTML designs with contact and quotes forms for small business.

Drop Down Menu Themes View different developer grade themes and layouts for HTML web templates.

Allwebco Design Corporation Stand alone HTML and CSS design templates. Responsive and mobile version integration.

View More Simple Captcha Colors