お問い合わせフォームをステップ形式に変更できる便利なプラグイン

こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。

お問い合わせフォームの項目をステップ形式に変更する方法があります。一般的にお問い合わせフォームは１頁にすべての項目が表示されていますが項目数が増えれば増えるほど離脱率が上がってしまいます。

そこでフォーム項目を複数ページに分散させることで利用者側の負担を軽減させるテクニックが役に立ちます。ただ、実際トータルの項目数は変わらないのであくまでも手軽さを演出するための技術ですね。

下記でご紹介させていただきます。

お問い合わせフォームをステップ形式に変更できる便利なプラグイン
まとめ
- 補足

お問い合わせフォームをステップ形式に変更できる便利なプラグイン

プラグイン追加は管理画面から行えます。

プラグインを追加する

プラグイン名「Contact Form 7 Multi-Step Forms」と検索すればOKです。

下記画面はスキップでOKです。

有効化で追加される機能

プラグインが有効化されると各フォーム内に３つの機能が追加されます。

あと「メッセージ」にも項目が増えます。

上記メッセージはステップ形式の途中ページを開いた場合に表示するエラー文言です。メッセージは自由に設定できます。もし変更する場合は「最初のページに戻ってフォームをご利用ください」とすればOK。

固定ページを作成する

下記の通り入力ステップをわける場合は合計５つの固定ページが必要となります。

１. 名前の入力（/step1）
２. メールアドレスの入力（/step2）
３. お問い合わせ入力（/step3）
４. 各入力項目の確認（/confirm）
５. 送信完了（/complete）

各固定ページのスラッグは自由です。

http://example.com/step1/
http://example.com/step2/
http://example.com/step3/
http://example.com/confirm/
http://example.com/complete/

ステップ部分が「step1〜3」です。

フォーム設定を５つ作成する

名前は何でもOK。下記ではそれぞれに番号を振って作成しています。

下記が「ステップ1」のフォーム設定です。初回のみ「first_step」を指定して次の固定ページURLを指定。

次が「ステップ2」のフォーム設定です。2ページ目以降は戻るためのボタンを追加していきましょう。

そして「ステップ3」ですね。確認画面へ進むための文言に変更。

💻ウェブサイト運営でお困りの方へ

⇒ WordPressの設定ミスを即日で解決 ※ 安心の定額サポート

次が「確認画面」。それぞれを表示させるためのタグを指定。併せて「send_email」の設定も必要となります。確認用の画面なのでテーブルタグなどのレイアウトで作るとより見やすくなるかもしれません。

最後が「送信完了」ですね。ラストなので「last_step」と「send_email」の両方指定しましょう。

各ショートコードを差し込む

Contact Form 7のショートコードを各固定ページ内に入れたら完成です。

フォームの動作テスト

下記が「step1」の入力ページを表示した例となります。

次の入力画面が「step2」でメールアドレスです。

そして「step3」の本文となります。

その後「確認画面」に進みます。

最後に「送信完了」が表示されます。

以上で手順が完了となります。

まとめ

本日は「ステップ形式のお問い合わせフォーム」を解説させていただきました。

より使い勝手を向上させるための細かいデザインカスタマイズとしては「戻るためのボタンを薄い灰色で統一」して「次に進むためのボタン類を青や緑でカラー設定」をすればさらに良い結果が出るはずです。

ご希望に合わせてぜひお試しください。

補足

上記でスキップした手順により表示されるメッセージを非表示にするにはカスタマイズが必要です。

function admin_cf7_multi_step_module_style() {
	echo '<style>
	body.wp-admin .wrap div[data-slug="contact-form-7-multi-step-module"] { 
		display:none!important;
	}
	</style>'.PHP_EOL;
}
add_action('admin_print_styles', 'admin_cf7_multi_step_module_style');

念のためにプラグインもご用意する予定なのでウェブサイトのバックアップに不安があればプラグインをご活用くださいませ。完成次第で下記からダウンロードできますのでお試しいただけますと幸いです。