Using recaptcha on php form within WordPress template

I’m using the following to send a form to an email address. I want to incorporate recaptcha but want to adjust it slightly.

1) If the captcha isn’t filled in I want the error to pop up as an alert box.

Read More

2) If the captcha was filled in correctly, then it should reload the page showing the thank you message (that’s at the bottom of the script below).

3) Rather than check the verify.php file, I want it to check it on this page. (I replaced the permalink in the action with a link to the verify.php file – which I don’t want to do!)

        <form class="form" method="POST" action="<?php the_permalink(); ?>">
            <table border="0" style="float:left;" width="490">
                <tbody>
                    <tr>
                        <td>
                        <p>Company Name:</p>
                        </td>
                        <td>&nbsp;</td>
                        <td><input type="text" name="companyname" id="companyname" /></td>
                    </tr>
                    <tr>
                        <td>
                        <p>Your Name:</p>
                        </td>
                        <td>&nbsp;</td>
                        <td><input type="text" name="fullname" id="fullname" /></td>
                    </tr>
                    <tr>
                        <td>
                        <p>E-mail:</p>
                        </td>
                        <td>&nbsp;</td>
                        <td><input type="text" name="email" id="email" /></td>
                        <td colspan="2">&nbsp;</td>
                    </tr>
                    <tr>
                        <td>
                        <p>Telephone:</p>
                        </td>
                        <td>&nbsp;</td>
                        <td><input type="text" name="tel" id="tel" /></td>
                        <td colspan="2">&nbsp;</td>
                    </tr>
                </tbody>
            </table>

            <table border="0" style="float:left;" width="490">
                <tbody>
                    <tr>
                        <td valign="top"><p style="margin-right:47px;margin-top:7px;">Enquiry:</p></td>
                        <td><textarea name="enquiry"></textarea></td>
                    </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>
<script type="text/javascript">
function validateCaptcha()
{
    if ($('input[name="valid"]')) return true;
    if ($('input[name="recaptcha_response_field"]').val() == "")
    {
        alert("Please complete the CAPTCHA field.");
        return false
    }
    $.ajax({
        url: "http://www.medilogicuk.com/wp-content/themes/default/verify.php",
        type: "POST",
        async:"false",
        data: {
            recaptcha_response_field: $('input[name="recaptcha_response_field"]').val(),
            recaptcha_challenge_field: $('input[name="recaptcha_challenge_field"]').val()
        },
        success: function(data){
            if (data == "OK")
            {
                $('input[name="valid"]').val(1);
                $('.form').submit();
            }
            else
            {
                alert(data);
            }
        },
        error: function(){
            alert("An error occured, please try again later");
        }
    });
    return false;
};
</script>


                <?php require_once('recaptchalib.php');
  $publickey = "(my key)"; // you got this from the signup page
  echo recaptcha_get_html($publickey);
?>
                    </td>
                </tr>    
                    <tr>
                        <td colspan="2"><button type="submit" name="submit" value="Send message">Send message</button></td>
                    </tr>
                </tbody>
            </table>        

        <? if(isset($_POST['submit'])) { 

        $to = "(my email)";
        $header = 'From: (company email)';
        $subject = "Website enquiry";
        $companyname_field = $_POST['companyname'];
        $fullname_field = $_POST['fullname'];
        $email_field = $_POST['email'];
        $tel_field = $_POST['tel'];
        $enquiry_field = $_POST['enquiry'];


        $body = "Hello,nn You have an enquiry from the website, please see the details below:nn Name: $fullname_fieldn Company Name: $companyname_fieldn E-Mail: $email_fieldn Tel: $tel_fieldn Message:n $enquiry_fieldnn Please reply to the enquiry asap.nn Kind Regards n";

        mail($to, $subject, $body, $header);

        echo "</br><p style="color:#e41770!IMPORTANT;">Thank you for getting in touch, we will contact you shortly.</p>";

        } ?>
        </form> 

This is in my verify.php file:

<?php
  require_once('recaptchalib.php');
  $privatekey = "(my key)";
  $resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) 
{
    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again. (reCAPTCHA said: " . $resp->error . ")");
} 
else 
{
    echo "OK";
}
  ?>

Related posts

Leave a Reply

1 comment

  1. Form changes

    <form class="form" method="POST" action="index.php" onsubmit="return validateCaptcha()">
    <input type="hidden" name="valid" value="0" />
    

    Below the form

    <script type="text/javascript">
    function validateCaptcha()
    {
        if ($('input[name="valid"]')) return true;
        if ($('input[name="recaptcha_response_field"]').val() == "")
        {
            alert("Fill in the captcha field");
            return false
        }
        $.ajax({
            url: "verify.php",
            type: "POST",
            async:"false",
            data: {
                recaptcha_response_field: $('input[name="recaptcha_response_field"]').val(),
                recaptcha_challenge_field: $('input[name="recaptcha_challenge_field"]').val()
            },
            success: function(data){
                if (data == "OK")
                {
                    $('input[name="valid"]').val(1);
                    $('.form').submit();
                }
                else
                {
                    alert(data);
                }
            },
            error: function(){
                alert("An error occured, please try again later");
            }
        });
        return false;
    };
    </script>
    

    verify.php

    if (!$resp->is_valid) 
    {
        die ("The reCAPTCHA wasn't entered correctly. Go back and try it again. (reCAPTCHA said: " . $resp->error . ")");
    } 
    else 
    {
        echo "OK";
    }