damian
10/26/2017 - 9:29 PM

Recaptcha Implementation - Ajax Simple Form

Author: Dustin // As seen on CEMATRIX.com

Instructions.md
content_copyfile_download
  • Rendered
  • Source

// AJAX Template

  1. Sign into Google account at developer@blendermedia.com and navigate here: https://www.google.com/recaptcha/admin#list
  2. Add Label for new site (ex: cematrix.com) and click reCAPTCHA V2. Click Register.
  3. Add domains (bmcms1.com AND cematrix.com), accept Terms and click Register.
  4. This new page will have all API information you will need in implementation (API Key, Secret Key). Keep this window open.
  5. Duplicate folder titled 'tpl_ajax_recaptcha' found here Z:_Default Client (COPY ONLY)\domain.com\Layouts-Snippet-Tutorials
  6. Open 'class.googlecaptcha.php' in your newly copied folder and update line 12 with your Secret Key (in the window you previously left open)
  7. Open 'script.php' and update Lyris list name on line 81.
  8. Tar.gz the folder and upload to your site. Create AJAX structure and assign to newly uploaded AJAX template.

// Adding API

  1. Open template you would like to implement reCAPTCHA on. For this example, lets use the front page 'template.htm'.
  2. Paste this snippet directly below the closing head tag on your front page template.
  3. Update line 4 with your API Key from the window you left open
  4. If you have more than one form that needs reCaptcha on a page then you can uncomment line 5 below and update that site key as well.
  5. Save and Upload

// Form

  1. Use the code below in 'form.html' and insert into any AJAX simple signup form on your site.
  2. You can put in right before the 'submit' input button (Note: If you have more than one form on a page and have uncommented the code as mentioned in 12. above, then the 2nd form should have id="Repatcha2" )
  3. Save and upload

// CSS

  1. Add the CSS found below in 'recaptcha.css' to your main CSS file. You may need to add more styles to tweak the .recaptcha div to fit your site perfectly
  2. Save and Upload.

// JS

  1. Add line 2 of 'script.js' below to the beginning of your form submit function in the main JS file of the template your are working on.
  2. In the example below in 'script.js', you will see the whole form submit function. Make sure you have line 28, the recaptcha reset, inserted into your form submit function as well.
  3. Save and Upload.

IF YOU HAVE ANY QUESTIONS, SPEAK WITH DUSTIN

script.js
content_copyfile_download
//INSERT THIS ON THE LINE ABOVE YOUR FORM SUBMIT FUNCTION
$('form.signup input').on('click touch', function(){$('.recaptcha').addClass('show');});


//EXAMPLE
/* INSERT THE LINE ABOVE WHERE THIS COMMENT IS */
$('form.signup').submit ( function() {

    $(".signup-message").empty().hide();

    var $form = $(this),
    formData = $form.serialize(),
    formUrl = $form.attr('action'),
    formMethod = $form.attr('method'),
    responseMsg = $('.signup-message');

    $.ajax({
      url: formUrl,
      type: formMethod,
      data: formData,

      success:function(data){

        var responseData = jQuery.parseJSON(data);
        switch(responseData.SUCCESS){
        case 'false':
          /* INSERT LINE 28 BELOW */
          grecaptcha.reset();
          responseMsg.empty().hide().fadeIn('slow').append(responseData.CONFIRMATION);
          break;
        case 'true':
          console.log('true');
          $form.hide();
          responseMsg.empty().hide().fadeIn('slow').append(responseData.CONFIRMATION);
          break;
        }
      }
    });
  return false;
  });
};
recaptcha.css
content_copyfile_download
.recaptcha {
  display: none;
  height: 0;
  position: relative;
  padding-bottom: 5px; 
}

.recaptcha.show {
  display: block;
  height: auto; 
}
form.html
content_copyfile_download
<!-- INSERT THIS LINE ABOVE SUBMIT BUTTON then -->
<div id="Recaptcha1" class="recaptcha"></div>   

<!--///// EXAMPLE /////-->
<div id="subscribe">
  <div class="container">
    <div id="signup-text"><h2>Subscribe for Updates</h2></div>
    <div id="signup-info">
      <form action="[[PATH]]ajax/" method="post" class="secure signup">
        <div class="textbox signup-name"><input placeholder="Name" name="name" type="text" /><div class="line"></div></div>
        <div class="textbox signup-email required"><input placeholder="Email Address" name="email" type="text" /><div class="line"></div><span class="error-tooltip"><span>Oops!</span> Please input a valid email address.</span></div>  
        <!-- Recaptcha -->
        <div id="Recaptcha1" class="recaptcha"></div>      
        <div class="signup-submit"><input name="submit" type="submit" value="Subscribe" class="button" /></div>
      </form>
      <div class="signup-message"></div>
    </div>
  </div>
</div>
template.htm
content_copyfile_download
<!--RECAPTCHA IMPLEMENTATION-->
<script type="text/javascript">
  var CaptchaCallback = function() {
    if($('#Recaptcha1').length){grecaptcha.render('Recaptcha1', {'sitekey' : '6LdHSDQUAAAAADhQwWN4wDE5NFM9t8mOnUvPTGHy', 'theme' : 'dark' });}
    <!-- if($('#Recaptcha2').length){grecaptcha.render('Recaptcha2', {'sitekey' : '6LdHSDQUAAAAADhQwWN4wDE5NFM9t8mOnUvPTGHy'});} -->
  };
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>