Simple Captcha Script

Easy to add contact form captcha

Sticky Note Free captcha script
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.

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 forms. This captcha generates a random number using Javascript and does not use images. You can edit the colors in the css code.

Type the above number:

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.

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!

Step 1.) Add 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> opening and closing tags. View the source code of this page to see how it's used in the <head> section.

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="" 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.

  • 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