Why is Google reCAPTCHA not working on CTUS page?

[William Davis]

Why is Google reCAPTCHA not working on CTUS page?

[Brennan]

Are you using the built in ReCAPTCHA module? If so, I'm pretty sure it is only setup to work during checkout. You would need to implement the Scripts yourself to add it to the contact us form.

[William Davis]

Are you using the built in ReCAPTCHA module? If so, I'm pretty sure it is only setup to work during checkout. You would need to implement the Scripts yourself to add it to the contact us form.

I just copied the code that contained my assigned key from the Google reCAPTCHA site on to the Content section of the CTUS page as per "Step 1: Client Side Integration" below:

<div class="column whole">
    <p><strong>We're Here To Help</strong><br />Your satisfaction is important to us! Use the form below to email us your questions about products, online orders, store experiences and more.</p>
    <p><strong>Order Questions:</strong><br />If you need help or have any other questions concerning your orders, please fill out the form or call: <a href="tel:+1<mvt:eval expr="glosub(g.store:phone, '.', '')" />">&mvt:global:store:phone;</a>.</p>
    <strong>Our Address:</strong>
    <address itemscope itemtype="http://schema.org/LocalBusiness">
        <strong itemprop="name">&mvt:global:store:company;</strong><br />
        &mvt:global:store:address;<br />
        &mvt:global:store:city;, &mvt:global:store:state; &mvt:global:store:zip; &mvt:global:store:country;<br />
        Phone: <span itemprop="telephone"><a href="tel:+1<mvt:eval expr="glosub(g.store:phone, '.', '')" />">&mvt:global:store:phone;</a></span>
    </address>
</div>
<div class="column whole medium-half medium-centered">
    <p id="js-noscript-warning" class="red"><strong>You must javascript enabled to use this form.</strong></p>
    <form method="post" action="&mvte:global:theme_path;/forms/contactForm.php" id="js-contact-form" class="contact-form">
        <fieldset class="corners">
            <legend><small>Bold fields are required.</small></legend>
            <div class="message message-error hide"><small></small></div>
            <div class="form-row">
                <label for="js-contact-name" class="required">Your Name:</label>
                <input type="text" name="contactName" value="" id="js-contact-name" />
            </div>
            <div class="form-row">
                <label for="js-contact-email" class="required">Your Email Address:</label>
                <input type="email" name="contactEmail" value="" id="js-contact-email" required />
            </div>
            <div class="form-row">
                <label for="js-contact-comment" class="required">Comments or Questions:</label>
                <textarea name="contactComment" rows="5" cols="40" id="js-contact-comment"></textarea>
            </div>
            <div class="form-row">
                <div class="g-recaptcha" data-sitekey="[KEY-XXXXXXXXXXXXXXXXX]"></div>
                </div>
            <div class="form-row">
                <div class="column half align-center">
                    <input type="reset" value="Reset" title="Reset the Form and Start Over" class="button button-square bg-gray charcoal" />
                </div>
                <div class="column half align-center">
                    <input type="submit" value="Submit" title="Send Us Your Information" class="button button-square" />
                </div>
            </div>
        </fieldset>
        <input type="hidden" name="storeName" value="&mvte:global:store:name;" />
        <mvt:assign name="g.storeEmailB64" value="crypto_base64_encode(g.store:email)" />
        <input type="hidden" name="storeEmail" value="&mvte:global:storeEmailB64;" />
    </form>
</div>

I just don't understand the implementation of "Step 2: Server Side Implementation":

"When your users submit the form where you integrated reCAPTCHA, you'll get as part of the payload a string with the name "g-recaptcha-response". In order to check whether Google has verified that user, send a POST request with these parameters:

URL: https://www.google.com/recaptcha/api/siteverify"

• secret (required)
• response (required)
• remoteip

[Bruce - PhosphorMedia]

If successful, then reCaptcha sets a JS variable to True. You then, either client side through JS/jQuery allow the form to be submitted, or in the back end (via the contact us php file) modify it to only submit if the reCaptcha flag is set to true.

[lesliekirk]

Are you using the built in ReCAPTCHA module? If so, I'm pretty sure it is only setup to work during checkout. You would need to implement the Scripts yourself to add it to the contact us form.

Which scripts?

[lesliekirk]

I put this in the head tag of the CTUS page

<script src='https://www.google.com/recaptcha/api.js'></script>

and this in the form before the submit button

but the reCAPTCHA isn't fully active as it does not need to be checked to submit the form

<div class="g-recaptcha" data-sitekey="KEY-XXXXXXXXXXXXXXXXX"></div>

As mentioned, there is still a step 2 and we need to know how to implement it.

[slabar]

