Adding reCAPTCHA to a Campaign Monitor form

February 17, 2017 10:05 am Published by Leave your thoughts

Shortly after adding a signup form to one of my websites (form code taken directly from Campaign Monitor), I started to notice a ridiculous number of subscribes from spammy looking emails. So I started doing some research on how to add a reCaptcha to this form. Campaign Monitor allows you to add an old school Captcha to the form but it redirects you away from the website to do so and adds an extra step for the user. What I wanted to add was a Google “I’m not a robot” reCAPTCHA like I’ve done with so many other forms. The thing that makes this a challenge is the form isn’t a simple mailto form that you have complete control over the backend. The form has to go directly to Campaign Monitor and pass the reCAPTCHA. After hours of googling this I realized that no one really had a clear answer on how to achieve this, so I came up with my own solution.

The Concept

To create a form with the reCAPTCHA that passes through the information you’re looking for and passes the test of the reCAPTCHA. Then once it passes creates a phantom form that will go directly to Campaign Monitor or what ever email signup software you’re using.

Pre-requisites

– Understanding of HTML and some experience with PHP and Javascript. In this tutorial I’m running a WordPress site.
– Some code editing software.
– Google account for setting up your reCAPTCHA key and secret code.
– Campaign Monitor account.

The Nitty Gritty

First you’ll need to grab the code form from Campaign Monitor. Here’s how…

– Sign in
– Select the correct client (if you have multiple)
– Select Lists & Subscribers
– Create a new list and call it website signups or something to that extent.
– Go to your newly created list and click the link that says Sign up forms on the right
– Click copy and paste a form to your site
– Add or take away any fields you want and click get the code
– Copy and paste your code into Dreamweaver or what ever code editing software you’re using

Next you’ll need to setup your reCAPTCHA. go to https://www.google.com/recaptcha/intro/ and click Get reCAPTCHA at the top right and follow the instructions.

After you’ve got your code, your key and secret code; you’ll need to identify where you’d like to add a subscribe form to your website. For mine I added a button in the header with a modal box that pops up.

Open the file where you’d like the form to live and paste the following….

        <form action="form-send.php" method="post" enctype="multipart/form-data">
            <h2>Subscribe to our Newsletter</h2>
                <label for="sender_name">Name</label><br />
                <input name="sender_name" /><br />
                <br />
                <label for="sender_email">Email Address</label><br />
                <input name="sender_email" /><br />
                <div class="captcha_wrapper">  <br />
                <div class="g-recaptcha" data-sitekey=“YOUR-SITE-KEY-HERE"></div> <br />
                </div>
            <button class="go-button" type="submit" id="send_message">Subscribe</button>
        </form>

You’ll have to cater this form your own needs, I’m only asking the user to put their name and email address in. If you want more fields then just add them. Also don’t forget to add your site key that you got from google into the code.

Next create a form-send.php file this is where you’ll first check to see if the captcha was completed and pass the information the user entered into another form that campaign monitor can understand. Paste this code into your form-send.php file…

<?php

$sender_name=stripslashes($_POST["sender_name"]);
$sender_email=stripslashes($_POST["sender_email"]);

$secret=“YOUR-SECRET-CODE-HERE";
$response=$_POST["g-recaptcha-response"];
$verify=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret}&response={$response}");
$captcha_success=json_decode($verify);

if ($captcha_success->success==false) {
    echo "<p>Please go back and complete the reCAPTCHA.</p>";
}
else if ($captcha_success->success==true) {
        ?>
        <center><h2 style="padding-top:100px;">Redirecting...</h2></center>
        <form id="createsend-form" action=“YOUR-CREATE-SEND-LINK-HERE" method="post" id="subForm">
            <p>
                <input type="hidden" id="fieldName" name="cm-name" type="text" value="<?php echo $sender_name; ?>" />
            </p>
                <input type="hidden" id="fieldEmail" name="cm-kuljpl-kuljpl" type="email" value="<?php echo $sender_email; ?>" required />
            </p>
            <p>
                <button style="visibility: hidden;" type="submit">Subscribe</button>
            </p>
        </form>

       <script type="text/javascript">
        document.getElementById("createsend-form").submit();  //auto send form
        </script>

        <?php

}
?>

Just to explain the code a little bit. First it grabs the form details from the previous form and assigns them to variables for use later. Next is the standard Google reCAPTCHA json decode response. Don’t forget to add your secret code to the variable $secret.

Next if the captcha returns false, that is if the user didn’t fill it out or if it’s a robot, it will display “Please go back and complete the reCAPTCHA.”

If it returns true then it will run the form that will be submitted to Campaign Monitor. Open that bit of code you copied from Campaign Monitor and you should see a link in there under the action tag. Copy and paste that into where it says “YOUR-CREATE-SEND-LINK-HERE”. You may have to alter the name tags in the input fields too, just make sure they appear the same in the form-send.php file as the code you copied otherwise it won’t work.

The magic’s in the JavaScript. The small JavaScript code will submit the form automatically so the user doesn’t have to hit submit twice. All the user will see while it runs this code is Redirecting. For best results create a thank you landing page that informs the customer that their form has been submitted and integrate that link into Campaign Monitor.

If you get stuck leave a comment and I’ll do my best to help you out.

Categorized in:

This post was written by admin