Home
WordPress
【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

公開日
2022.05.05
更新日
2024.01.02
【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

どうも!かけちまるです!

Contact Form 7は簡単にフォームを作成できるのですが、確認画面や完了画面を追加できないのがネックだと思っているのではないでしょうか?

Contact Form 7事態にはそのような機能はないのですが、「Contact Form 7 Multi-Step Forms」というプラグインを追加することで確認画面や完了画面を追加することができます。

この記事では、

  • ・Contact Form 7 Multi-Step Formsはどんなプラグイン?
  • ・確認画面と完了画面の追加手順

がわかります。

Contact Form 7 Multi-Step Formsはどんなプラグイン?

「Contact Form 7 Multi-Step Forms」は、「Contact Form 7」で作成したフォームをステップごとに分割することができるプラグインです。

Contact Form 7 add confirmだとダメなのか?

確認画面を追加するプラグインとして「Contact Form 7 add confirm」も存在するようですが、このプラグインは4年程アップデートされておらず、「Contact Form 7」の最新バージョンでは動作しません。

どんな時に使われるのか?

入力項目が多く縦長のページになってしまいそうな時にフォームを数ページに分け、ユーザーに入力してもらったり、入力内容を確認してから送信させるために確認ページを設けたりするために使われます。

どんな時に使われるのか

この記事では、確認画面と完了画面を追加する方法を解説します。

確認画面と完了画面の追加手順

前提として、Contact Form 7でフォームを作成済みとして進めます。
Contact Form 7の基本設定は次の記事を参考にしてください。

確認画面と完了画面の追加手順は次の通りです。

  • ①Contact Form 7 Multi-Step Formsを追加
  • ②固定ページを作成
  • ③お問い合わせフォームの設定
  • ④確認用フォームの作成&設定
  • ⑤確認用固定ページに確認フォームのショートコードを追記
  • ⑥動作確認
1

Contact Form 7 Multi-Step Formsを追加

左メニューのプラグイン > 新規追加に進みます。
検索窓に「Contact Form 7 Multi-Step Forms」と入力し、インストールしたのちに有効化します。

Contact Form 7 Multi-Step Formsを有効化

有効化できていれば、Contact Form 7のフォームに項目が増えていると思います。

Contact Form 7 Multi-Step Formsを有効化
2

固定ページを作成

確認ページ、完了ページ用の固定ページを作成します。
左メニューの固定ページ > 新規追加から確認ページ、完了ページをそれぞれ作成してください。
※タイトル、内容、パーマリンクは任意で設定してください。

固定ページを作成
3

お問い合わせフォームの設定

お問い合わせ用のフォームを編集します。
送信ボタンの文言を「確認画面へ」などに変更します。
その後、フォームに「multistep」を追加します。

固定ページを作成

「multistep」の設定は、

  • 名前:任意の値で設定。デフォルトでいいとおもいます。
  • First Step:初めのフォームになるのでFirst Stepにチェック
  • Next Page URL:確認ページ用の固定ページのURLを記入
固定ページを作成
4

確認用フォームの作成&設定

左メニューのお問い合わせ > 新規追加から確認用のフォームを作成します。
入力確認用の値は[multiform]を使うことで表示できます。
例えば、[multiform “your-name”]とすると名前を表示することができます。

※”your-name”部分は各項目のname属性の値を設定してください。

確認用フォームの作成&設定

previousタグを追加すると前ページに戻るボタンを追加することができます。
※それぞれ任意で設定してください。

  • Label:ボタンの文言を設定
  • Id attribute:id属性を設定
  • Class attribute:class属性を設定
確認用フォームの作成&設定

最後に、フォームに「multistep」を追加します。
「multistep」の設定は、

  • 名前:任意の値で設定。デフォルトでいいとおもいます。
  • Send Email:送信前のフォームになるのでSend Emailにチェック
  • Next Page URL:完了ページ用の固定ページのURLを記入
確認用フォームの作成&設定

最終的に次のような感じになっていればOKです。

確認用フォームの作成&設定
5

確認用固定ページに確認フォームのショートコードを追記

まず、確認用フォームのショートコードをコピーします。
左メニューのお問い合わせ > コンタクトフォームに進み、確認用フォームのショートコードをコピーします。

固確認用固定ページに確認フォームのショートコードを追記

次に確認用固定ページにショートコードを貼り付けて更新します。

確認用固定ページに確認フォームのショートコードを追記固定ページを作成
6

動作確認

これで、確認画面と完了画面の設定が完了です。
入力画面→確認画面→完了画面の手順でメールが送信できること。
確認画面から入力画面に戻ることができるかなどの動作確認をしてみましょう。

Contact Form 7関連の記事

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【CSSのみ】ボタンのホバーアニメーションまとめ

【CSSのみ】ボタンのホバーアニメーションまとめ

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

translateを使わずにpositionで要素を中央寄せにする方法

translateを使わずにpositionで要素を中央寄せにする方法

【WordPress】記事の公開日と最終更新日を表示

【WordPress】記事の公開日と最終更新日を表示

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション