こんにちは、よしなおです！
当サイトのお問い合わせフォームはSSGFromにて実装していますが、
実装方法をご紹介します。
当記事では以下の構成で
- Astro
- SSG Form
- reCAPTCHA v3
google reCAPTCHAでアカウトを作成する
https://www.google.com/recaptcha/adminにアクセスし、
サイトキーとシークレットキーを入手する。
<head>タグ内に以下のコードを記載します
<script is:inline src="https://www.google.com/recaptcha/api.js"></script>is:inlineは必ず入れて下さい。
https://docs.astro.build/ja/guides/client-side-scripts/
<script is:inline>
function onSubmit(token) {
var form = document.getElementById("form");
if (form.reportValidity()) {
form.submit();
}
}
</script>フォームのコード
<form action="ここにSSGFromのURL" method="post" id="form">
<div class="input-box">
<label for="user-name">お名前</label>
<input type="text" id="user-name" name="お名前" required="required" />
</div>
<div class="input-box">
<label for="user-email">メールアドレス</label>
<input type="email" id="user-email" name="メールアドレス" required="required" />
</div>
<div class="input-box">
<label for="contact-contents">お問い合わせ内容</label>
<textarea id="contact-contents" name="お問い合わせ内容" required="required"></textarea>
</div>
<div class="btn-wrap">
<button
class="g-recaptcha btn"
data-sitekey="ここにサイトキー"
data-callback="onSubmit"
data-action="submit">送信する
</button><!-- 専用classとdata-属性を設定 -->
</div>
</form>