プラグインのインストールを行います。
今回はすでにContact Form 7はインストールして、コンタクトフォームの設定は完了済みと仮定して進めています。実際はContactForm7の設定後に行ってください。（ContactForm7についてはPronaviサイトを確認） 「Contact Form 7 Multi-Step Forms」と検索して、以下のプラグインをインストールして有効化してください。

もしこのような画面が出たら、許可して続けるを選択してください。

プラグインの有効化ができたら、管理画面→お問い合わせ→お問い合わせ入力フォームを選択し、コンタクトフォームフォーム編集画面を見てみましょう。
すると、編集画面にフォームタグ生成ボタンの「multistep」「multiform」「previous」が追加されます。

確認ページを作成していきます。

管理画面→お問い合わせ → コンタクトフォーム をクリックして、作成済みのフォームを「複製」しましょう。

複製したフォームのタイトルを「確認」などに変更します。

次に、今複製したフォームの内容を以下の手順で確認画面用に変更していきます。

1.ddタグ（<dd>）の中にある、「your-name」をコピーしてください。

2.次に、ddタグの中身を全て削除します。

3.フォームタグ生成ボタンの「multiform」をクリックします。

4.フォームタグ生成画面の「Name」にさきほどコピーした「your-name」を貼り付けたあと、タグを挿入をクリックします。

するとこのように書き換えられます。
こうすることで、フォームに入力された氏名が your-name の値として出力されます。

同様にtextareaまでの全てのフォームを書き換えて下さい。

5.戻るボタンの設置を行います。フォームを入力し直したいときにフォーム入力画面に戻ることができるようにするためのボタンです。

[submit “確認”]の上の行にカーソルを当てた状態で、フォームタグ生成ボタンのpreviousをクリックします。

※必ず、送信ボタンより前に置く必要があるため注意してください。

6.フォームタグ生成画面で、「Label」に「戻る」と入力し、Insert Tagをクリックしてください。

7. 戻るボタンが挿入出来たら、保存をクリックしてください。

今回ボタンのデザイン上、 [previous “戻る”]をclass名submit-btnのdivタグでくくっています。

※デザイン的に送信ボタンより前に設置することが難しい場合は、aタグでボタンを作成する方法もあります。その場合、aタグの遷移先をコンタクトフォームのパスにすることで、コンタクトフォームページへ移動できるようにするという方法です。この場合、普通のボタンのため、フォームのどこにでも設置可能となります。previousでの設置が上手くいかないときには試してみて下さい。

ここからは、確認画面用の固定ページを作っていきます。

1.新規固定ページを作成し、タイトルに「確認ページ」と入力します。

2.「+」ボタンをクリックして、「ショートコード」と検索し、ショートコードの入力エディターを作成します。

3.先ほど作ったコンタクトフォーム「確認」のショートコードをコピーしてショートコード入力エディターに貼り付けます。

4.固定ページのパーマリンクを「confirm」に変更します。

ここまで出来たら保存をしましょう。

固定ページ作成

pronaviのWordpress固定ページ編を参考にpage-confirm.phpを作成します。

※the_content()でうまくいかない場合はdo_shortcodeを使って確認フォームのショートコードを埋め込みましょう。

確認ページと同様にサンクスページの固定ページを作成します。

サンクスページには、問い合わせしたユーザーに向けたメッセージを記載するのが一般的です。

URL（パーマリンク）は、「thanks」などにしておきましょう。

固定ページ作成

pronaviのWordpress固定ページ編を参考にpage-thanks.phpを作成します。

続いて、入力画面から確認画面に遷移させるための作業です。

1.管理画面→お問い合わせ→「お問い合わせ入力フォーム」の編集画面に移動し、
“確認”]の下にカーソルを当てた状態で、[submit フォームタグ生成ボタンのmultistepをクリックしましょう。

2.フォームタグ生成画面が立ち上がるので、以下を参考に入力してください。

・First step：「Check this if this form is the first step.」にチェック
・Next Page URL：先程作成した確認画面の固定ページのURLを入力（今回は「/confirm」）

Insert Tagをクリックします。

遷移タグを挿入することができたら、保存をしましょう。

最後に、確認ぺージからサンクスページに遷移させるための作業を行いましょう。

1.「確認」のフォーム編集画面 に移動し、[submit “確認”]の下にカーソルを当てた状態で、フォームタグ生成ボタンのmultistepをクリックします。

フォームタグ生成画面が立ち上がるので、以下を参考に入力してください。

遷移タグを挿入することができました。

最後に、確認ボタンを送信に変更してから、保存をしましょう。

実際に動作確認を行ってみましょう。

プレビューを表示し、コンタクトフォームに入力をしてみましょう。

すると、確認画面へ遷移するように設定したはずなのに、確認画面へは遷移せず、そのまま送信されてしまいました。

このようなエラーが出てしまう場合には以下の原因が考えられます。

その他にもあるかもしれませんが、多くはこのような原因が多いです。

1つずつ検証していきましょう。

1のファイルのパスは合っています。
今回検証ツールで確認してみると、WPheadとWPfooterも読み込まれているため、2も問題ないです。
css、jqもしっかりと効いているため、3のfunctions.php自体の読み込みは問題ないと考えられます。

残る4のjqを確認してみると、functions.phpの31.32行目あたりに

と記述してあるのが確認できます。これがデフォルトのjqueryを消すというコードになります。

通常は、独自のjqとWoredpressデフォルトのjqの相性が悪いこともあるのでこのようにデフォルトのjqを消去してしまっていることがあります。（PronaviでもデフォルトのJqを消去するように書かれていると思います。）
しかし、今回は消去してしまうとコンタクトフォームが上手く作動しないため、デフォルトのjqを消すという指示は書いてはいけないということになります。

そのため今回はこのデフォルトのjqを消去するコードは消しておきましょう。

コードを消去しても特にjqのエラーは起こっていないため、消去しても問題なさそうです。

これでもう一度フォームに入力して確認ページが表示されるか確認してみましょう。

今回は確認画面もthanksページも表示されましたね！

これで実装は完了です。