Contact Form 7 Multi-Step Formsを使う前に。確認画面・完了画面でつまずきやすいところ
Contact Form 7で確認画面や完了画面を作るときに候補になるMulti-Step Forms。できること、無料版の4KB制限、キャッシュや動作確認の注意点をWeb制作目線でまとめます。
Contact Form 7で「確認画面をつけたい」と調べると、Contact Form 7 Multi-Step Formsにたどり着くことが多いです。既存のContact Form 7を活かせるので、WordPress案件では現実的な選択肢です。ただ、確認画面が1枚増えるだけだと思って入れると、固定ページ、タグ、メール設定、キャッシュ、長文入力あたりで意外と手が止まります。
目次
できることは、フォームを複数ページに分けること
Contact Form 7 Multi-Step Formsは、Contact Form 7のフォームを複数ページに分けて、最後のステップでまとめて送信するためのプラグインです。入力ページ、確認ページ、完了ページのようにページを分け、それぞれにフォームやメッセージを置いて流れを作ります。
確認画面では、前のページで入力された値を表示するためにmultiformタグを使います。戻るボタンにはpreviousタグ、次のページへ進める処理にはmultistepタグを使う形です。つまり、1つのフォームに確認画面が自動で差し込まれるというより、複数のページとフォームをつないで確認画面らしく見せる作り方です。
- 入力ページ、確認ページ、完了ページのURLを先に決める
- 各ページに置くContact Form 7フォームを分けて管理する
- 最終ステップでメール送信される設定になっているか確認する
確認画面だけでも、作業量はそれなりにある
よくある作り方は、入力フォームを複製して確認画面用のフォームを作り、入力欄をmultiformタグに置き換える流れです。名前、メールアドレス、問い合わせ内容など、表示したい項目の数だけ置き換え作業が発生します。
この作業自体は難しくありません。ただ、項目を後から追加したときに、入力フォームと確認フォームの両方を直す必要があります。クライアントから「電話番号も追加して」「同意チェックの文言を変えて」と言われるたびに、どちらのフォームも崩れていないか確認するのが地味に手間です。
無料版は、長文やファイル添付に注意する
公式ページでは、Pro版はSession Storageを使って約5MBまで扱える一方、無料版は約4KBと説明されています。これは「何文字まで」と固定で考えるより、ステップ間で保持できるフォームデータ量の上限として見たほうが安全です。日本語は1文字でも複数バイトになるため、長文の自由記述欄があるフォームでは特に注意します。
4KBという数字だけ見ると小さく感じにくいですが、会社名、メールアドレス、電話番号、問い合わせ内容、複数選択、隠し項目などが積み重なると余裕は少なくなります。確認画面まで進めるかどうかは、短いテスト文ではなく、実際に入りそうな長さの文章で確認しておきたいところです。
ファイル添付にも注意が必要です。公式ページでは、すべてのステップでファイルアップロードを扱えるわけではないため、必要なら最後のステップに置くよう案内されています。資料請求や採用応募のように添付ファイルが絡むフォームでは、導入前に仕様をかなり丁寧に見ておいたほうがいいです。
- 無料版は文字数ではなく、ステップ間で保持できるデータ量が約4KBと考える
- 長文の自由記述、複数選択、隠し項目を入れた状態で確認画面まで進める
- 添付ファイルがある場合は、どのステップに置くか先に決める
- チェックボックスやラジオボタンの値がメールにも入るか確認する
キャッシュとURLのズレで止まることがある
Multi-Step Formsは、前のステップの入力内容を次のステップへ引き継ぐ必要があります。そのため、キャッシュ系プラグイン、CDN、WordPressのURL設定、httpとhttpsの混在、サブドメインの違いなどが絡むと、思ったように進まないことがあります。
公式FAQでも、前のページの入力が見つからないメッセージが出る場合は、キャッシュによるCookieの扱い、ステップURLのドメインやプロトコル、first_step設定などを確認するよう案内されています。制作中に動いていても、本番のキャッシュ設定を入れたら崩れることがあるので、公開直前の送信テストは必須です。
制作案件では、確認画面が本当に必要か先に話す
Contact Form 7 Multi-Step Formsは便利ですが、確認画面をつけるための保守範囲は増えます。入力フォーム、確認フォーム、固定ページ、送信完了ページ、メール設定、キャッシュ設定。小さな問い合わせフォームでも、見る場所はそれなりにあります。
短い相談フォームなら、確認画面なしで送信できるほうが自然なこともあります。逆に、資料請求や申込のように入力ミスが困るフォームなら、確認画面は意味があります。さらに回答管理、CSV出力、クライアントによる項目変更まで必要なら、Contact Form 7に機能を足し続けるより、フォーム部分をFormieのような外部ツールに分ける判断もあります。
