Web制作実務役立ち

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
本ページにはプロモーションが含まれています。

ありさちゃん
ありさちゃん
Contact Form 7で確認画面ってどうやってつけるの?

この記事ではこんな悩みに答えます。

以前なら「MW WP Form」を使えば解决でした。

しかし、2023年9月時点では、プラグインがクローズされるかもしれなくて、やはりContact Form 7に出戻りの民が増えると思われます。

そこで今回は「Contact Form 7に確認画面をつける方法」を解説するわけです。

前提として、「Contact Form 7を自作フォームでカスタマイズして使う方法」という記事で、既にContact Form 7の送受信の実装が完了している状態を想定します。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

2024.04追記 プラグイン無しで確認画面が作れる

Contact Form 7での確認画面とサンクスページ(送信完了)をプラグイン無しで実装する【JavaScript】

今回紹介するプラグインを使わなくても確認画面とサンクスページが作れるJavaScriptコードを公開しました。

こちらは文字数やファイル添付、確認画面の数の上限が無いので、Contact Form 7 Multi-Step Formsが使えない状況下では、以下の記事を参考にしてください。

本当に確認画面が必要なのか今一度考えたい

確認画面は本当に必要なのでしょうか。

例えば「入力内容に問題がないことを確認しました」という入力必須のチェックボックスを用意すれば、それで事足りると考えるのも自然だと思います。

Contact Form 7を自作フォームでカスタマイズして使う方法

Contact Form 7には「承諾確認」というチェックボックスが存在し、これを設置すれば良いだけです。

Contact Form 7を自作フォームでカスタマイズして使う方法
Contact Form 7を自作フォームでカスタマイズして使う方法

しかも、今回紹介するContact Form 7 Multi-Step Formsはまだ更新されていますが、以前使われていた「Contact Form 7 add confirm」はもう…

つまり、確認画面にプラグインを使うということは、メンテナンスのコストが増えるということ。

しょーご

個人的にはあまり実装はしたくない…

しかしそれでも

クライアント

いやいや確認画面はいるんだよ、はよしろオラァ!!(無慈悲)

