【SSGform】お問い合わせフォームのスパム対策をする
2024/10/15このページはPRを含みます
SSGformで構築したお問い合わせフォームのスパム対策をする。
参考にしたページ
簡易スパム対策を有効にする
簡易スパム対策機能があるようなので有効にした。<input type="text" name="wana" />という部分を追記すればよいらしい。以下はこのサイトの実装例。
import styles from "./page.module.css";
import Link from "next/link";
export default function Page() {
return (
<div>
<section className={styles.section}>
<h1 className={styles.h1}>お問い合わせ</h1>
</section>
<p className={styles.text}>
ご質問、ご相談は下記フォームよりお問い合わせください。
<br />
お返事までお時間をいただく場合がございます。ご了承のほどよろしくお願いいたします。
</p>
<form
className={styles.form}
action="https://ssgform.com/s/i767b5V39NXh"
method="post"
>
<div className={styles.wama}>
<input type="text" name="wana" />
</div>
<input
className={styles.input}
type="text"
name="お名前"
placeholder="お名前"
required
/>
<input
className={styles.input}
type="email"
name="メールアドレス"
placeholder="メールアドレス"
required
/>
<textarea
className={styles.textarea}
name="お問い合わせ内容"
placeholder="お問い合わせ内容"
required
></textarea>
<p className={styles.text}>
<Link href="/privacy" className={styles.link}>
プライバシーポリシー
</Link>
にご同意の上、送信してください。
</p>
<button className={styles.button} type="submit">
送信する
</button>
</form>
</div>
);
}
フォーム側の設定を変更する
送信制限設定の設定で送信元ホストを「monaka496.com」にした。これで指定のホストからしかフォーム投稿を受け付けなくなる。もし許可していないホストから送信された場合は以下のような表示になる(試しにlocalhost環境でフォーム投稿をしてみた)
まとめ
これで簡易的なスパム対策は完了だ。reCAPTCHAなども設定できるようだが、Google cloudに登録しなければならなかったようで、素人には少し敷居が高かったのでやめてしまった(やろうと思えば簡単なんだろうけども)もし何かスパム投稿があったとしてもSSGform側の制約で100件/月しか送信できないので良いか、と思っている。もし不都合が出てきたら導入を検討する。