WordPressのContact Form 7プラグインで入力内容確認及び送信完了ページを実装する方法

WordPressのContact Form 7プラグインで実装されたお問い合わせページにて、入力内容確認ページと送信完了ページを実装したいと要望を受けた。また、入力内容ページでは内容に不備があった場合用に「戻る」的なボタンも設置したかった。以下に実装方法をメモ。

実装方法

プラグインの用意

「Contact Form 7 Multi-Step Forms」プラグインを使用するため、WPダッシュボード→プラグイン→新規プラグインを追加と進み「プラグインの検索」テキストボックスに「Contact Form 7 Multi-Step Forms」を入力し、インストールの上、有効化すること。

尚、「Contact Form 7 Multi-Step Forms」のページからファイルをダウンロードし、アップロードする形でも良い。

各ページの用意

固定ページで各ページを作成しておく。とりあえずは適当なタイトルと本文で作成し、ページのURLをメモしておく。今回は例として以下URLを設定したとする。

• フォームページ https://test.com/contact/
• 入力内容確認ページ https://test.com/contact-confirm/
• 送信完了ページ https://test.com/contact-complete/

Contact Form 7の設定

フォームページ

フォームページはまず普通にContact Form 7で作成する。

次に入力内容確認ページと紐づけるため「multistep」ボタンをクリックし以下項目を設定する。

• First Stepにチェックを入れる
• Next Page URLに入力内容確認ページにURLを入力する。相対パスでも可。今回の場合だと「/contact-confirm/」を入力する

その後「Insert Tag」ボタンをクリックするとタグが自動入力されるので、該当タグをsubmitの後ろに入れ替える。具体的には以下のような記述になればOK。

<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-xxxxxxxx first_step "/contact-confirm/"]

尚「multistep-xxxxxxxx」の「xxxxxxxx」は適当な数値が割り振られる筈。

入力内容確認ページ

上記で作成したフォームページを複製し以下のように記述内容を変更する。

<label> 氏名
    [multiform "your-name"]  </label>

<label> メールアドレス
    [multiform "your-email"] </label>

<label> 題名
    [multiform "your-subject"] </label>

<label> メッセージ本文 (任意)
    [multiform "your-message"] </label>

[submit "送信"]

戻るボタンを作成するため「previous」ボタンをクリックし、Labelに「戻る」や「修正」等の文言を入力の上、「Insert Tag 」ボタンをクリックする。

次に送信完了ページへ紐づけるため「multistep」ボタンをクリックし以下項目を設定する。

• Last Stepにチェックを入れる(そうするとSend Emailにもチェックが入るので、これはこのままでOK)
• Next Page URLに入力内容確認ページにURLを入力する。相対パスでも可。今回の場合だと「/contact-complete/」を入力する

その後「Insert Tag」ボタンをクリックするとタグが自動入力されるので、該当タグをsubmitの後ろに入れ替える。具体的には以下のような記述になればOK。

<label> 氏名
    [multiform "your-name"]  </label>

<label> メールアドレス
    [multiform "your-email"] </label>

<label> 題名
    [multiform "your-subject"] </label>

<label> メッセージ本文 (任意)
    [multiform "your-message"] </label>

[previous "戻る"]
[submit "送信"]
[multistep multistep-xxxxxxxx last_step send_email "/contact-complete/"]

尚「multistep-xxxxxxxx」の「xxxxxxxx」は適当な数値が割り振られる筈。

フォーム及び入力内容確認ページにContact Form 7を設置

Contact Form 7の設定を行うと以下のようなショートコードが発行されるので、固定ページで作成したフォーム及び入力内容確認ページに設置することで実装完了となる。

[contact-form-7 id="xxxxxxxxxxxxx" title="xxxxxxxxxxxxx"]

所感

設定やページ作成がやや面倒なものの、これ用にPHPでプログラムを組む必要は無くプラグインで完結できる点が良かった。