この記事の結論：ブライダルフェアの予約フォームで取りこぼしを減らすには、見た目より先に3つの実装を確かめます。1つ目は、満席の日程を選ばせず、送信の瞬間にもう一度空きを確かめること。2つ目は、autocomplete と type・inputmode を正しく付けて、スマホの自動入力とキーボードに仕事をさせること。3つ目は、送信ドメイン認証（SPF・DKIM・DMARC）を整えて、確認メールが迷惑メールに入らないようにすることです。そのうえで、更新のたびに実機のスマホで送信完了まで通し、予約した人と受け付ける側の両方にメールが届くことを確かめます。
ブライダルフェアの予約は、検討している2人がスマホで、空いた時間に入れることが多い操作です。途中で手が止まれば、そのまま別の式場の予約画面に移ってしまいます。この記事では、フェア予約のフォームを作る側として、どこで止まりやすく、何を実装で防げるかを整理します。
フェア予約のフォームは、問い合わせフォームと何が違うか
一般の問い合わせフォームと比べると、フェア予約には固有の難しさがあります。
| 違い |
フェア予約で起きること |
実装で決めること |
| 日程と枠がある |
選んだ日が満席だった、送ったのに予約できていなかった |
空きの表示と、送信時の再確認 |
| 2人分の情報 |
2人目の名前や連絡先の入力で手が止まる |
2人目を任意にするか、何を聞くか |
| 来館まで日がある |
予約したことを忘れる、日時を確かめたい |
確認メールの中身と、届く確かさ |
| 選ぶものが多い |
フェアの種類、試食の有無、人数、相談したいこと |
選択肢の数と並べ方 |
この表の右の列が、作る側が先に決めておくことです。以下、順に見ていきます。
満席の日程を選ばせず、送信の瞬間にもう一度確かめる
フェアの枠は、画面を開いた時点では空いていても、入力している間に埋まることがあります。表示のときと送信のときで、空きを2回確かめるのが基本です。
- 表示のとき：満席の日程は選べない状態で出す（灰色にして「満席」と書く。一覧から消すと、日程が無いように見えて離れられることがある）
- 送信のとき：サーバー側でもう一度空きを確かめ、確保できたときだけ予約を確定する
- 埋まっていたとき：入力した内容を消さずに画面へ戻し、近い日程を選び直せるようにする
3つ目が抜けていると、名前から入れ直すことになり、ほぼ確実に離れます。入力の内容を残したまま日程だけ選び直せるかは、作る側で必ず試しておきたいところです。
スマホの自動入力とキーボードに仕事をさせる
スマホで入力の手間を一番減らせるのは、ブラウザの自動入力です。そのためには、入力欄ごとに「何を入れる欄か」を autocomplete 属性でブラウザに伝えます（MDN：HTML の autocomplete 属性）。あわせて、type や inputmode で、出てくるキーボードを欄に合わせます（MDN：inputmode）。
<label>お名前（姓）<input name="family" autocomplete="family-name" required></label>
<label>お名前（名）<input name="given" autocomplete="given-name" required></label>
<label>メールアドレス
<input name="email" type="email" autocomplete="email" required>
</label>
<label>電話番号
<input name="tel" type="tel" autocomplete="tel" required>
</label>
<label>郵便番号（任意）
<input name="zip" inputmode="numeric" autocomplete="postal-code">
</label>
<label>お相手のお名前（任意）
<input name="partner" autocomplete="off">
</label>
| 欄 |
付けるもの |
効くこと |
| 姓・名 |
family-name / given-name |
保存してある名前が候補に出る |
| メール |
type="email" + email |
@ の入ったキーボードと、保存したアドレスの候補 |
| 電話 |
type="tel" + tel |
数字のキーボードと、自分の番号の候補 |
| 郵便番号 |
inputmode="numeric" + postal-code |
数字のキーボード |
| お相手の名前 |
autocomplete="off" |
本人の名前の候補を出にくくする（ブラウザによっては効かない） |
最後の行は、フェア予約ならではの注意です。2人目の欄に本人用の自動入力が効くと、同じ名前が2回入ります。2人目は任意にし、自動入力を切る指定をしておきます。ただし off はブラウザによって無視されることがあるので、実機で自動入力を試して確かめます。
確認メールを、迷惑メールに入れずに届ける
フェアの予約では、来館の日まで確認メールが「予約票」の役割をします。届かない、迷惑メールに入る、という状態は、予約が無かったのと同じです。
Google は Gmail への送信者向けのガイドラインで、すべての送信者に SPF か DKIM のどちらかの設定を求めています。1日に5,000件を超えて送る送信者には、SPF と DKIM の両方と DMARC を求めています（Google：メール送信者のガイドライン）。フェア予約の確認メールは送る件数が多くなくても、送信元のドメインに SPF・DKIM・DMARC をそろえておくのが安全です。
作る側で確かめることは次のとおりです。
- 確認メールの送信元（From）のドメインが、SPF・DKIM を設定したドメインと一致しているか
- 予約した人へのメールと、受け付ける側への通知メールの、両方が送られているか
- 確認メールに、日時・場所・変更や取り消しの方法が入っているか
公開の前と、更新のたびに通しで確かめる
フォームは、デザインの修正やフェアの追加のついでに壊れることがあります。株式会社bundlyzeでは、予約フォームに関わる変更をしたら、実機のスマホで最初の画面から送信完了まで通し、予約した人と受け付ける側の両方にメールが届いたことを確かめてから公開する決まりにしています。
| 確かめること |
どう確かめるか |
| iPhone と Android の両方で最後まで送れるか |
実機の Safari と Chrome で、実際に送る |
| 自動入力が正しい欄に入るか |
保存した情報で自動入力し、2人目の欄に入らないかを見る |
| 満席の日を選べないか、埋まったときに入力が残るか |
テスト用の枠を満席にして試す |
| 2通とも受信トレイに入るか |
Gmail と、受け付け側のメールアドレスで実際に受け取る |
フェアの予約まで含めて、式場やフォトスタジオのサイトを作り直す場合の進め方は、bundlyzeのWebサイト制作で紹介しています。
よくある質問
Q. フェア予約のフォームは、項目をいくつまで減らせばいいですか？
A. 数より「その場で聞く必要があるか」で決めます。名前・連絡先・日程は必要ですが、予算や招待人数は来館したときに聞けば足ります。2人目の情報や相談内容は任意にして、入力しなくても送れるようにしておくと止まりにくくなります。
Q. 確認メールが迷惑メールに入っているか、どう確かめますか？
A. 自分で予約を送り、Gmail などで受け取って、受信トレイに入るかを見ます。届いたメールの「メッセージのソース」を開くと、SPF・DKIM・DMARC がそれぞれ合格（PASS）しているかを確かめられます。
Q. 予約システムの既製の画面を埋め込む場合も、同じことを確かめますか？
A. 確かめます。自動入力の属性や確認メールの送信元は、既製のサービス側の設定で決まることが多いので、実機で送ってみて、足りない点はサービスの設定か、提供元への問い合わせで直します。
