All geek questions in one place

Invisible Google reCaptcha

I know this question was asked before, but I could not get an answer. I have a contact form and I want to implement a new invisible Google Recaptcha. However, I used <input> , not <button> , and I cannot figure out how to do this. Here is my code for the contact form:

 input, textarea { padding: 5px; margin: 10px; font-family: Cambria, Cochin, serif; font-size: medium; font-weight: bold; outline: none; } input[type=text], textarea { width: 350px; background-color: #b6b6b4; border: 1px solid #989898; border-radius: 10px; } input[type=submit] { width: 100px; background-color: #989898; border: 1px solid #707070; font-size: large; color: #000; border-radius: 5px; } input[type=submit]:hover { background-color: #848484; cursor: pointer; } input[type=submit]:active { background-color: #989898; } 
 <script src="https://www.google.com/recaptcha/api.js"></script> <!--CONTACT FORM--> <form name="contactform" method="post" action="send_form_email.php"> <div> <input name="name" type="text" placeholder="Name..." required> <br> </div> <div> <input name="email" type="text" placeholder="Email..." required> <br> </div> <input type="checkbox" name="maillist" value="1" checked> Subscribe to mailing list<br> <div> <input name="game" type="text" placeholder="Game suggestions..."> <br> </div> <div> <textarea cols="30" name="comment" rows="9" placeholder="Comments..."></textarea> <br> </div> <div> <input name="submit" type="submit" value="Submit"> </div> </form>

Then I have a google ReCaptcha button:

 <button class="g-recaptcha" data-sitekey="############################" data-callback="YourOnSubmitFn"> Submit </button>

Any help would be greatly appreciated. Also, I was wondering if it is possible to remove the ReCaptcha logo in the lower right corner.

This image shows what I mean.

+5
source share
2 answers

From reCaptcha docs check the attributes of the g-recaptcha tag and the grecaptcha.render parameters section:

  • g-recaptcha tag attribute : data icon
  • grecaptcha.render parameter : icon
  • Value : bottom bottom left row
  • Default : rightright
  • Description : optional. Move the reCAPTCHA icon. "inline" allows you to control CSS.

This is a basic example.

 <html> <head> <title>reCaptcha example</title> <script src='https://www.google.com/recaptcha/api.js'></script> <style> .grecaptcha-badge { display: none; } </style> </head> <body> <form id="demo-form" action="/post" method="post"> <button data-sitekey="your_site_key" data-callback='onSubmit' data-badge="inline">Login</button> </form> </body> </html>

Set the data-badge attribute to inline , pay attention to data-badge="inline" :

 <button type="submit" data-sitekey="your_site_key" data-callback='onSubmit' data-badge="inline">Login</button>

And in the html code:

 <style> .grecaptcha-badge { display: none; } </style>

You can also add to your CSS:

 .grecaptcha-badge { display: none; }
+1
source

try this, it will hide the invisible google reCaptcha icon on the page.

.grecaptcha-badge { display: none !important; }

Remember that the icon should be displayed as Google pretends that links to privacy and "conditions" are present.

+4
source

Source: https://habr.com/ru/post/1266547/

More articles:


All Articles