Took me way to long to do this but I finally got it to work. So here's the code I used to fin[PHP]ish Step 3 for reCaptcha [added to contactForm.php] :

<?php // Don't Need this line - use the one with the Contact Us Form

/* Insert At The Top Of Contact Us Form */

$captcha;

if(isset($_POST['g-recaptcha-response']))
{
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha)
{
echo 'Please check the the captcha form.';
exit;
}

/* Insert Your Secret Key Here - Not Your Site Key */
$secret = 'YOUR-SECRET-KEY-HERE';
$remoteip = $_SERVER['REMOTE_ADDR'];


$response=file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$captcha. '&remoteip='.$remoteip);

if($response.success==true)
{

/* Contact Us Form Goes Here*/


/* This goes just above the ###function clean($string)### */
}

?> // Don't Need this line - use the one with the Contact Us Form

[srmb]

So I a using the Toolkit Sendpage form with uses an intermediary page (CTUS-Receipt) to validate the form responses and includes a math query to prevent automated spam. This worked for years up until this past month when we have been receiving multiple spam form responses, the majority of which are from Russia. I wanted to add ReCaptcha to this page as a second form of verification before the form gets submitted, but I can't figure out how to implement the Part 2 Server Side of ReCaptcha. Since Toolkit's form feature doesn't use a php file, does anyone know another way to integrate ReCapture into Toolkit's Sendpage forms?

[Bruce - PhosphorMedia]

I thought recaptu wasn't dependant on page load. should act via jquery/js to enable sending...but what do i know...we just use Easy Contact which has its own internal spam blocks (that so far have not been hacked in over five years) :)

[srmb]

Well, I don't know much about how to implement jquery or javascript and Google's server side implementation guide is obtuse at best for me, haha.

[srmb]

I'm revisiting this issue since we are still getting lots of spam form submissions, but I'm still not sure how to do this. If there is not a php file that is used to validate the form, then how do I add js/jquery to the form page itself to verify recaptcha before the form is submitted?

[lesliekirk]

Took me way to long to do this but I finally got it to work. So here's the code I used to fin[PHP]ish Step 3 for reCaptcha [added to contactForm.php] :

<?php // Don't Need this line - use the one with the Contact Us Form

/* Insert At The Top Of Contact Us Form */

$captcha;

if(isset($_POST['g-recaptcha-response']))
{
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha)
{
echo 'Please check the the captcha form.';
exit;
}

/* Insert Your Secret Key Here - Not Your Site Key */
$secret = 'YOUR-SECRET-KEY-HERE';
$remoteip = $_SERVER['REMOTE_ADDR'];


$response=file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$captcha. '&remoteip='.$remoteip);

if($response.success==true)
{

/* Contact Us Form Goes Here*/


/* This goes just above the ###function clean($string)### */
}

?> // Don't Need this line - use the one with the Contact Us Form

Is this still a good way to go when implementing the reCAPTCHA with the CTUS page/form?

[Matt Zimmermann]

Hi Leslie,

My guess is, that code should still work. That being said, I would recommend trying to port the contact form shipped in Shadows and use the native spam protection. Part of the problem with the old contact form was the need, and use of, PHP for processing.

[lesliekirk]

Yeah, I could do that but they already have the reCAPTCHA (albeit not working).

[guaranteedparts]

I need help with the coding.............Keeps on saying ERROR for site owner: Invalid site key on our Contact Us Page

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<mvt:item name="html_profile" />
<head>
<title>&mvt:store:name;: Contact Us</title>
<base href="&mvt:global:basehref;" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<mvt:item name="head" param="css_list" />
<mvt:item name="head" param="head_tag" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
<script src='https://www.google.com/recaptcha/api.js'></script>

ga('create', 'UA-27285049-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
...
});
});
</script>
</head>
<body class="CTUS">
<div id="site-container">
<div id="global-header"><mvt:item name="hdft" param="global_header" /></div>
<div id="navigation-bar"><mvt:item name="navbar" /></div>
<table id="content-container">
<tr>
<td id="left-navigation"><mvt:item name="currencymagic" /><mvt:item name="category_tree" /></td>
<td id="main-content">
<div id="page-header"><mvt:item name="hdft" param="header" /></div>

<h1>Contact Us</h1>

<div id="page-footer"><mvt:item name="hdft" param="footer" /></div>
<div class="g-recaptcha" data-sitekey="[key-XXXXXXXXXXX Hidden info XXXXXXXXXXXXX]"></div>

</td>
</tr>
</table>
<div id="bottom-wrap"></div>
<div id="global-footer"><mvt:item name="hdft" param="global_footer" /></div>
</div>
</body>
</html>