Contact Form 7 Multi-Step Formsの使い方
コンタクトフォームはウェブサイトで重要な役割を果たしますが、フォームが長すぎるとユーザーの離脱率が上がる可能性があります。
この問題を解決するために、「Contact Form 7 Multi-Step Forms」プラグインを使用することができます。
このプラグインを使うことで、フォームを複数のステップに分割し、ユーザーが分かりやすく入力できるようにすることができます。
今回は、「Contact Form 7 Multi-Step Forms」の使い方について解説します。
プラグインのインストールと有効化
WordPressのダッシュボードにログインし、「プラグイン」セクションから「新規追加」を選択します。
プラグイン検索バーに「Contact Form 7 Multi-Step Forms」と入力し、プラグインを検索します。
プラグインが表示されたら、「インストール」をクリックしてプラグインをインストールします。
有効化すると、上記画像のメッセージが表示されるので「スキップ」をクリックして次に進みます。
新規フォームの作成
新しいコンタクトフォームを作成します。
通常のContact Form 7と同様に、フォームのタイトルやフォームフィールドを追加します。
確認画面用フォームなどのわかりやすい名前でフォームを作成します。
text* your-name
textarea your-message
などの内容を確認画面では、
multiform your-name
multiform your-message
に変更します。
メールの設定も忘れずに、確認画面へ移動します。
固定ページを作成
WordPressの固定ページより、確認画面用のページを作成します。
また、サンクス(送信完了)ページも作成します。
入力画面から確認画面へ移動する設定
「multistep」をクリックします。
「First Step」にチェックを入れ、「Next Page URL」に確認画面用へのURLを入力し、
「Insert Tag」ボタンをクリックしてフォームにマルチステップタグを挿入します。
確認画面から送信完了へ移動する設定
「multistep」をクリックします。
「Send Mail」にチェックを入れ、「Next Page URL」に送信完了用に作成したURLを入力し、「Insert Tag」ボタンをクリックしてフォームにマルチステップタグを挿入します。
まとめ
「Contact Form 7 Multi-Step Forms」を使用することで、長いフォームを分かりやすいステップに分割し、ユーザーの離脱率を減少させることができます。
プラグインのインストールからフォームの作成、設定、表示までの手順を把握することで、効果的なマルチステップフォームを実装できるでしょう。
【CONTACT FORM7用】都道府県・生年月日テンプレートの実装方法
10月 16, 2024ACFカスタムフィールドでの選択肢ラベルにHTMLを使用する方法
7月 30, 2024「MW WP Form」で年月日のセレクト項目を動的に生成する方法
5月 16, 2024