Multi-Step FormsというWordPressプラグインを使用することで、Contact Form 7に手軽に確認画面を実装することが可能です。クライアントに「確認画面をつけて」と言われた際に、活躍するプラグインです。
以前なら「MW WP Form」を使えば確認画面も完了画面も実装できていました。
しかし、2023年9月時点では、プラグインがクローズされるかもしれなくて、やはりContact Form 7に出戻りの民が増えると思われます。
そこで今回は「Multi-Step Formsを用いて、Contact Form 7に確認画面をつける方法」を解説するわけです。
前提として、「Contact Form 7を自作フォームでカスタマイズして使う方法」という記事で、既にContact Form 7の送受信の実装が完了している状態を想定します。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
2024.04追記 プラグイン無しで確認画面が作れる
今回紹介するMulti-Step Formsを使わなくても、自作で確認画面とサンクスページが実装できるJavaScriptコードを公開しました。
こちらは文字数やファイル添付、確認画面の数の上限が無いので、Contact Form 7 Multi-Step Formsが使えない状況下では、以下の記事を参考にしてください。
本当に確認画面が必要なのか今一度考えたい
確認画面は本当に必要なのでしょうか。Contact Form 7に確認画面が無いのは、プラグイン開発者が確認画面は必要無いと判断しているからです。そのため機能がありません。
例えば「入力内容に問題がないことを確認しました」という入力必須のチェックボックスを用意すれば、確認画面など実装せず、それで事足りると考えるのも自然だと思います。
Contact Form 7には「承諾確認」というチェックボックスが存在し、これを設置すれば良いだけです。
プラグインに関してはデメリットもあります。今回紹介するContact Form 7 Multi-Step Formsはまだ更新されていますが、以前使われていた「Contact Form 7 add confirm」はもう更新されていません。
つまり、確認画面にプラグインを使うということはメンテナンスのコストが増えるということ。
Contact Form 7に確認画面をつけるのは教える側もコストなので、デイトラWeb制作コースのようなプログラミングスクールでも、確認画面実装を教えているところはかなり少ないです。
個人的に確認画面はあまり実装はしたくない…
というのが本音ですが、しかしそれでも、
いやいや確認画面はいるんだよ、はよしろオラァ!!（無慈悲）
という場面は結構あります。世の中のサービスのほとんどに確認画面があるのは事実なので、泣きながら実装しましょう(泣)
Contact Form 7 Multi-Step Formsの使い方
Contact Form 7 Multi-Step Formsの使い方を以下のステップで解説していきます。
- Contact Form 7 Multi-Step Formsをダウンロード
- 確認画面のフォーム作成
- 確認画面と送信完了の固定ページ作成
- 入力画面→確認画面→完了画面の遷移ボタンの設置
- 動作確認
❶Contact Form 7 Multi-Step Formsをダウンロード
「Contact Form 7 Multi-Step Forms」と検索し、プラグインをインストールして有効化します。
その後の画面では「許可して続ける」を選択。
英文を和訳すると、以下。
重要なアップデートを見逃さない
セキュリティと機能のアップデート、教育コンテンツ、不定期オファーのお知らせ、および WordPress の基本的な環境情報の共有のためにメール通知を受け取るには、オプトインしてください。また、WordPress の基本的な環境に関する情報を共有することもできます。これにより、プラグインがあなたのサイトとより互換性を持ち、より優れた機能を発揮できるようになります。
❷確認画面のフォーム作成
まずは既存のフォームを「複製」して、確認画面フォームを作っていきます。
メール設定は確認画面のものが使われますので、既存フォームを複製せず一から確認画面を作る場合は、メール設定を確認画面でし直して下さい。
タイトルは確認画面だと分かるものにしましょう。
また下にmultistep,multiform,previousなどのタグが新しく追加されているのを確認します。
これらを用いて、確認画面用のフォームにしていきます。
わかりやすくするために、既存のタグの真下に新たなタグを入れていきます。
置き換えるタグのname属性の値を控えたら、まず「multiform」をクリック。
その後、さきほどのname属性の値を入れて、「タグを挿入」をクリック。
元のタグは消してOKです。
これを入力箇所分、ひたすら繰り返していきます！
次に確認画面で必須の戻るボタンを追加しましょう。
送信ボタンの手前で「previous」をクリック。
ボタンのラベルは「戻る」などにしておきます。
問題なければ「保存」します。
❸確認画面と送信完了の固定ページ作成
ここからは確認画面と送信完了サンクスページを作成します。
まずは確認画面を固定ページで作成します。
フォームの埋め込みには、contact form 7専用のブロックがあるので、それを利用して、先程の確認画面フォームを埋め込みます。
その後、URLをconfirmなど分かりやすいものにして公開します。
下記コードをテンプレートファイルに貼るようにしてください。ショートコードは各フォームに設定されています。
<?php echo do_shortcode('ショートコード'); ?>送信完了サンクスページも作成していきますが、ここではフォームの埋め込みは行いません。
代わりに「送信内容は無事送信されました」などのお客さんを安心させるメッセージを入れておきましょう。
URLはthanksなどにしておくと良いです。
あとはページ間遷移がうまくいくようにするだけ！
❹入力画面→確認画面→完了画面の遷移ボタンの設置
まず「入力画面→確認画面」に遷移できるようにします。
入力フォーム画面の「送信ボタン」の下に「multistep」を入れます。
その後、「First Step」にチェックを入れ、「Next Page URL」には送信完了ページのURLを入れます。私の場合は/confirmです。
また、送信ボタンは「入力内容を確認する」などにしておきましょう。
次に「確認画面→送信完了画面」に遷移できるようにします。
送信ボタンの下に「multistep」を挿入。
「Last Step」「Next Page URL」を設定します。
ここでは送信完了画面のURLを設定します。
これで終了です！！最後に動作確認をしましょう！！
❺動作確認
- 確認画面→送信完了画面までの遷移
- 戻るボタンで戻った時に、入力した値が入力欄に残っているか
- メールはちゃんと届くか
Multi-Step Formsでは長文や添付ファイル認識されない？
Contact Form 7 Multi-Step Formsを利用する上で大きな欠点の一つが、長文やファイル添付ができないことです。
まずtextareaなどに400~500文字以上の日本語を入力して確認画面に行くと…?
確認画面では真っ白になってしまいました。
プラグインの公式ページによると、以下です。
PROバージョン
マルチステップフォームで多くのデータが送信されることが予想される場合は、プロバージョンをご利用ください。PROバージョンはセッションストレージを使用しているため、複数フォームのデータを約1,000倍処理することができます。合計で、無料版の4KBに対して約5MBを処理することができます。現在のところ、プロ版では WordPress REST API と Contact Form 7 AJAX Submission を有効にする必要があります。
Contact Form 7 – Conditional Fields プラグイン” を使ってステップをスキップすることもできます。
つまり、4KBしか容量が無いので、長文もファイル添付も不可能です。
そして、これを回避するには現状「年2000円程度 or 1万円で買い切り」を行う必要があります（1サイトのみのライセンス）
この現状をよく理解した上で、取れる対策はいくつかあります。
- 本当に確認画面が必要なのかクライアント確認
- 送信完了画面と確認チェックボックスで良くないか？と説得
- 導入するなら、textareaの最大文字数で対応する
- それもダメなら、有料プラン検討だが、本当に確認画面にそれだけの価値があるのか？
- プラグインを使わずに自作する
- もしくは「Snow Monkey Forms」を使い、完全オリジナルフォームを諦め、ブロックエディタで組み立てる形式にする
これらを大人しく考えるのが賢明でしょう。
最大文字数で対応する？
ファイルはどうにもならないですが、文字数だけなら、文字数制限をしてあげるのが現実的です。
幸いmaxlengthを付与すればすぐに対応可能ですし、入力文字数はcountタグを入れればすぐです。
[textarea textarea maxlength:500]
[count textarea]
個人的に、これが出来るギリギリかなと思いますね。
確認画面が本当に欲しいのか？よく確認すべし
Contact Form 7に確認画面をつける方法を解説しました。Contact Form 7 Multi-Step Formsは便利ですが、見えにくい欠点も多いです。
「そもそも確認画面って本当に必要なのか？」からよく考えたい所です。
どうしてもほしいなら、プラグインを使わずに自作することも可能ですし、ブロックエディタ主導の開発であれば、「Snow Monkey Forms」もこれからは良い選択肢でしょう。
しょーごログのコーディング課題ではContact Form 7を使った、レビューが受けられる上級コーディング課題も用意しているので、Web制作を独学していて、己を鍛えたい方はぜひチャレンジしてみてください。Web制作ロードマップではProgateから実務レベルまでが身につく学習過程を公開しています。
超実践編では納期厳守の模擬案件を経験し、スキル面以外にコミュニケーションも徹底レビューを受けることができます。
最近は実案件のノウハウも多いですが、「納期が短い案件の中で、丁寧なコミュニケーションを本当に実践できますか？」
この課題では、極限まで実案件に近い状況で、発注者である私とコミュニケーションを取りながら、
- 見積書提出
- 実装→初稿提出
- レビュー→修正
- 再修正→納品
- 請求書
この流れを実践していただき、最後にzoomであなたに全体レビューを行います。
- 学習はだいたい終わったけど、納期までに納品できるか不安
- 中々継続と紹介で案件が回らない
このような中級者を飛躍させる超実践編、受講には条件がありますので、詳細はリンク先よりご確認下さい。
あなたの挑戦を待っています！！
＼レビューを受けて圧倒的な自信を身につける！／
ご寄付を頂けると今後の更新の励みになります！
