Make Google reCaptcha field mandatory on a custom form (works fine on contact us and login form but not on a custom form)

Question

I have a custom form and need to make recaptcha a mandatory field. It works just fine on a login and contact us page but not a separate custom form.

code for a .phtml file is below-

<?php
$url = $_SERVER['REQUEST_URI'];
$productName =  parse_url($url, PHP_URL_QUERY);
$productName = str_replace("%20"," ",$productName);
?>

<form class="quoteform" action="<?php echo $block->getBaseUrl().'quote/index/post/';?>" id="quoteform" method="POST">
 <class="pro_name"><h2>Quote for: <strong><?php echo $productName?></strong></h2>
  <label for="organisation">Organisation Name:</label>
  <input type="text" id="organisation" name="organisation" value="" data-validate="{required:true}" placeholder="Organisation Name">
  <label for="contact">Contact Name:</label>
  <input type="text" id="contact" name="contact" value="" data-validate="{required:true}" placeholder="Contact Name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" data-validate="{required:true}" placeholder="Email Address">
  <label for="productname">Quote For:</label>
   
   <input type="hidden" id="productname" name="productname" value="<?php echo $productName?>">
    <label for="telephone">Contact Number:</label>
  <input type="text" id="telephone" name="telephone" value="" placeholder="Phone Number">
  <textarea name="comment" placeholder="Comment"></textarea>
  <!--<input type="checkbox" id="chk" name="chk" value="quote" placeholder="I'd like a free trial" checked="true">
  <label for="chk"> I'd like a <strong>free trial</strong></label>-->

  <p class="free-trial-wp">
  <input type="hidden" name="all_sizes" value="No">
  <input type="checkbox" placeholder="I 'd like a free trial" name="all_sizes" value="Yes" checked><span></span>&nbsp; I'd like a <strong>free trial</strong></p>


  <div class="g-recaptcha" data-sitekey="<?php echo '6LeeiO0UAAAAAMsNCF6nM5ORROe21Ony' ?>" data-validate="{required:true}"></div>
  <span class="mage-error captcha-error" style="display: none;">This is a required field.</span>
  <div>
  <input type="submit" class="submit-form">
</div>
</form>
<script type="text/javascript">
require([
    'jquery',
    'mage/mage'
], function($){
   var dataForm = $('#quoteform');
   dataForm.mage('validation', {});
   $('.submit-form').click(function(){
    if (grecaptcha.getResponse() == ""){
     $('.captcha-error').show();
    } 
    else{
      $('.captcha-error').hide();
    }
   });
   


});
</script>

Answer 1

Try this code

<?php
$url = $_SERVER['REQUEST_URI'];
$productName =  parse_url($url, PHP_URL_QUERY);
$productName = str_replace("%20"," ",$productName);
?>

<form class="quoteform" action="<?php echo $block->getBaseUrl().'quote/index/post/';?>" id="quoteform" method="POST">
 <class="pro_name"><h2>Quote for: <strong><?php echo $productName?></strong></h2>
  <label for="organisation">Organisation Name:</label>
  <input type="text" id="organisation" name="organisation" value="" data-validate="{required:true}" placeholder="Organisation Name">
  <label for="contact">Contact Name:</label>
  <input type="text" id="contact" name="contact" value="" data-validate="{required:true}" placeholder="Contact Name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" data-validate="{required:true}" placeholder="Email Address">
  <label for="productname">Quote For:</label>
   
   <input type="hidden" id="productname" name="productname" value="<?php echo $productName?>">
    <label for="telephone">Contact Number:</label>
  <input type="text" id="telephone" name="telephone" value="" placeholder="Phone Number">
  <textarea name="comment" placeholder="Comment"></textarea>
  <!--<input type="checkbox" id="chk" name="chk" value="quote" placeholder="I'd like a free trial" checked="true">
  <label for="chk"> I'd like a <strong>free trial</strong></label>-->

  <p class="free-trial-wp">
  <input type="hidden" name="all_sizes" value="No">
  <input type="checkbox" placeholder="I 'd like a free trial" name="all_sizes" value="Yes" checked><span></span>&nbsp; I'd like a <strong>free trial</strong></p>


  <div class="g-recaptcha" data-sitekey="<?php echo '6LeeiO0UAAAAAMsNCF6nM5ORROe21Ony' ?>" data-validate="{required:true}"></div>
  <span class="mage-error captcha-error" style="display: none;">This is a required field.</span>
  <div>
  <input type="submit" class="submit-form"  id="form-submit">
</div>
</form>
<script type="text/javascript">
require([
    'jquery',
    'mage/mage'
], function($){
      $(document).on('click', '#form-submit', function(){
        $("#quoteform").on('submit', function(e) {
          if($( '#g-recaptcha' ).length)
          {
            response = grecaptcha.getResponse();
              //alert(response.length);
            if (response.length === 0)
            {
              $('.captcha-error').show();
              e.preventDefault();
            }
            else
            {
              $('.captcha-error').hide();
            }
          }
        });
    });
});
</script>

Answer 2

Try this https://meetanshi.com/blog/add-google-recaptcha-to-magento-2/ surely short out your problem.

Happy coding