This captcha is very simple when you compare with Google's recaptcha and way easier to embed it into your contact page.
FIRST: Add jquerry library in the HEAD section. Here is the link below. You better find the final version. :)
<input type="hidden" name="captcha_verify" value="0">
<div id="direction">Hover or click on the square.</div>
<div id="square" style="display:inline-block;width:30px; height:30px;background:gray;">
</div>
<input style="display:none;" id="sendButton" type="submit" value="Send">
THEN: Add this PHP code below to your POST file somewhere on the top. Do not forget to put PHP opening and closing tags !
$captcha = $_POST['captcha_verify'];
if ($captcha == 1) {
echo "<script>
window.alert('Thank you, I will contact you very soon.');
window.location.href='index.php';</script>";
} else {
echo "<script>
window.alert('You need to prove you are a human!');
window.location.href='index.php';</script>";
}
Now try this DEMO below. There is a gray square to hover on to populate the SEND button and an additional SEND button just to test it.
Otherwise you will not need this additional SEND button in your actual code. This is how it works.
When you hover on gray square JQUERRY makes the VALUE of the hidden input field to TRUE (1) which has a default value of FALSE (0).
Robots usually post when they find the SUBMIT button when there is no obstacle along with known input fields to them.
In this case hovering on a gray square to populate SEND button is going to be very sofisticated for them.