目次
これまではTallyを使っていた
本サイトのお問い合わせフォームには，これまで Tally を使っていました。
この選定のタイミングでもGoogle Formsなどと迷ったのですが，中でもTallyはフォームサービスとして以下のようなポイントでカスタマイズ性に優れていて，重宝していました。
- 送信ボタンのアクセント色を変えられる
- 各項目にプレースホルダーを任意に設定できる
- 埋め込み時のサービスロゴがそれほど主張しない
無料で使えるフォームとしては自由度が高く，しばらくはこれで十分満足していました。
SSGformへ移行した理由
転機になったのは，サイトにライト/ダークモードを実装したことです（制作の経緯はプロフィール・ブログサイトを作成・アップデートしましたにまとめています）。
Tallyはiframeによる埋め込み型のため，フォーム内の配色がサイトのテーマ切り替えに追従してくれません。ライトとダークを行き来すると，フォームだけが浮いて見えてしまい残念な状態でした。
そこで，フォームのHTML/CSSを自分で書けるサービスを探して行き着いたのが SSGform です。
SSGformは「送信先」だけを提供し，フォームのマークアップは自前で用意する方式です。そのため，サイトのデザイン（配色・角丸・フォント）にそのまま合わせられるので，ライト/ダークどちらでも破綻しません。
実装
やることはシンプルで，SSGformの送信先URLをformのactionに指定し，各項目を設定していくだけです。メールアドレスは，name="email"にしてtype="email"にしておくと，ブラウザ側で形式チェックをした上で，送信内容のコピー（自動応答）を記入者に送ってくれます。
<form action="https://ssgform.com/s/xxxxxxxxxxxx" method="post">
<!-- お名前 -->
<label for="name">お名前</label>
<input id="name" name="お名前" type="text" required />
<!-- ご連絡先メールアドレス（type="email" で形式を検証） -->
<label for="email">ご連絡先メールアドレス</label>
<input id="email" name="email" type="email" required />
<!-- お問合せ内容 -->
<label for="message">お問合せ内容</label>
<textarea id="message" name="お問合せ内容" required></textarea>
<!-- Cloudflare Turnstile を表示するコンテナ -->
<div id="turnstile-container" data-sitekey="xxxxxxxxxxxxxxxxxxxx"></div>
<button type="submit">送信する</button>
</form>メール通知やセキュリティも充実
デザインの自由度だけでなく，フォームサービスとして必要な機能も一通り揃っています。無料プランと有料プランで使える機能に差はなく，フォーム送信数のみに差をつける親切設計です。（無料プランでも100件/月で十分）
- 管理者へのメール通知 — 問い合わせが届くとメールで知らせてくれる
- 記入者への自動返信（控え）メール — 送信した相手にも受付内容の控えを送れる
- 送信元ドメイン設定 — 自動応答メールを独自ドメインから送信できる
- Cloudflare Turnstileによるスパム・bot対策
おわりに
実際のフォームはお問い合わせページから確認・送信できます。ご意見・ご感想などありましたら，お気軽にどうぞ。
