Add google captcha into all shopify contact form dynamically with code

Add google captcha into all shopify contact form dynamically with code

June 7, 2022

A call back function with your sitekey

var onloadCallback = function() {
        grecaptcha.render('google_recaptcha', {
          'sitekey' : '6LfuSSwgAAAAABA64Rh96BXw94UtKwqLxXC9j2rP'
        });
      };

Add form Dynamically to all contact forms

jQuery(document).ready(function ($) {
   
  $("form").each(function() {
    action = $(this).attr('action');
    if(action){
  
      if(action.includes('/contact')){
       	$(this).addClass('captcha-validate'); 	
         $(this).find('input[type="submit"]').before('<div id="google_recaptcha"></div>');
         	setTimeout(function(){onloadCallback();},1000);          
      }
    }		
  });
  
  //validate the captcha 
  $('.captcha-validate').submit(function(e){
          //e.preventDefault()
          //onloadCallback();
          var response = grecaptcha.getResponse()
          if(response.length === 0){
           alert('Please verify that you are not a robot');
            return false; 
          }else{
              return true;
          }
         grecaptcha.reset();
     })

If you facing an issue to implementation contact us we will help to fix it.

Share This Story, Choose Your Platform!

Lets Discuss On Your Store