WordPressのプラグインContactForm7 Multi-Step Formsでお問い合わせ「確認画面」と「完了画面」を作る
![ContactForm7](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/ContactForm7で作る-確認画面と完了画面-1.jpg?resize=1280%2C720&ssl=1)
WordPressでホームページを作成しています。それで、お問い合わせページを作成することになりました。簡単にお問い合わせページを設置できるポピュラーなプラグインとして「ContactForm7」があります。
![見習い](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/よこやん.png?resize=72%2C72&ssl=1)
「ContactForm7」は、お問い合わせページ1枚の簡単な構成なので、「確認画面」と「完了画面」を設置するにはどうしたらいいんだろう。画面遷移はこんな感じが良いなぁ。
<画面遷移>
1.入力画面⇒2.確認画面⇒3.完了画面
![o_wani](https://i0.wp.com/owani.net/wp-content/uploads/2023/11/DALL·E-2023-06-09-16.00.49-High-quality-photo-of-a-Shiba-Inu-astronaut.jpg?resize=72%2C72&ssl=1)
どうやら、「Contact Form 7 Multi-Step Forms」というプラグインがあるので、それを使うと簡単に設置できるみたい。手順を追って記載してみるよ。
「Contact Form 7」はインストールして、有効化しておきます。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-56.png?resize=837%2C204&ssl=1)
サイドメニューのお問い合わせにショートコードの記載のあるコンタクトフォームが作成されているはずです。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-57.png?resize=934%2C309&ssl=1)
サイドメニューの[固定ページ]からショートコードを埋め込んだページを作成しておきましょう。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-58.png?resize=778%2C368&ssl=1)
ページの内容は「Contact Form 7」タグを貼り付けた状態にしておきます。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-59.png?resize=907%2C278&ssl=1)
準備OKです。
それでは、「確認画面」と「完了画面」を作る手順を進めましょう。
「Contact Form 7 Multi-Step Forms」のインストール
「Contact Form 7 Multi-Step Forms」というプラグインを新規追加します。[今すぐインストール]をクリックします。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-60.png?resize=980%2C255&ssl=1)
インストール後、プラグインを「有効化」します。[Activate]をクリックします。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-61.png?resize=919%2C254&ssl=1)
その後、[許可して続ける]をクリックします。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-62.png?resize=1008%2C437&ssl=1)
サイドメニューの「お問い合わせ>新規追加」
を表示します。
「multistep」「multiform」「previous」の3つが生成できるフォームタグとして増えています。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-63.png?resize=1024%2C469&ssl=1)
確認画面の新規作成
[コンタクトフォーム]を複製して作成
サイドメニューの「お問い合わせ
」を表示します。すでに作成してあるコンタクトフォームを[複製]をクリックして新規でページを作成します。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-64.png?resize=1024%2C190&ssl=1)
タグの内容はmultiformを使ったかたちに変更します。
(変更前)
[text* your-name autocomplete:name]
[email* your-email autocomplete:email]
[textarea your-message]
(変更後)
[multiform "your-name"]
[multiform "your-email"]
[multiform "your-message"]
「戻る(修正する)」ボタンと「同意のうえ送信する」チェックボックスを加えて、最終的に下記のような内容にしました。
<label> 氏名
[multiform "your-name"] </label>
<label> メールアドレス
[multiform "your-email"] </label>
<label> 題名
[multiform "your-subject"] </label>
<label> メッセージ本文 (任意)
[multiform "your-message"] </label>
[acceptance acceptance-324 optional] プライバシーポリシーに同意の上送信します。 [/acceptance]
[previous "修正する"]
[submit "送信する"]
以上の内容で、「コンタクトフォーム 1」を複製して、「コンタクトフォーム 1_確認」を新規作成します。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-65.png?resize=1024%2C478&ssl=1)
この「コンタクトフォーム 1_確認」を使って固定ページを新規作成します。
[固定ページ]を新規作成
サイドメニューの「固定ページ>新規追加
」から固定ページを新規作成します。
ブロック挿入メニューにて「contact」という文字で検索します。すると「ContactForm7」が候補に表示されますので選択します。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-78.png?resize=1024%2C331&ssl=1)
先ほど作成した「コンタクトフォーム1_確認」がプルダウンに表示されるので選びます。
![画像に alt 属性が指定されていません。ファイル名: image-67.png](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-69.png?resize=859%2C307&ssl=1)
見切れてますが、「コンタクトフォーム1_確認」を選択されました。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-68.png?resize=1024%2C228&ssl=1)
パーマリンクの設定
URL(パーマリンク)の設定をします。今回は、「contact_confirm」に設定します。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-70.png?resize=1024%2C529&ssl=1)
その後は、[公開]ボタンをクリックして保存します。
- タイトル:お問い合わせ確認
- 本文:「コンタクトフォーム1_確認」のショートコード埋め込み
- パーマリンク:contact_confirm
完了画面の新規作成
サイドメニューの「固定ページ>新規追加」から固定ページを新規作成します。
完了画面のタイトルと本文、パーマリンクは下記のように設定します。
- タイトル:お問い合わせ完了
- 本文:お問い合わせありがとうございます。
- パーマリンク:contact_complete
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-71.png?resize=1024%2C565&ssl=1)
入力画面と確認画面の関連付け
入力画面と確認画面の関連付けをします。
サイドメニューの「お問い合わせ」を表示します。
すでに作成してある「コンタクトフォーム1」を[編集]をクリックします。「コンタクトフォーム1」に確認画面のタグを埋む手順です。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-72.png?resize=1024%2C263&ssl=1)
現状は下記のような内容で登録されているとします。
<label> 氏名
[text* your-name autocomplete:name] </label>
<label> メールアドレス
[email* your-email autocomplete:email] </label>
<label> 題名
[text* your-subject] </label>
<label> メッセージ本文 (任意)
[textarea your-message] </label>
[submit "送信"]
「送信」ボタンを「確認画面へ」ボタンに変更し、multistepタグを埋め込みます。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-73.png?resize=1024%2C474&ssl=1)
するとフォームタグ生成のウィンドウが表示されますので、下記のようにします。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-74.png?resize=644%2C557&ssl=1)
NextPageURLの項目は、固定ページの確認画面のURL(パーマリンク)です。設定後は[Insert Tag]ボタンをクリックし、確認画面用タグを挿入します。
<label> 氏名
[text* your-name autocomplete:name] </label>
<label> メールアドレス
[email* your-email autocomplete:email] </label>
<label> 題名
[text* your-subject] </label>
<label> メッセージ本文 (任意)
[textarea your-message] </label>
[submit "確認画面へ"]
[multistep multistep-739 first_step "/contact_confirm"]
上記の内容で先に進みます。
確認画面と完了画面の関連付け
入力画面でmultistepタグを使い、確認画面の関連付けを行ったように、確認画面に完了画面のタグを埋みます。
すでに作成してある「コンタクトフォーム1_確認」を[編集]します。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-76.png?resize=1024%2C507&ssl=1)
するとフォームタグ生成のウィンドウが表示されますので、下記のようにします。
![](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/image-77.png?resize=641%2C553&ssl=1)
NextPageURLの項目は、固定ページの完了画面のURL(パーマリンク)です。設定後は[Insert Tag]ボタンをクリックし、確認画面用タグを挿入します。
<label> 氏名
[multiform "your-name"] </label>
<label> メールアドレス
[multiform "your-email"] </label>
<label> 題名
[multiform "your-subject"] </label>
<label> メッセージ本文 (任意)
[multiform "your-message"] </label>
[acceptance acceptance-324 optional] プライバシーポリシーに同意の上送信します。 [/acceptance]
[previous "修正する"]
[submit "送信する"]
[multistep multistep-61 last_step send_email "/contact_complete"]
上記の内容でOKです。
![見習い](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/よこやん.png?resize=72%2C72&ssl=1)
ここまでの内容で試したけど、確認画面から入力画面に[戻る]ボタンが表示されないよ・・・・困りました。。。
バグ修正
![o_wani](https://i0.wp.com/owani.net/wp-content/uploads/2023/11/DALL·E-2023-06-09-16.00.49-High-quality-photo-of-a-Shiba-Inu-astronaut.jpg?resize=72%2C72&ssl=1)
これまでの内容だと、確認画面から入力画面に[戻る]ボタンが、うまく動かないことがわかった。あともうちょっとだけ。
「お問い合わせ
」の「コンタクトフォーム1」のタグ内容を修正します。
修正箇所は確認画面へ遷移するリンクの修正です。相対パスを絶対パスに修正します。
すでに作成してある「コンタクトフォーム1」を[編集]します。
下記の内容に修正をします。
<label> 氏名
[text* your-name autocomplete:name] </label>
<label> メールアドレス
[email* your-email autocomplete:email] </label>
<label> 題名
[text* your-subject] </label>
<label> メッセージ本文 (任意)
[textarea your-message] </label>
[submit "確認画面へ"]
[multistep multistep-739 first_step "https://XXXXXXXXXXXXXX/contact_confirm"]
相対パスを絶対パスに修正です。ドメインは環境に合わせ変更します。
(変更前)
"/contact_confirm"
(変更後)
"https://XXXXXXXXXXXXXX/contact_confirm"
これで修正完了です。
![見習い](https://i0.wp.com/owani.net/wp-content/uploads/2023/12/よこやん.png?resize=72%2C72&ssl=1)
うまく動きました
![o_wani](https://i0.wp.com/owani.net/wp-content/uploads/2023/11/DALL·E-2023-06-09-16.00.49-High-quality-photo-of-a-Shiba-Inu-astronaut.jpg?resize=72%2C72&ssl=1)
確認画面と完了画面のデザインの調整もやってみてね