多くのサイトオーナーは、長いフォームでユーザーを圧倒することなく、ユーザーの入力を集めることに苦労している。
ドロップダウンフィールドは、簡潔なオプションのリストを表示することでフォームをシンプルにします。つまり、フォームの入力率を高め、ユーザーエクスペリエンスを向上させることができるのです。
この投稿では、ドロップダウンフィールドを持つ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 フォームの作成方法をご理解いただけたと思います。次は、お問い合わせフォームを使ってメールリストを増やす方法とWordPress フォームの究極の使い方について説明します。
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.
ご質問やご提案がおありですか？ディスカッションを始めるためにコメントを残してください。