Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lori StippLori Stipp 

Enable Submit button based on reCAPTCHA results

I am trying to use the new reCAPTCHA capability on a Web-to-Lead contact form that is being displayed on a Weebly website. I would like to enable my Submit button based on successful result form the reCAPTCHA. Right now, the user can still click the Submit even if they haven't check the reCAPTCHA checkbox. A lead isn't actually created, which is good, but it just goes on to my "Thank you" page, giving the user the impression they have submitted their contact  info. 

Here is the HTML at the end of my Web-to-Lead form that handles the reCAPTCHA. callValidation() is a function that checks to see whether the user has entered required fields in the form.
  
<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div><br>
<div id="button">
  <input id="sell_house_submit" type="submit" name="submit" value="Get My Free Quote!" onclick="return callValidation();">
 </div>

I'm not an HTML/Javascript wizard. Can anyone help me?

TIA!
Best Answer chosen by Lori Stipp
Lori StippLori Stipp
I decided to solve my problem by adding extra code to my callValidation method to test for a successful result from the reCAPTCHA. Here's my callValidation method:
  
<script type="text/javascript">
    function callValidation(){

        if(document.getElementById('first_name').value == ''){
            alert('Please enter First Name');
            return false;
        }

        ..... validate other form fields here ....

        else if(grecaptcha.getResponse().length == 0){
            alert('Please click the reCAPTCHA checkbox');
            return false;
        }
        return true;
    }
</script>

 

All Answers

Lori StippLori Stipp
I decided to solve my problem by adding extra code to my callValidation method to test for a successful result from the reCAPTCHA. Here's my callValidation method:
  
<script type="text/javascript">
    function callValidation(){

        if(document.getElementById('first_name').value == ''){
            alert('Please enter First Name');
            return false;
        }

        ..... validate other form fields here ....

        else if(grecaptcha.getResponse().length == 0){
            alert('Please click the reCAPTCHA checkbox');
            return false;
        }
        return true;
    }
</script>

 
This was selected as the best answer
Sombit MishraSombit Mishra
Lori, there is a simpler way to disable the Submit button without using the onclick function.  Google has two callback functions: data-callback and data-expired-callback (the latter in case the CAPTCHA expires).  Here's what your HTML should look like: 
<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" data-callback="recaptcha_callback"></div>

<div id="button">
  <input disabled="disabled" id="sell_house_submit" type="submit" name="submit" value="Get My Free Quote!">
 </div>
Note that in the above, I have:

1) added the data-callback function in the CAPTCHA div above and given it a name "recaptcha_callback".  
2) added the ' disabled="disabled" ' attribute to the input tag.  This disables the input field by default.  You can also do this in jQuery but for this purpose, the above is more than sufficient.
3) removed the onclick function, which is no longer necessary given the data-callback function.

 In your JS script, you can then add the "recaptcha_callback" function as follows:  
<script type="text/javascript">
       function recaptcha_callback() {
       $('#sell_house_submit').removeAttr('disabled');
        };                                  
 </script>
This function removes the "disabled" attribute from your input submit field only after the reCaptcha data-callback is complete.

If you want to go the extra mile, I'd recommend some CSS to change the look and feel of the button to grey and unclickable (so as to not confuse the user). The following CSS would do the basic trick for the inactive state: 
input[disabled]#sell_house_submit,
input[disabled]#sell_house_submit:hover,
input[disabled]#sell_house_submit:active,
input[disabled]#sell_house_submit:focus { 
        background: #CCCCCC;
        box-shadow: none;
        outline: none;
        opacity: 0.5;
        text-decoration: none;
}

 
Patrick BaumannPatrick Baumann
Thank you Sombit! When implementing your solution on a wordpress site, I get the javascript error: "$ is not a function". Any idea how to solve this? 

User-added image
Sombit MishraSombit Mishra
Hi, Patrick.  Without seeing the code, I can't be certain.  My guess is that your recaptcha_de.js file is in the <head> tag. If you're using pure javascript (no jquery), you want to put the script in the <body> tag as it's not a global reference.   Put the following script inside the <body> tag (change #sell_house_submit to your form submit ID of course)...should work.
  
​<script type="text/javascript">
      function recaptcha_callback() {
      $('#sell_house_submit').removeAttr('disabled');
       };                                 
</script>

 
Patrick BaumannPatrick Baumann
Thank you Sombit for your efforts. Your guess was right, the recaptcha_de.js file was in the head. However, moving your snippet to body didn't change anything. Or did you mean I should move the recaptcha_de.js file to the body, too?

I used Lori's solution now which works. But thank you again for your time!
Sombit MishraSombit Mishra
Glad you were able to make it work...ultimately, as long as it keeps spam out, it's a win. Regarding js file references, no, you should not put those in the body.  My initial post assumes you've already included the below Google Recaptcha Javascript (included in the default SalesForce Web-to-Lead generator code) in your <head> tag. 
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
 function timestamp() { var response = document.getElementById("g-recaptcha-response"); if (response == null || response.value.trim() == "") {var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);elems["ts"] = JSON.stringify(new Date().getTime());document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems); } } setInterval(timestamp, 500); 
</script>
Patrick BaumannPatrick Baumann
I did. Maybe there was some conflict with the wordpress theme. Thanks anyway!
Sanne Kjær Sørensen 3Sanne Kjær Sørensen 3
Hi I also got this problem. The form works when the user is checking the box, but I do nothing (do not check the box "I am not a robot) the form is send, but data will not entering into Salesforce. I do a little Apex and some HTML.
I tried to add this to the web to lead form: 
User-added image

 
Lokesh Krishna SagiLokesh Krishna Sagi
Hi All,

For me, disabling the submit button and enabling it when user checks the reCaptcha etc is working fine. But, the leads are not being created in Salesforce after submitting the forms. Please Help!!!
Lokesh Krishna SagiLokesh Krishna Sagi
I have created 2 web-to-lead forms with 2 different keys and hosted the forms in two different domains. In first domain, everything works fine and lead is showing in Salesforce. But, in the 2nd domain, lead is getting generated after submitting. Both forms are created in same org. Both forms have exact fields..I have checked org Id and its correct..Please help!!
Jason Miller 105Jason Miller 105
We had the same issue, this worked for us:

<script type="text/javascript">
            function recaptcha_callback() {
                console.log('contact callback');
                jQuery( "#submit-contact" ).prop( "disabled", false );
            };                                  
</script> 

<input disabled="disabled" id="submit-contact" name="submit" type="submit" value="Submit">