[Blogger Template]KontactにreCAPTCHAを付ける

デモ > https://kontact-form.blogspot.com/

• [Pre-Release][Blogger Template]Kontact
• [Pre-Release 2][Blogger Template]Kontact

Bloggerの「連絡フォーム」ガジェットにreCAPTCHAを付けた件ですが、Kontactに実装する方法

Bloggerデフォルトの「連絡フォーム」ガジェットと元のソースコードは同じなので、Kontactでなくても実装出来ますが、スタイルが決まって無いと見た目が微妙になってしまうのでオススメはしません

reCAPTCHA

reCAPTCHA によるウェブサイトのセキュリティと不正防止 | Google Cloud
https://cloud.google.com/security/products/recaptcha

スクロールして 使ってみる のボタンをクリック
(リンク先: https://www.google.com/recaptcha/admin/create)

ラベルの例

blogname.blogspot.com

reCAPTCHA タイプ

チャレンジ（v2）を選択 > 「私はロボットではありません」チェックボックス を選択

ドメイン

blogname.blogspot.com

送信

サイトキー をコピーして控えておきます

Kontact

<title>タグ下に追加

    <script async='async' defer='defer' src='https://www.google.com/recaptcha/api.js'/>
    <script crossorigin='anonymous' src='https://code.jquery.com/jquery-4.0.0.min.js'/>

連絡フォーム部分変更前

        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>

連絡フォーム部分変更後

        <div class='g-recaptcha' data-callback='clearcall' data-sitekey='サイトキー'/>
        <button class='contact-form-button contact-form-button-submit' disabled='' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'>送信</button>

先ほどの サイトキー を入れます

</body>上に追加

<script>
//<![CDATA[
function clearcall(code) {
  if(code !== ""){
    $('#ContactForm1_contact-form-submit').removeAttr("disabled");
  }
}
//]]>
</script>

おわり