という場合がたまにあるので、そういう時は泣きながら実装しましょう(´;ω;`)

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 の基本的な環境に関する情報を共有することもできます。これにより、プラグインがあなたのサイトとより互換性を持ち、より優れた機能を発揮できるようになります。

❷確認画面のフォーム作成

まずは既存のフォームを「複製」して、確認画面フォームを作っていきます。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

メール設定は確認画面のものが使われますので、既存フォームを複製せず一から確認画面を作る場合は、メール設定を確認画面でし直して下さい。

タイトルは確認画面だと分かるものにしましょう。

また下にmultistep,multiform,previousなどのタグが新しく追加されているのを確認します。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

これらを用いて、確認画面用のフォームにしていきます。

わかりやすくするために、既存のタグの真下に新たなタグを入れていきます。

置き換えるタグのname属性の値を控えたら、まず「multiform」をクリック。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

その後、さきほどのname属性の値を入れて、「タグを挿入」をクリック。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

元のタグは消してOKです。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
しょーご

これを入力箇所分、ひたすら繰り返していきます!

次に確認画面で必須の戻るボタンを追加しましょう。

送信ボタンの手前で「previous」をクリック。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

ボタンのラベルは「戻る」などにしておきます。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

問題なければ「保存」します。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

❸確認画面と送信完了の固定ページ作成

ここからは確認画面と送信完了サンクスページを作成します。

まずは確認画面を固定ページで作成します。

フォームの埋め込みには、contact form 7専用のブロックがあるので、それを利用して、先程の確認画面フォームを埋め込みます。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

その後、URLをconfirmなど分かりやすいものにして公開します。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
テンプレートファイルの場合

下記コードをテンプレートファイルに貼るようにしてください。ショートコードは各フォームに設定されています。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
<?php echo do_shortcode('ショートコード'); ?>

送信完了サンクスページも作成していきますが、ここではフォームの埋め込みは行いません。

代わりに「送信内容は無事送信されました」などのお客さんを安心させるメッセージを入れておきましょう。

URLはthanksなどにしておくと良いです。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
しょーご

あとはページ間遷移がうまくいくようにするだけ!

❹入力画面→確認画面→完了画面の遷移ボタンの設置

まず「入力画面→確認画面」に遷移できるようにします。

入力フォーム画面の「送信ボタン」の下に「multistep」を入れます。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

その後、「First Step」にチェックを入れ、「Next Page URL」には送信完了ページのURLを入れます。私の場合は/confirmです。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

また、送信ボタンは「入力内容を確認する」などにしておきましょう。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

次に「確認画面→送信完了画面」に遷移できるようにします。

送信ボタンの下に「multistep」を挿入。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

Last Step」「Next Page URL」を設定します。

ここでは送信完了画面のURLを設定します。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
しょーご

これで終了です!!最後に動作確認をしましょう!!

❺動作確認

動作確認で見る場所
  • 確認画面→送信完了画面までの遷移
  • 戻るボタンで戻った時に、入力した値が入力欄に残っているか
  • メールはちゃんと届くか
Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

Multi-Step Formsでは長文や添付ファイル認識されない?

Contact Form 7 Multi-Step Formsを利用する上で大きな欠点の一つが、長文やファイル添付ができないことです。

まずtextareaなどに400~500文字以上の日本語を入力して確認画面に行くと…?

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

確認画面では真っ白になってしまいました。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

プラグインの公式ページによると、以下です。

PRO Version
If you expect to have a lot of data submitted through your multi-step forms, the Pro version may be able to help you better. The PRO version uses Session Storage so it is able to handle roughly 1,000 times more data for your multiple forms. In total it can handle about 5MB vs 4KB in the free version. Currently the Pro version REQUIRES the WordPress REST API and Contact Form 7 AJAX Submission to be enabled.  Another feature the Pro version offers is the ability to skip steps with the “Contact Form 7 – Conditional Fields plugin”.
https://wordpress.org/plugins/contact-form-7-multi-step-module/

PROバージョン
マルチステップフォームで多くのデータが送信されることが予想される場合は、プロバージョンをご利用ください。PROバージョンはセッションストレージを使用しているため、複数フォームのデータを約1,000倍処理することができます。合計で、無料版の4KBに対して約5MBを処理することができます。現在のところ、プロ版では WordPress REST API と Contact Form 7 AJAX Submission を有効にする必要があります。

Contact Form 7 – Conditional Fields プラグイン” を使ってステップをスキップすることもできます。

つまり、4KBしか容量が無いので、長文もファイル添付も不可能です。

そして、これを回避するには現状「年2000円程度 or 1万円で買い切り」を行う必要があります(1サイトのみのライセンス

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】

この現状をよく理解した上で、取れる対策はいくつかあります。

確認画面について
  • 本当に確認画面が必要なのかクライアント確認
  • 送信完了画面と確認チェックボックスで良くないか?と説得
  • 導入するなら、textareaの最大文字数で対応する
  • それもダメなら、有料プラン検討だが、本当に確認画面にそれだけの価値があるのか?
  • 自作は難しい、諦めるのが賢明
  • もしくは「Snow Monkey Forms」を使い、完全オリジナルフォームを諦め、ブロックエディタで組み立てる形式にする

これらを大人しく考えるのが賢明でしょう。

最大文字数で対応する?

ファイルはどうにもならないですが、文字数だけなら、文字数制限をしてあげるのが現実的です。

幸いmaxlengthを付与すればすぐに対応可能ですし、入力文字数はcountタグを入れればすぐです。

Contact Form 7で確認画面を作る方法【Multi-Step Formsの使い方】
[textarea textarea maxlength:500]
[count textarea]
最大文字数以上は入力不可能になる
しょーご

個人的に、これが出来るギリギリかなと思いますね。

2024.04追記 プラグイン無しで確認画面が作れる

今回紹介するプラグインを使わなくても確認画面とサンクスページが作れるJavaScriptコードを公開しました。

こちらは文字数やファイル添付、確認画面の数の上限が無いので、Contact Form 7 Multi-Step Formsが使えない状況下では、以下の記事を参考にしてください。

確認画面が本当に欲しいのか?よく確認すべし

Contact Form 7に確認画面をつける方法を解説しました。

Contact Form 7 Multi-Step Formsは便利ですが、見えにくい欠点も多いです。

MW WP Formが使えるうちはいいですが、「そもそも確認画面って本当に必要なのか?」からよく考えたい所です。

もしデザインカンプのピクセルパーフェクトにこだわらない、ブロックエディタ主導の開発であれば、「Snow Monkey Forms」がこれからは良い選択肢でしょう。

模擬案件チャレンジ開催のお知らせ

超実践編では納期厳守の模擬案件を経験し、スキル面以外にコミュニケーションも徹底レビューを受けることができます。

【超実践編】納期厳守の模擬コーディング案件で実務への自信を身につける!【学習沼からあなたを卒業させます】

最近は実案件のノウハウも多いですが、「納期が短い案件の中で、丁寧なコミュニケーションを本当に実践できますか?

この課題では、極限まで実案件に近い状況で、発注者である私とコミュニケーションを取りながら、

  1. 見積書提出
  2. 実装→初稿提出
  3. レビュー→修正
  4. 再修正→納品
  5. 請求書

この流れを実践していただき、最後にzoomであなたに全体レビューを行います。

【超実践編】納期厳守の模擬コーディング案件で実務への自信を身につける!【学習沼からあなたを卒業させます】
  • 学習はだいたい終わったけど、納期までに納品できるか不安
  • 中々継続と紹介で案件が回らない

このような中級者を飛躍させる超実践編、受講には条件がありますので、詳細はリンク先よりご確認下さい。

しょーご

あなたの挑戦を待っています!!

\レビューを受けて圧倒的な自信を身につける!/

あなたに是非読んでほしい記事です!