0

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>

form screenshot

4
  • Refer link magento.stackexchange.com/questions/133238/… Oct 26, 2020 at 3:54
  • @rakesh The link is about how to add captcha to custom form, which is done I am after how to make it mandatory by looking at the code I posted.
    – Neha
    Oct 26, 2020 at 4:57
  • please refer my answer check and update me. Oct 26, 2020 at 17:52
  • This is not a magento default way to show google recaptcha. Oct 26, 2020 at 17:53

2 Answers 2

0

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>
1
  • no it didn't work, on page load I directly clicked on Submit button to see if it shows google captcha as a mandatory field but the whole page went blank.
    – Neha
    Oct 27, 2020 at 2:31
0

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

Happy coding

1
  • Thanks Nilesh, didn't work, tried the same way as explained in the meetanshi link you posted. Can you look into my code above and suggest something?
    – Neha
    Nov 6, 2020 at 3:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.