Skip to content

Instantly share code, notes, and snippets.

@robbiegod

robbiegod/MultipleGoogleRecaptchas.html

Last active November 18, 2015 15:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robbiegod/7202ff1bd0eb0dd5c6f3 to your computer and use it in GitHub Desktop.
Save robbiegod/7202ff1bd0eb0dd5c6f3 to your computer and use it in GitHub Desktop.
Download ZIP
Load multiple Google reCaptchas 2.0 into a single page.
Raw
MultipleGoogleRecaptchas.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Google reCaptchas 2.0 w/ CaptchaCallback</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
</head>
<body>
<!-- Form #1 -->
<form data-formid="4436">
<h1>Form 1</h1>
<div><input type="text" name="field1" placeholder="field1"></div>
<div><input type="text" name="field2" placeholder="field2"></div>
<div id="sem-captcha-4436"></div>
<div class="submit-box">
<input type="submit">
</div>
</form>
<!-- Form #2 -->
<form data-formid="4417">
<h1>Form 2</h1>
<div><input type="text" name="field3" placeholder="field3"></div>
<div><input type="text" name="field4" placeholder="field4"></div>
<div id="sem-captcha-4417"></div>
<div class="submit-box">
<input type="submit">
</div>
</form>
<script type="text/javascript">
//*****************************//
// For use with Google reCaptcha v2.0
// @script_version = 0.5
// @author - Crosby Marketing
// Creation Date: 11/17/2015
//*****************************//
var $ = jQuery.noConflict();
var CaptchaCallback = function(){
$("form").each(function() {
var formID = $(this).data("formid");
if( formID !== undefined){
grecaptcha.render('sem-captcha-'+formID, {'sitekey' : '{site_key_get_from_google}}'});
}
});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment