Invisible Google reCaptcha

私はこのタイプの質問が以前に尋ねられたことを知っていますが、私は答えを得ることができませんでした。私は連絡フォームを持っています。私は新しいInvisible Google Recaptchaを実装したいと思います。しかし、<button>ではなく<input>を使用しましたが、これを行う方法を理解できません。ここで私が持っている連絡先フォームのための私のコードは次のとおりです。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>

その後、私はGoogleのreCAPTCHAのボタンがあります。

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

どれヘルプをいただければ幸いです。また、右下にReCaptchaのロゴを取り除くことができるかどうかは疑問でした。

出典

2017-04-10 Sank6

チェックこのG-reCAPTCHAのタグ属性とgrecaptcha.renderパラメータセクション：

G-reCAPTCHAのタグ属性：データ・バッジ
grecaptcha.renderパラメータ：バッジ
値：bottomright bottomleft インライン
デフォルト：bottomright
説明：オプション。 reCAPTCHAバッジを再配置します。 'インライン'では、CSSを制御できます。

これはdata-badge="inline"に気づく、inlineにdata-badge属性を設定し、基本的な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>

です：

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

HTMLコード上：

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

また、単にあなたのCSSに追加することができます。

.grecaptcha-badge { 
    display: none; 
}

出典

2017-09-25 09:37:11 nbari

は、それがページ上でGoogleのreCAPTCHAの目に見えないのバッジを非表示になり、これを試してみてください。

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

Googleが存在すると、「プライバシー」と「用語」のリンクをふりとしてバッジが表示されなければならない点に注意してください。 reCaptchaドキュメントから

出典

2017-04-10 18:03:18 Vigneshwar

ので、私はちょうど私のCSSでこのコードを配置しますそれは本当に良い音が、私はこれで非常に良いではありませんよ？私は通常のrecaptchaを使用し、これまたは不可視のものを追加しますか？あなたの助けをありがとうございました – Sank6

これをCSSコードに入れてください。 –

答えて

関連する問題