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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

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

プラグインを追加する

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

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

有効化で追加される機能

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

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

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

固定ページを作成する

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

1. 名前の入力(/step1)
2. メールアドレスの入力(/step2)
3. お問い合わせ入力(/step3)
4. 各入力項目の確認(/confirm)
5. 送信完了(/complete)

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

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

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

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

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

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

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

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

💻受講料無料でプログラミング習得

⇒ 完全無料のプログラミングスクール - 手に職をつけて安定的に働きたい人へ -

次が「確認画面」。それぞれを表示させるためのタグを指定。併せて「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');

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

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください