How to add Google Recaptcha to a custom newsletter subscribe form (which uses subscribe.phtml) on a CMS Page?

Question

I have a CMS Page which loads the newsletter subscription form like so:

<div class="newsletter-wrapper clearer">
    {{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}}
</div>

and on my Page's Layout Update XML I have these:

<reference name="head">
    <block type="core/text" name="google.recaptcha.api">
            <action method="setText"><text><![CDATA[<script type="text/javascript" src="//www.google.com/recaptcha/api.js"></script>]]></text></action>
     </block>
</reference>

This works fine.. When I load the page on the frontend (ie: when I visit the page, the captcha loads and its alright)..

But the problem is I don't know how to do the server side verification of the recaptcha.. So basically the captcha is there visually but its not functioning yet.. I am unsure of which php file i need to look into to add the google recaptcha verification.. I would appreciate if anyone with the knowdlege/know how to help me out on this..

I've tried looking at the file located at:

/app/code/core/Mage/Newsletter/controllers/SubscriberController.php

But I don't know if that is the place where I should be placing the verification codes there...

Thanks!

Answer 1

I don't get why you want server side Captcha Verification?

I was facing same issue I had to apply one Google Captcha in Footer Subscription form.

I made it solved by installing one extension "Google Invisible reCaptcha"

Wait... I changed few modifications in JS code also.

After installing extension set Site key and secret in admin side and open subscription.phtml

YOUR-PROJECT/app/design/frontend/YOURTHEME/default/template/newsletter/subscribe.phtml

Add code just after Form Tag.

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

In the last of file add this JS Snippet.

<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#recaptcha_response_field').addClass('required-captcha-entry');
    })
    var yourFormValidationObj = new VarienForm('newsletter-validate-details');

    Validation.add('required-captcha-entry', ' ', function(v) {
        return !Validation.get('IsEmpty').test(v);
    })
</script>

It worked for me. Cheers if it works for you..