多くのサイトオーナーは、長いフォームでユーザーを圧倒することなく、ユーザーの入力を集めることに苦労している。
ドロップダウンフィールドは、簡潔なオプションのリストを表示することでフォームをシンプルにします。つまり、フォームの入力率を高め、ユーザーエクスペリエンスを向上させることができるのです。
この投稿では、ドロップダウンフィールドを持つWordPressフォームを作成する方法を紹介します。
ドロップダウン・フィールドとは何か?
ドロップダウンフィールドは、ユーザーが異なるバリエーションの設定リストから1つのオプションを選択することができます。ユーザーはフィールドをクリックするだけで、すべてのドロップダウンリストを見ることができます。
サイトオーナーとして、ドロップダウンフィールドを使用して、メールマガジン登録、お問い合わせフォーム、イベント登録フォーム、商品注文フォームなどのウェブフォームを作成することができます。
ドロップダウンフィールドはフォームの効果を向上させます。いくつかの利点があります:
- 一貫性。設定されたオプションのリストは、収集されたデータの一貫性を保ち、無効なエントリーを防ぎます。これにより、データ分析がより正確になります。
- ダイナミックなフィールド。 ドロップダウンフィールドは、条件ロジックの設定を容易にします。設定されたオプションリストにより、不必要なハードルなしにユーザーの選択に基づいて追加フィールドを表示できます。
- フォームの長さを短縮。複数のオプションをコンパクトなドロップダウンメニューにまとめることで、フォームの威圧感を軽減することができます。その結果、ユーザーエクスペリエンスが向上します。
ということで、WordPressでドロップダウンフィールド付きのフォームを作成する方法を見てみましょう。このチュートリアルで扱うステップの概要を簡単に説明します:
始めよう!
ステップ1:WPFormsのインストール
WPFormsは初心者に優しく、ドラッグ&ドロップでフォームを作成できる最高のWordPressプラグインです。このフォームビルダーには1,800以上のテンプレートがあり、数クリックでユーザーフレンドリーなフォームを作成することができます。
また、Constant ContactやStripeなど、サードパーティのマーケティングや決済プラットフォームを統合することもできます。
注意事項 WPForms Liteにはドロップダウンフィールド機能が付属しています。とはいえ、条件ロジックを設定し、フォームのユーザーエクスペリエンスを向上させることができるように、プラグインのプレミアムバージョンを取得することをお勧めします。
WPBeginnerの読者は、WPFormsのクーポンを使用することで、特別50%オフです:SAVE50。
WPFormsをインストールして有効化するには、WordPressプラグインのインストール方法のガイドをお読みください。
ステップ 2: 新規フォームの作成
有効化すると、WordPressの管理エリアに以下のようなWPFormsメニューが表示されます:
これでWPFormsビルダーのインターフェースにアクセスし、ドロップダウンフィールドを持つフォームを作成できるようになります。
新規フォームを作成するには、WPFormsにマウスオーバーして「新規追加」をクリックします。
あるいは、WPForms をクリックすることもできます。これでビルダーの「フォームの概要」セクションにリダイレクトされます。
まずは、「+新規追加」ボタンをクリックしてください。
WPFormsフォームビルダーに’Setup’パネルが表示されます。このパネルで、まずフォームの名前を決めます。
例えば、’Simple Contact Form’、または単に’Contact Form’を’Name Your Form’フィールドに入力することができます。
それが終わったら、いよいよテンプレートを選択する。
フォームテンプレートを使うには、すべて必要なものにマウスオーバーして「テンプレートを使う」をクリックするだけです。この例では’シンプルお問い合わせフォーム’を使用します。
お問い合わせフォームの作り方についてさらに詳しく知りたい方は、WordPressでお問い合わせフォームを作る方法についての詳しいガイドをご覧ください。
ステップ 3: ドロップダウンフィールドの追加
セットアップが完了すると、フォームビルダーにリダイレクトされ、左側にフィールドのリスト、右側にライブプレビューが表示されます。
さて、お問い合わせフォームにドロップダウンフィールドを追加したいと思います。
ドロップダウン」をクリックし、フォームの右側にドラッグするだけです。
注意事項WPForms Liteでは’Standard Fields’カテゴリのすべてのフィールドが利用可能です。そのため、複数選択フィールドを持つフォームを作成したり、ログインや登録フォームにCAPTCHAを無料で追加することができます。
パネルの右側にお問い合わせフォームのドロップダウンフィールドが表示されます。マウスオーバーで設定にアクセスできます:
- コピーボタン
- 削除ボタン
- クリックして編集」の指示
- ドラッグで並び替え」指示
ドラッグ・アンド・ドロップ機能を使って、ドロップダウン・フィールドを「コメントまたはメッセージ」の上に移動してみましょう。
送信ボタンの直前に「コメントまたはメッセージ」の段落フィールドを設置することで、フォーム入力の流れをよりスムーズにすることができます。また、ドロップダウンフィールドをより見やすくすることで、ユーザーが見落とさないようにします。
ステップ 4: ドロップダウンフィールドの設定
このステップでは、ドロップダウンフィールドのラベル、オプション、説明を設定します。オプションのリストはフォームのタイプに合わせてください。今回はお問い合わせフォームを作成するので、ニュースレター購読のオプションを設定しましょう。
ドロップダウンフィールドをクリックし、「フィールドオプション」に進みます。
一般」タブで、必要事項を記入する:
- ラベル。 ドロップダウンフィールドでは、ラベルは通常質問です。例として、’ニュースレターを購読しますか’を使用します。
- 選択肢。はい、お願いします』と『いいえ、結構です』を加えよう。
- 説明この欄には「いつでも配信停止できます。
- 必須。訪問者がこのフィールドに入力することを必須にするには、このオプションを切り替えます。
次に、条件ロジックを設定しよう。
条件付きロジックとは、’if’と’then’ステートメントを使って決定を下すことを意味します。フォームで使用される場合、ユーザーの回答に基づいて次に何が起こるかを決定します。
条件ロジックを設定することで、フォームの入力が簡単になります。以前の選択に基づいて関連するオプションのみを表示することで、フォームが不必要な選択肢でユーザーを圧迫することはありません。
この例では、ユーザーが’はい、お願いします’オプションを選択した場合、追加のフィールドを表示してみましょう。購読者がプロモーションメールの受信頻度を選択できるようにします。
その前に、新しいフィールドを用意する必要があります。フィールドの追加」タブに戻り、「ドロップダウン」またはその他のフィールドタイプをクリックします。そして、新規フィールドの詳細を記入します。
例を挙げよう:
新規フィールドの準備ができたので、それをクリックして「スマート・ロジック」タブに移動する。
ここから、「条件付きロジックを有効化」オプションを切り替えて、条件付きロジックを有効化することができます。
有効化した後、新しいフィールドの条件ロジックを設定することができます。
まず、新規フィールドの「表示」または「非表示」を選択します。次に、既存のフィールドとユーザー入力を選択します。
ニュースレターの購読を希望します」が「はい、お願いします」の場合、このフィールドを「表示」します。
エキスパートのヒント ユーザーを直接メールリストに追加したいですか?WordPressでメールリストを作成する方法のチュートリアルをご覧ください。
ステップ5:フォームのパーソナライズ
新しいフォームをパーソナライズする時です。
まず、新規ユーザーがフォームを送信するたびにメールで通知するように設定します。設定 ” 通知 を開き、’通知を有効化’ オプションを切り替えてください。
次に、トグルの下にあるフォームの初期通知設定を確認してください。
初期設定通知」フィールドのいくつかの項目には「スマートタグ」があります。このタグは、特にフォーム送信通知の送信先を想定しています。つまり、ニーズに応じて設定を調整することができます。
例えば、「送信先メールアドレス」フィールドには{admin_email}の「スマートタグ」があります。初期設定では、これはWordPressサイトの管理者のメールになります。そのため、フォーム送信の通知はすべて管理者メールの受信トレイに送られます。
メールマーケティングの専門家など、さらに受信者を追加することもできます。各メールは必ずカンマで区切ってください。
フォームメールを複数の人や異なる部署に送信する方法については、複数の受信者を持つお問い合わせフォームの作成方法をご覧ください。
次に、’メールの件名’の初期設定は’新規:’です:あなたのフォーム名」です。しかし、わかりやすい件名であれば、お好みで変更することができます。
フォームを送信したユーザーは、メールで通知を受け取る必要があります。差出人名’フィールドにより、ユーザーは誰が通知メールを送信したかを知ることができます。
次のフィールドは「From Email」で、このフィールドの「スマートタグ」は{admin_email}です。
この初期設定では、ユーザーはサイトの管理メールから通知メールを受け取ります。
強調表示されている部分は、サイトの管理者メールアドレスが@gmail.comなど別のドメインにあることを知らせています。これは、メールが「スパム」ボックスに入ってしまうなど、到達性の問題につながる可能性があります。
あなたのメールが読者の受信トレイに届くように、WP Mail SMTPの設定ガイドをお読みください。
送信された各通知メールには、受信者が返信する設定もあります。
返信先’フィールドでは、ユーザーからの返信を受け取るメールアドレスを設定できます。このフィールドの「スマートタグ」は{field_id= “1”}です。これは、ユーザーの返信先が「From Email」フィールドのメールアドレスと同じであることを意味します。
最後に、「メールメッセージ」フィールドには {all_fields} 「スマートタグ」があります。そのため、メールメッセージにはフォームフィールドとユーザーのレスポンスが含まれます。
通知のカスタマイザーが完了したら、「確認」に移動します。このセクションでは、フォーム送信後にどのように確認を表示するかを設定します。
まず、確認タイプとして「メッセージ」、「ページを表示」、「URLへ移動(リダイレクト)」を選択します。
確認タイプとして「メッセージ」を選択した場合、ユーザーにフォーム送信を受け取ったことを知らせる確認メッセージが表示されます。
この確認タイプでは、初期設定のメッセージをあなたのブランドに合うように編集することができます。確認メッセージ」フィールドに移動し、テキストボックスにカスタマイザーメッセージを入力してください。
ページを表示」を選択した場合は、WordPressサイトの既存のページを選択する必要があります。また、「URLへ移動(リダイレクト)」を選択した場合は、ページのURLをインサートします。
次のステップに進む前に、進行状況を失わないように「保存」をクリックします。
これで、WordPressサイトに新しいフォームを表示する準備ができました。
ステップ 6: WordPress にフォームを埋め込む
新規フォームをWordPressサイトに表示するには、WPFormsフォームビルダー内の’埋め込み’ウィザードを使用します。
これにより、「ページに埋め込む」ポップアップ・ウィンドウが表示されます。既存のページを選択」または「新規ページを作成」のいずれかを選択します。
この例では、「既存のページを選択」してみましょう。
次のステップは、新規フォームを表示したいページを選択することです。
ドロップダウンをクリックして、既存のウェブページを選択するだけです。そうしたら、’Let’s Go!’をクリックしてください。
その後、WPFormsの説明とともにWordPressのブロックエディターにリダイレクトされます。
Done’ボタンをクリックすると非表示になります。
ここから’+’ボタンをクリックしてWPFormsブロックを追加する必要があります。
検索バーに「WPForms」と入力してください。すると、検索結果にWPFormsブロックが表示されるはずです。クリックして追加します。
WPFormsブロックを追加すると、ページにドロップダウンメニューが表示されます。
ドロップダウンをクリックして、リストからフォームを選択するだけです。先ほど作ったフォームなので、’お問い合わせフォーム’を選んでみましょう。
ステップ 7: フォームを公開する
この最終段階では、公開する前にフォームをプレビューして、すべてが完璧に見えることを確認しましょう。WordPressのブロックエディターで、表示“新しいタブでプレビュー をクリックします。
必要であれば、フォームがタブレットやモバイル端末でどのように見えるかをプレビューすることもできます。表示 ” タブレットまたはモバイル ” 新しいタブでプレビュー をクリックするだけです。
最後に、これ以上の調整が必要なければ「更新」を押す。
おめでとうございます!WordPress サイトにドロップダウンフィールド付きのお問い合わせフォームが追加されました。
デモサイトではこんな感じでした:
このガイドで、ドロップダウンフィールドを使った WordPress フォームの作成方法をご理解いただけたと思います。次に、お問い合わせフォームを使ってメールリストを増やす方法や、フォームのパフォーマンスを最適化するためにGoogle アナリティクスでフォームトラッキングを設定する方法をご紹介します。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!