Google Recaptcha is not working on localhost. I have used the admin console to create a key just for localhost and I have even disabled domain validation under advanced settings. I still get an error indicating that localhost is not on the list of supported domains. Code is below
in the head tag of HTML
<script src='https://www.google.com/recaptcha/api.js'></script>
In the body tag of HTML
<div class='form-group'>
<div class="g-recaptcha"
datasitekey="6Leefj0UAAAAAAb8CMhdkGZxmVVhKGxMGkUPqB6z"></div>
</div>
The above site key doesn't have domain validation enabled (I have disabled it out of desperation). So anyone should be able to replicate this error using it. How do I get Google Recaptcha to work?
Related
welcome. I made an experiment project to check (laravel-with-vue) and uploaded it to Heroku. But the screen appears blank and when checking the item it appears:
<body data-new-gr-c-s-check-loaded="14.1012.0" data-gr-ext-installed="" cz-shortcut-listen="true">
<div id="app">
<app></app>
</div>
<!-- Scripts -->
<script src="http://blogy-new.herokuapp.com/js/app.js"></script>
</body>
And this website for more details: https://blogy-new.herokuapp.com/
But on localhost it works fine:
in heroku :
Your problem is super straight forward to fix, if you check the chrome console, you will see this error:
Mixed Content: The page at 'https://blogy-new.herokuapp.com/' was loaded over HTTPS, but requested an insecure script 'http://blogy-new.herokuapp.com/js/app.js'. This request has been blocked; the content must be served over HTTPS.
It is saying that you are asking for your js file using HTTP, but your page is HTTPS, so you have to rewrite your js file URL to HTTPS and it will be fixed:
<script src="https://blogy-new.herokuapp.com/js/app.js"></script>
It is working in your localhost because it is HTTP.
I am currently trying to add reCAPTCHA on the client side and I have followed the documentation accordingly from both Google and reCAPTCHA's website. However, for some reason I keep getting this error message:
I've placed my script tag in the head and my reCAPTCHA div just before the closing form tag.
<!-- Google reCAPTCHA API -->
<script src='https://www.google.com/recaptcha/api.js' async defer> </script>
<form action="URL: https://www.google.com/recaptcha/api/siteverify" method="POST"> -->
<!-- reCAPTCHA Widget Appears Here -->
<div class="g-recaptcha" data-theme="darklight" data-sitekey="my_public_sitekey"></div> -->
</form>
Please let me know if you need to see more of my code. From what I've read in other forums people had to disable domain name validation, however, that causes issues with verification.
Any help is much appreciated. Thanks!
After hours and days of research I've finally found a solution. This error is actually a reCAPTCHA issue that still has not been fixed. You can work around their protocol issues and disable domain check in advance settings. However, that can potentially mess up the validation process.
Initially I was testing this locally file:///users/file-path-to-my-file. Finally last night I found out you cannot use reCAPTCHA this way. I ended up testing my site publicly and now it works just fine. Hope this helps someone!
You have to replace my_public_sitekey with your site key which provided by Google
finally, your cod should be like this
<div class="g-recaptcha" data-theme="darklight" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div>
if you are testing your site in localhost, you should get a reCaptcha key for localhost.
Disable this option in settings:
Verify the Android package name of reCAPTCHA solutions.
This solved my problem.
I am trying to implement a Stripe payment solution on my Google Site using Google Apps Script (“GAS”) and Stripe.com.
Stripe makes the following code available for testing.
<div>
<form action="/charge" method="POST">
<script
src="https://checkout.stripe.com/checkout.js"
class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-image="/square-image.png"
data-name="Demo Site"
data-description="2 widgets ($20.00)"
data-amount="2000">
</script>
</form>
</div>
The code works here on jsfiddle but fails in my GAS index.html file.
Note that when I look inside my Console page in my Chrome developer tools, I see the following error message:
TypeError: Cannot read property 'StripeCheckout' of undefined
What’s going wrong? And what’s the solution?
Note upfront: I do not have any experience using scripts but only some basic HTML and PHP skills.
I would like a page on my google site to refresh automatically as soon as the embedded google form was submitted. This to instantly display the embedded and updated google form results after the button is clicked without the visitor having to reload the page manually. (like you would have for any online poll)
My form sheet is updating perfectly but I have not yet found an example or tutorial how to make a page refresh work for the google site with an embedded google form when the submit button is clicked. I hope someone can help me by providing an example on how to make this work. Preferably I would like to use an embedded google form rather than having to create a separate PHP form loading into google forms what could be an alternative. Thanks.
Below the HTML as I can see it on my Google page. I would need a trigger I guess from these embedded forms to refresh the page on submit. I just have no idea on how to get this done.
<div>
<div style="text-align:left">
<div><img src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BSpreadsheet+form'%3D20'f%5Cv'a%5C%3D0'10'%3D499'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22test+int+sheet%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D500'%3D397'dim'%5C%3D10'%3D10'%3D500'%3D397'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&sig=5VZGSIULBu8sSdf833qiLWVDcx8" data-origsrc="1VACx4d2pJEZlvAezbO9Gnh_nX3nIPwSJ4iCNjEmCiUM" data-type="spreadsheet-form" data-props="align:center;borderTitle:test int sheet;doctype:freebird;height:400;objectTitle:test int sheet;showBorder:false;showBorderTitle:false;wrap:false;" width="500" height="400" style="display:block;margin:5px auto;text-align:center;"></div>
<br>
</div>
<div style="text-align:left"><img src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BGoogle+Gadget'%3D20'f%5Cv'a%5C%3D0'10'%3D499'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22Include+gadget+(iframe)%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D500'%3D397'dim'%5C%3D10'%3D10'%3D500'%3D397'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&sig=t6_Deqv8rgMQCB28aqz1n9MoVTU" data-igsrc="http://164.gmodules.com/ig/ifr?mid=164&synd=trogedit&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&up_iframeURL=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM%2Fpubhtml%3Fgid%3D754672963%26single%3Dtrue&up_scroll=no&h=400&w=100%25" data-type="ggs-gadget" data-props="align:center;borderTitle:Include gadget (iframe);height:400;igsrc:http#58//164.gmodules.com/ig/ifr?mid=164&synd=trogedit&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&up_iframeURL=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM%2Fpubhtml%3Fgid%3D754672963%26single%3Dtrue&up_scroll=no&h=400&w=100%25;mid:164;scrolling:no;showBorder:false;showBorderTitle:null;spec:http#58//hosting.gmodules.com/ig/gadgets/file/106581606564100174314/iframe.xml;up_iframeURL:https#58//docs.google.com/spreadsheets/d/1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM/pubhtml?gid=754672963&single=true;up_scroll:no;view:default;width:100%;wrap:false;" width="500" height="400" style="display:block;margin:5px auto;text-align:center;" class="igm"></div>
<div style="text-align:left"><br>
</div>
<div style="text-align:center">
<div></div>
<br>
</div>
<div style="text-align:left">
<div style="text-align:center"><br>
</div>
<div style="text-align:center"><br>
</div>
<br>
</div>
</div>
I'm sorry to be the annunciator of a such bad news but that's impossible.
As your code show, you are actually using a google Site to display your google form. The line:
<img src="https://www.google.com/chart?chc=sites&cht=d&...
IS the way google tell you there is a google form in this page when you hit the button to get the source code.
In other words: google don't let you put whatever you want in a google site. It's impossible to add some JS code that will be fired when the user submit the form.
Even if you host your form in something else than a google Site, you won't have this ability, as the form himself will be displayed in an iframe that can't be modified by external scripts.
This is an hard limitation of Google Form, the only workaround that you may use is to write to the user in the confirmation message of the form that he now need to reload the page or go to an other link.
I am using Knews plugin for subscribing to my website. Everything is working except IE8: in IE 8 error or success message is not showing. I think since this is an AJAXed form I am getting an AJAX response with some unnecessary HTML tags.
Please see the screenshot. I provide this in the backend:
<span class="error_subscription">Please check e-mail Address</span>
But I am getting the response as on the screenshot:
<span class="error_subscription">Please check e-mail Address</span></p></div>