🔧

【Contact Form 7 確認画面】ではContact Form 7 Multi-Step Formsを推す

2021/12/15に公開

こちらはWordPress Advent Calendar 2021の15日目の記事です。

この記事を書いたきっかけ

Contact Form 7 確認画面でググるとContact Form 7 add confirm関連が多く、検索順位も高く引っかかります。
2021/12/15現在トップの記事はContact Form 7 add confirmの紹介記事です。
でもContact Form 7 add confirmは最終更新日が四年前なのです。
これをGoogleさんはトップでおすすめしてくるのです。
（add confirmが現役だったころ、こういった記事はとても役立つものだったでしょう。記事を書かれた方は全く悪くないですし、有益な情報を提供してくださっていただけです。）
また、

Contact form 7 add confirmがContact form7の最新版（V5.4以降）との組み合わせで動作しなくなってしばらくたちます。

と、add confirmはContact Form 7最新版で動かないという状況になっているようです。↓

上記記事のようになんとかadd confirmを使い続ける選択肢もありますが、つらい選択肢のように思えます。

Contact Form 7 add confirmは一度使わせていただいたことがあります。
確認画面が、フォーム画面と同様のinputタグのままスタイルのみ変更しないといけない点が少し苦手だったのですが、問題なく使えた記憶があります。ですがいかんせんメンテナンスがされていない…

検索結果の2番目には別プラグインの記事があって、それに関しては私は使ったことがないので言及できませんが、個人的には【Contact Form 7 Multi-Step Forms】が激おすすめなので、その紹介記事を書いてみたいと思います。

Contact Form 7 Multi-Step Formsの基本的な使い方

↓イッティさんの記事でだいたい語られているのですが、基本的な実装の流れを見ながらおすすめポイントに絞って語ります。

フォーム、確認画面、完了画面のシンプルな構成を作りながら見ていきましょう。
このプラグインは、インストールのみで機能が有効になるため事前の設定などはありません。

【おすすめポイント1】確認画面などに任意のURLが設定できる！

Contact Form 7 Multi-Step Formsは、それぞれのフォームのステップ（フォーム、確認画面、完了画面などのこと）ごとに固定ページが必要になります。それがステップの実際のページとなります。

ここでテンプレートも任意で選べますし、何よりpermalink（URL）が自由に画面ごとに振れる！
クライアントからの指定で確認画面や完了画面にURLが振られてて、add confirmの時は出来ないんですーと言っていた記憶…

固定ページの中身は一旦空で構いません。permalink（URL）をメモしておきましょう。のちほどこの固定ページにフォームのショートコードを入れることになります。
固定ページを作成したら、Contact Form 7でまず最初のステップのフォームを作りましょう。

multistep、form field、previousというボタンがエディタに増えています。
multistepタグがまず必要になりますので、multistepを押下すると下記のようなモーダルが現れます。この内容に沿って入れていきましょう。

Name => ここはデフォルトで構いません
First Step => このフォームが最初のステップの時にチェックする
Last Step => このフォームが最後のステップ（完了画面など）の時にチェックする
Send Email => フォームのSubmitを押下した際にメールを飛ばしたいステップの際にチェックする（確認画面など）
Skip Save => 【送信された入力フォームのデータを保存するプラグイン「Flamingo」や「CFDB7」を使っている場合、このオプションをチェックされていると、データが保存されません。】ということらしい！こちらの記事より https://wp-recipe.work/contact-form-7-multi-step-forms
Next Page URL => こちらに次のステップ用に作った固定ページのURLをいれてください。

First Stepにチェックを入れ、Next Page URLを記入したらInsert Tagを押下してSubmitボタンの下にマルチステップタグを入れ、Submitのラベルを「次へ」などにして最初のステップの準備は完了です。

【おすすめポイント2】入力のステップで入力した値を自由に扱える！

確認画面のフォームを作りましょう。ここでは、multiformタグを使って最初のフォームで入力した値を自由に扱うことが出来ます。
[multiform 【最初のフォームで使った変数名】]で取り出せます。
どういうhtmlのタグ構成にも出来ます。確認画面のデザインにこだわるのであればとても嬉しい機能です。
multistepタグはSend Emailにチェック、Next Page URLに完了画面の固定ページURLを入れましょう。

前のステップに戻る機能が必要な場合はエディタのpreviousボタンを押してタグを挿入すると戻るボタンが使えます。

完了画面も同じ要領で作ります。完了画面は、基本的にテキストを表示するだけのものになることが多いと思います。テキストを入れたら、Last Stepにチェックしたmultistepタグを入れて完了です。
（これはうっすらとした記憶でしかないのですが、たしかLast Stepにチェックいれないと完了後もう一回最初のステップにいくと一度入力した値がクリアされてなくて入っていたような気がします、、ほんとにうっすらとした記憶ですみません。でも、Last Stepを入れろと言われているので入れましょう。）

最後に、作成したフォームのショートコードをそれに対応している固定ページに記入してフォームと固定ページの紐付け作業が完了します。
最初のステップのフォームのページを開き、動作確認してみてください。

さいごに

簡単な紹介なので、イッティさんの記事をよく見る・実際に使ってみるのがいいと思います。
Googleの検索結果はあてにならないですね。
また、このContact Form 7 Multi-Step Formsだって、いつメンテナンスされなくなって使えなくなるかわからないので、プラグイン導入時はメンテナンスをきちんとされているかをよくチェックするようにしましょう！自戒をこめて。