WordPressのプラグインContactForm7 Multi-Step Formsでお問い合わせ「確認画面」と「完了画面」を作る

WordPressでホームページを作成しています。それで、お問い合わせページを作成することになりました。簡単にお問い合わせページを設置できるポピュラーなプラグインとして「ContactForm7」があります。

見習い

「ContactForm7」は、お問い合わせページ1枚の簡単な構成なので、「確認画面」と「完了画面」を設置するにはどうしたらいいんだろう。画面遷移はこんな感じが良いなぁ。

＜画面遷移＞
1.入力画面⇒2.確認画面⇒3.完了画面

o_wani

どうやら、「Contact Form 7 Multi-Step Forms」というプラグインがあるので、それを使うと簡単に設置できるみたい。手順を追って記載してみるよ。

「Contact Form 7」はインストールして、有効化しておきます。

※前提：「Contact Form 7」有効化しておく

サイドメニューのお問い合わせにショートコードの記載のあるコンタクトフォームが作成されているはずです。

サイドメニューの［固定ページ］からショートコードを埋め込んだページを作成しておきましょう。

ページの内容は「Contact Form 7」タグを貼り付けた状態にしておきます。

準備OKです。

それでは、「確認画面」と「完了画面」を作る手順を進めましょう。

「Contact Form 7 Multi-Step Forms」のインストール

「Contact Form 7 Multi-Step Forms」というプラグインを新規追加します。［今すぐインストール］をクリックします。

インストール後、プラグインを「有効化」します。［Activate］をクリックします。

その後、［許可して続ける］をクリックします。

サイドメニューの「お問い合わせ＞新規追加」を表示します。

3つのタグ

「multistep」「multiform」「previous」の3つが生成できるフォームタグとして増えています。

確認画面の新規作成

サイドメニューの「お問い合わせ」を表示します。すでに作成してあるコンタクトフォームを［複製］をクリックして新規でページを作成します。

タグの内容は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_確認」を新規作成します。

この「コンタクトフォーム 1_確認」を使って固定ページを新規作成します。

サイドメニューの「固定ページ＞新規追加」から固定ページを新規作成します。

ブロック挿入メニューにて「contact」という文字で検索します。すると「ContactForm7」が候補に表示されますので選択します。

先ほど作成した「コンタクトフォーム1_確認」がプルダウンに表示されるので選びます。

見切れてますが、「コンタクトフォーム1_確認」を選択されました。

URL(パーマリンク)の設定をします。今回は、「contact_confirm」に設定します。

その後は、［公開］ボタンをクリックして保存します。

• タイトル：お問い合わせ確認
• 本文：「コンタクトフォーム1_確認」のショートコード埋め込み
• パーマリンク：contact_confirm

完了画面の新規作成

サイドメニューの「固定ページ＞新規追加」から固定ページを新規作成します。

完了画面のタイトルと本文、パーマリンクは下記のように設定します。

• タイトル：お問い合わせ完了
• 本文：お問い合わせありがとうございます。
• パーマリンク：contact_complete

入力画面と確認画面の関連付け

入力画面と確認画面の関連付けをします。

サイドメニューの「お問い合わせ」を表示します。

すでに作成してある「コンタクトフォーム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タグを埋め込みます。

するとフォームタグ生成のウィンドウが表示されますので、下記のようにします。

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_確認」を［編集］します。

するとフォームタグ生成のウィンドウが表示されますので、下記のようにします。

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です。

見習い

ここまでの内容で試したけど、確認画面から入力画面に［戻る］ボタンが表示されないよ・・・・困りました。。。

バグ修正

o_wani

これまでの内容だと、確認画面から入力画面に［戻る］ボタンが、うまく動かないことがわかった。あともうちょっとだけ。

「お問い合わせ」の「コンタクトフォーム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"

これで修正完了です。

見習い

うまく動きました

o_wani

確認画面と完了画面のデザインの調整もやってみてね

o_wani

スタッフ

Twitter

大学卒業後、15年間WEB業界で働く。現在はマネジメントに従事していますが、ChatGPTの登場に触発され、このブログを再開。AIをパートナーに、自分で手を動かして実装する楽しさと喜びを再発見中。時代が変わりつつある中でも、陳腐化しない情報発信も目指しています。