バージョンアップしたContact Form 7 に入力確認画面をつけたい！

入力確認画面が作れるプラグイン「Contact Form 7 Multi-Step Forms」

Contact Form 7をアップデートしたらフォームが動かなくなってしまった！　調べてみると確認画面を作るプラグイン「Contact Form 7 add confirm 」が新しいものに対応していないみたいでした。

アップデートはするべきですよね。でもその場合お客さんのサイトで確認画面付きのContact Form 7を全部他のプラグインに変更しないとダメ？！

そこで「MW WP Form」への変更作業を少しずつ始めていましたが、こちらのプラグインも更新されていないので、今後がちょっと心配でした。そんな時「Contact Form 7 Multi-Step Forms」を知りました！

こちらはフォームを段階的に分けることができるプラグインです。これで今までのContact Form 7を生かした確認画面が作れます！

ステップ①　Contact Form 7の設定

まずは「Contact Form 7」の設定をいつもどおりに行います。
受信メールや自動返信メールもフォームの「メール」タブできちんと設定しましょう。
もう作成済みの場合は次のステップからどうぞ。

ステップ②　プラグイン「Contact Form 7 Multi-Step Forms」インストール

プラグイン「Contact Form 7 Multi-Step Forms」インストール。
このような表示が出てきます。今回は「スキップ」しました。

インストール後「multistep」「form fiel」「dprevious」が追加されました。

ステップ③　入力画面の送信ボタン周りの設定

「multistep」で入力の次の「確認ページ」に遷移するよう設定します。
[submit "送信"]の下にカーソルを当てて「multistep」をクリック。

（1）今作成している入力画面は最初のページなので「first_step」にチェックを入れます。
（2）確認画面のURLを設定します。ここでは「/confirm/」と設定しました。

（3）ボタンの表示を「送信」から「確認する」（[submit "確認する"]）に変更します。

ステップ④　確認画面の設定

次に、このフォームを複製して確認画面を設定します。
（1）送信完了画面のURLを設定します。ここでは「/thanks/」と設定しました。
そして「last_step」「send_email」にチェックを入れます。

（2）戻るボタンを作りましょう。
[submit "確認する"]の前にカーソルを当てて「previous」をクリック。

（3）確認画面に値が表示されるよう「form field」ボタンで設定します。
複製したままだと[text* your-name] などになっています。これを削除して「form field」をクリック。それぞれのname属性を入れていきます。

（4）ボタンの表示を「送信する」（[submit "送信する"]）に変更します。
これでひとまずフォームの設定は完了しました！

入力ページ、確認ページ、送信完了ページを作成

続いて固定ページで「入力ページ」「確認ページ」「送信完了ページ」を作成します。

「入力ページ」を作成します。
このページにステップ③作成したコンタクトフォームのショートコードをペーストします。
（既にページがある方はそのページでOKです。）

ステップ③の（2）で設定したURLで「確認ページ」を作成します。
このページにステップ④で作成したコンタクトフォームのショートコードをペーストします。

ステップ④の（1）で設定したURLで「送信完了ページ」を作成します。

完成です！　送信テストをしてみましょう。
動作確認できましたか?

メモ

入力する前に確認ページのURLを開くと「Please fill out the form on the previous page.」と表示されます。グーグル翻訳で「前ページのフォームにご記入ください。」と翻訳されました。

これを日本語に直す場合、フォームの「メッセージ」タブの真ん中あたりを編集します。

おわりに

プラグインを開発してくださり本当にありがたいです。
そして新しい情報を取り入れていくことの重要性を改めて感じました。サイトを作って終わり、これで大丈夫、と安心せずその時々に適したメンテナンスをしていきたいなと思います。