Schinckel.net

Simple Catchpa

Note: This has been updated to reflect most of the feedback I received from the comments and emails. One of the ways to combat comment spam is to use a Catchpa: or a Completely Automated Turing Test to Tell Humans and Computers Apart. I have implemented one with a simple bit of JavaScript. You need to have two sections of code in your comments.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

    function checkCatchpa()
    {
        var catchpaResponse = document.getElementById("catchpa").value;
            if( catchpaResponse == theAnswer )
            {
                return true;
            }
        return false;
    }
    
    function SubmitComment()
    {
        if (checkCatchpa() == true)
        {
            document.commentform.submit();
        }
    }

This one needs to be inside a <script> block: I have it where I also use a couple of functions to show a comment preview. You will also need to surround the script block with {literal} tags to prevent it from screwing up your template. The next one creates the puzzle. It should go after the URI box in your comment form:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

    <p>
        <input type="text" name="catchpa" id="catchpa" value="" size="28" tabindex="4" />
        <label for="catchpa">{_e text="<acronym title='Completely Automated Turing Test to Tell Humans and Computers Apart'>Catchpa</acronym>: "}</label> 
        <script type="text/javascript">
            var firstNumber = Math.ceil(Math.random()*10); 
            var secondNumber = Math.ceil(Math.random()*10); 
            document.write("What is "+firstNumber+" plus "+secondNumber+"?");
            var theAnswer = firstNumber + secondNumber;
        </script>
    </p>

You will also then need to tell the form itself to call the checkCatchpa() function, rather than just submitting:

1

         <form action="{$siteurl}/wp-comments-post.php" method="post" id="commentform" name="commentform" onSubmit="return checkCatchpa()">

Depending on your setup, you may also need to use the SubmitComment() call on your link or button that actually submits the form.

1

    <a class='button' href='javascript:SubmitComment();'> Post Reply </a>

I’ve tested this and it works: I’ll leave it on my site for a couple of days so you can test it out: if you have any problems, leave a response here (if you can!), or AIM/email me.