Invisible Google reCaptcha

Ich weiß, diese Art von Frage wurde zuvor gestellt, aber ich konnte die Antwort nicht erhalten. Ich habe ein Kontaktformular und möchte das neue Invisible Google Recaptcha implementieren. Allerdings habe ich eine <input> anstelle einer <button> verwendet und ich kann nicht herausfinden, wie dies zu tun ist. Hier ist mein Code für das Kontaktformular Ich habe:Invisible Google reCaptcha

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>

Dann habe ich die Google ReCaptcha-Taste:

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

Jede Hilfe würde geschätzt . Außerdem habe ich mich gefragt, ob Sie das ReCaptcha-Logo unten rechts entfernen könnten.

Quelle

2017-04-10 Sank6

Aus den reCaptcha docs überprüfen diese g-recaptcha Tag-Attribute und Parameter grecaptcha.render Abschnitt:

g-recaptcha Tagattribut: data-Badge
grecaptcha.render Parameter: Abzeichen
Wert: bottom~~POS=TRUNC bottom Inline
Standardeinstellung: unten rechts
Beschreibung: Optional. Positionieren Sie das reCAPTCHA-Badge neu. 'Inline' erlaubt Ihnen, das CSS zu steuern.

Dies ist eine grundlegende 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>

Stellen Sie die data-badge Attribut inline, bemerken die data-badge="inline":

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

Und auf den HTML-Code:

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

Sie könnten auch zu Ihrem CSS nur hinzufügen:

.grecaptcha-badge { 
    display: none; 
}

Quelle

2017-09-25 09:37:11 nbari

dies versuchen, Es wird die Google reCaptcha Invisible Badge über der Seite auszublenden.

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

Halten Sie das Abzeichen angezeigt werden soll, wie Google die „Privatsphäre“ und „Begriffe“ Links gibt vor, anwesend zu sein im Auge behalten.

Quelle

2017-04-10 18:03:18 Vigneshwar

Es klingt wirklich gut, aber ich bin nicht sehr gut darin, so dass ich nur Platz diesen Code in meinem CSS? Benutze ich das normale Recaptcha und füge dieses oder das Unsichtbare hinzu?Vielen Dank für Ihre Hilfe – Sank6

Platzieren Sie diese in CSS-Code. –

Invisible Google reCaptcha

Antwort

Verwandte Themen