Written by Kasumi

【簡単】Contact Form 7に確認画面・完了ページを設定する方法

WordPressのプラグイン、Contact Form 7を使ってお問い合わせフォームを作成している。

確認画面・完了ページを設けたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

Contact Form 7 Multi-Step Formsを導入

Contact Form 7に確認画面を設けるには、Contact Form 7 Multi-Step Formsプラグインを使うと簡単に導入できます。

WordPress管理画面>プラグイン>新規追加>検索ボックスにContact Form 7 Multi-Step Formsと入力。

検索結果より、該当するプラグインをインストール・有効化します。

確認画面・完了ページを作成

確認画面と完了ページを固定ページなどで作成しときます。

Contact Form 7の設定画面でフォームを編集

Contact Form 7の設定画面を開き現在使用されてるフォーム(以降:入力フォーム)を編集します。

Contact Form 7 Multi-Step Formsを有効化したことで、上部のボタン一覧にmultistepが追加されてます。

multistepをクリック。

上記画像のようなポップアップが出るので、First Stepのチェックボックスにチェック。

Next Page URLに前章で作成した確認画面ページへのURLを入れます。

Insert Tagボタンをクリックしてタグを挿入します。

submitボタンのテキストも【入力内容を確認する】など任意に変更しましょう。

Contact Form 7の設定画面で確認画面用のフォームを作成

Contact Form 7の設定画面で確認画面用のフォームを新たに作成します。

任意で確認画面レイアウト用のhtmlを設置。

上部ボタンからmultiformボタンをクリック。

上記画像のようなポップアップが出ます。

Nameのフィールド入力フォームにある項目名(名前)をいれ、入力内容を表示したい箇所にタグを挿入します。

入力フォームにあるフォーム項目の数だけ同じ事を繰り返します。

multistepボタンをクリック。

Send Emailにチェック。

Next Page URL完了ページのURLを入力

Insert Tagボタンをクリックしてタグを挿入します。

上記の流れまで設定したら、確認画面用のフォームを保存しましょう。

確認画面ページにショートコードを挿入

Contact Form 7の設定画面で確認画面用のショートコードを確認。

上記ショートコードを確認ページに埋め込みして完成です。

入力→確認→完了ページの順でお問い合わせフォームが遷移するか確認してください。

まとめ

Contact Form 7に確認画面・完了ページを設定する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

Yoast SEOのschema(スキーマ)設定を無効化する方法

2022.04.03
1057
WordPress

【WordPress】現在のアーカイブ・カテゴリページの記事総数を表示する方法

2022.05.30
197
WordPress プログラミング

Advanced Custom Fields でオプションページに投稿タイプを作成する方法

2022.04.24
1329
WordPress

【簡単】wordpressのアーカイブでタイトルの文字数を制限して表示、3点リーダーを付ける方法

更新日:2022.07.15
912