ドロップダウンフィールドを使用してWordPressフォームを作成する方法（簡単な方法）

訪問者がお問い合わせフォームの入力を開始し、途中で突然放棄してしまう。これはウェブサイトオーナーにとって最もフラストレーションのたまる経験の一つです。特に、そのリードがビジネスを変える可能性を秘めていることを知っている場合はなおさらです。

長いフォームはユーザーを威圧し、訪問者がフォームを完了せずに離脱する原因となります。

WordPressサイトの所有者がフォームを最適化するのを長年支援してきた結果、ドロップダウンフィールドを使用するとフォームの完了率が向上することがわかりました。

さらに、これらのシンプルな要素は貴重な画面スペースを節約するだけでなく、ユーザーが必要な情報を正確に提供するように導きます。

このチュートリアルでは、訪問者が実際に完了したいと思うような、ドロップダウンフィールドを備えた WordPress フォームを作成する最も簡単な方法をご紹介します。

ドロップダウンフィールドとは何ですか？なぜ使用するのですか？

ドロップダウンフィールドを使用すると、ユーザーはさまざまなバリエーションのセットリストから1つのオプションを選択できます。ユーザーはフィールドをクリックするだけで、すべてのドロップダウンの選択肢を確認できます。

ウェブサイトの所有者は、ドロップダウンフィールドを使用して、お問い合わせフォーム、イベント登録フォーム、メールニュースレターサインアップ、または商品注文フォームなどのウェブフォームを作成できます。

ドロップダウンフィールドは、フォームの効果を高めることができます。いくつかの利点を以下に示します。

• 💡 一貫性。選択肢のセットリストは、収集されたデータを一貫させ、無効な入力の発生を防ぎます。これにより、データ分析の精度が向上します。
• 🎢 動的フィールド。ドロップダウンフィールドを使用すると、条件付きロジックの設定が容易になります。オプションのセットリストにより、不要な手間をかけずにユーザーの選択に基づいて追加フィールドを表示できます。
• ✂️ フォームの長さの短縮。複数のオプションをコンパクトなドロップダウンメニューにまとめることで、フォームが見た目に威圧感を与えにくくなります。これにより、ユーザーエクスペリエンスが向上する可能性があります。

それでは、WordPressでドロップダウンフィールドを持つフォームを作成する方法を見ていきましょう。このチュートリアルで説明する手順の概要を以下に示します。

さあ、始めましょう！

ステップ1：WPFormsプラグインのインストール

WPFormsは、WordPress向けの最高のコンタクトフォームプラグインです。AIツールと2,000以上のテンプレートを備えており、数回クリックするだけでフォームを作成できます。

WPBeginnerでは、お問い合わせフォーム、年次ユーザーアンケート、移行リクエストの作成にWPFormsを使用しており、これ以上の満足はありません！

すべての機能については、WPFormsの完全レビューをご覧ください。

それでは、WPFormsプラグインをインストールして有効化しましょう。

WordPressダッシュボードからプラグイン » プラグインを追加に移動できます。

次の画面で、検索バーを使用してWPFormsプラグインを検索できます。

見つかったら、「プラグインをインストール」をクリックし、次に「有効化」をクリックします。

詳細な手順については、WordPressプラグインのインストール方法に関するガイドをお読みください。

ステップ2：WPFormsを使用して新しいフォームを作成する

有効化すると、WordPress管理画面に次のようなWPFormsメニューが表示されます。

これで、WPFormsビルダーインターフェイスにアクセスし、ドロップダウンフィールドを持つフォームを作成できるようになります。

新しいフォームの作成を開始するには、WPForms » 新規追加 に移動します。

これで、WPFormsフォームビルダー内に「セットアップ」パネルが表示されます。

このパネルで、最初に行う必要があるのは、フォームに名前を付けることです。

たとえば、「名前を付けてフォームを作成」フィールドに「シンプルなコンタクトフォーム」または単に「コンタクトフォーム」と入力できます。

それが完了したら、WordPressフォームをどのように構築するかを選択する時間です。

WPForms を使用すると、ゼロから作成したり、既製のテンプレートを選択したり、AI パワードのフォームビルダーを使用したりできます。

AIフォームビルダーを使用したい場合は、簡単なプロンプトを入力するだけです。AIが数秒でフォームを生成します。

ただし、このガイドでは「シンプルな連絡フォーム」を使用します。

フォームテンプレートを使用するには、使用したいテンプレートにカーソルを合わせて「テンプレートを使用」をクリックするだけです。

ステップバイステップの手順については、WordPressでコンタクトフォームを作成する方法に関する詳細ガイドをご覧ください。

ステップ3：フォームにドロップダウンフィールドを追加する

セットアッププロセスが完了すると、フォームビルダーにリダイレクトされます。そこでは、左側にフィールドのリスト、右側にライブプレビューが表示されます。

ここでは、お問い合わせフォームにドロップダウンフィールドを追加したいと思います。

「ドロップダウン」をドラッグして、フォームの右側にドロップします（プロのヒント：選択肢が2〜3個しかない場合は、ユーザーエクスペリエンスを向上させるためにラジオボタンの使用を検討してください）。

パネルの右側には、お問い合わせフォームのドロップダウンフィールドが表示されます。フィールドにカーソルを合わせると、以下の設定にアクセスできます。

パネルの右側には、コンタクトフォームにドロップダウンフィールドが表示されます。フィールドをクリックすると、その設定にアクセスできます。また、フィールドにカーソルを合わせると、次のようなオプションが表示されます。

• コピーボタン
• 削除ボタン
• 「クリックして編集」の指示
• 「ドラッグして並べ替え」の指示

画面上ではこのようになります。

ドラッグ＆ドロップ機能を使用して、ドロップダウンフィールドを「コメントまたはメッセージ」の上に移動しましょう。

「コメントまたはメッセージ」の段落フィールドを送信ボタンの直前に配置することで、フォーム完了プロセスにより良い流れを提供します。また、ドロップダウンフィールドがより目立つようになり、ユーザーが見落とすことがなくなります。

ステップ4：オプションと条件付きロジックを使用したドロップダウンの設定

このステップでは、ドロップダウンフィールドのラベル、オプション、説明を設定します。オプションのリストはフォームの種類に合わせてください。今回はお問い合わせフォームを作成するので、ニュースレター購読オプションを提供しましょう。

プレビューパネルのドロップダウンフィールドをクリックするだけです。これにより、左側の「フィールドオプション」タブが自動的に開きます。

「一般」タブで、必要な詳細を入力してください。

• ラベル。 ドロップダウンの場合、ラベルは通常「ニュースレターを購読しますか？」のような質問です。ユーザーがデフォルトの選択肢を誤って送信するのではなく、回答を選択するように、「オプションを選択」のようなプレースホルダーテキストを追加することも推奨します。
• 選択肢。「はい、お願いします。」と「いいえ、結構です。」を追加しましょう。
• 説明。このフィールドには「いつでも登録解除できます。」を残すことができます。
• 必須。このオプションをオンにすると、訪問者はこのフィールドを完了する必要があります。

次に、条件付きロジックを設定しましょう。

条件付きロジックを使用すると、ユーザーの以前の回答に基づいてフィールドを表示または非表示にできます。これにより、関連性のあるフィールドのみが表示されるため、フォームを短く整頓できます。

条件付きロジックの設定により、フォームの入力が容易になります。以前の選択に基づいて関連するオプションのみを表示することで、フォームは不要な選択肢でユーザーを圧倒しません。

この例では、ユーザーが「はい、お願いします」オプションを選択した場合に追加フィールドを表示します。購読者には、プロモーションメールをどのくらいの頻度で受け取りたいかを選択できるようにします。

条件付きロジックを機能させるには、まずユーザーの選択に基づいて表示または非表示になるフィールドが必要です。「フィールドの追加」タブに戻り、「ドロップダウン」またはその他のフィールドタイプをクリックします。次に、新しいフィールドの詳細を完了します。

例を挙げます。

新しいフィールドの準備ができたので、それをクリックして「スマートロジック」タブに移動します。

ここから、「条件付きロジックを有効にする」オプションを切り替えることで、条件付きロジックをアクティブにできます。

有効化したら、新しいフィールドの条件付きロジックを設定できます。

まず、「表示」または「非表示」を選択して新しいフィールドを選択します。次に、既存のフィールドとユーザー入力を選択します。

参考までに、私たちの設定は次のとおりです。「ニュースレターを購読しますか？」が「はい、お願いします」の場合、このフィールドを「表示」します。

ステップ 5: フォームの通知と確認をパーソナライズする

新しいフォームをパーソナライズする時間です。

新しいユーザーがフォームを送信するたびにメール通知を設定することから始めることができます。設定 » 通知に移動し、「通知を有効にする」オプションを切り替えます。

次に、トグル下のフォームのデフォルト通知の詳細を確認します。

「デフォルト通知」フィールドの一部のエントリには、「スマートタグ」が含まれています。これは、WordPressの設定またはフォームフィールド自体から情報を自動的に取得します。ただし、ニーズに合わせて設定を調整することもできます。

たとえば、「送信先メールアドレス」フィールドには {admin_email} の「スマートタグ」があります。デフォルトでは、これはWordPressサイトの管理者のメールアドレスになります。したがって、フォーム送信の通知はすべて管理者のメールの受信トレイに送信されます。

メールマーケティングスペシャリストなど、他の受信者を追加できます。各メールは必ずカンマで区切ってください。

フォームメールを複数の人や部署に送信する方法を学びたい場合は、複数の受信者を持つ連絡フォームの作成方法に関するガイドをお読みください。

次に、「メール件名」のデフォルトのコピーは「新規エントリー：フォーム名」です。ただし、識別しやすい限り、件名は自由に（お好みに合わせて）変更できます。

フォームを送信したユーザーは、メールで通知を受け取るはずです。「送信者名」フィールドにより、ユーザーは誰が通知メールを送信しているかを知ることができます。

次のフィールドは「送信元メールアドレス」で、このフィールドの「スマートタグ」は {admin_email} です。

このデフォルト設定では、ユーザーはサイトの管理者メールから通知メールを受け取ります。

ここに警告メッセージが表示される場合は、「送信元メールアドレス」がウェブサイトのドメインと一致していないことを意味します（例：@yourwebsite.comの代わりに@gmail.comアドレスを使用している）。

通知メールが「スパム」フォルダに届かないようにするには、「送信元メールアドレス」がウェブサイトのドメインと一致していることを確認する必要があります。

メールが読者の受信トレイに届くようにするには、WP Mail SMTPの設定に関するガイドをお読みください。

送信される各通知メールに対して、受信者は返信することもできます。

「返信先」フィールドでは、通知メールに返信する際に返信がどこへ行くかを設定できます。通常は訪問者のメールアドレスに設定する必要があります。

「スマートタグを表示」をクリックし、フォームから「メール」フィールドを選択するだけです。

これで、送信を受け取り、メール受信トレイで「返信」をクリックすると、メッセージはフォームに入力した訪問者に直接送信されます。

最後に、「メールメッセージ」フィールドには {all_fields} スマートタグがあります。したがって、メールメッセージには、ユーザーの回答とともにフォームフィールドが含まれます。

通知のカスタマイズが完了したら、「確認」に移動します。通知はフォーム送信後に送信されるメールアラートですが、確認はユーザーがすぐに目にする画面上のメッセージです。

まず、確認タイプとして「メッセージ」、「ページを表示」、「URLに移動（リダイレクト）」を選択できます。

確認タイプとして「メッセージ」を選択した場合、ユーザーにフォームの送信を受け付けたことを知らせる確認メッセージが表示されます。

この確認タイプでは、ブランドに合わせてデフォルトメッセージを編集できます。「確認メッセージ」フィールドに移動し、テキストボックスにカスタムメッセージを入力してください。

「ページを表示」を選択した場合、WordPressウェブサイト上の既存のページを選択する必要があります。「URLに移動（リダイレクト）」を選択した場合は、ページのURLを挿入します。

次のステップに進む前に、「保存」をクリックして進捗を失わないようにしてください。

これで、新しいフォームをWordPressサイトに表示する準備が整いました。

ステップ6：お問い合わせフォームをページに埋め込む

新しいフォームをWordPressサイトに表示するには、WPFormsフォームビルダー内の「埋め込み」ウィザードを使用できます。

これにより、「ページに埋め込む」ポップアップウィンドウが表示されます。ここでは、「既存のページを選択」または「新規ページを作成」のいずれか、関連性の高い方を選択できます。

この例では、「既存のページを選択」を使用します。

次のステップは、新しいフォームを表示したいページを選択することです。

ドロップダウンをクリックして、既存のウェブページを選択するだけです。それが完了したら、「Let’s Go!」をクリックしてください。

これにより、WordPressブロックエディターにリダイレクトされます。

ここから、「+」ボタンをクリックして WPForms ブロックを追加します。

検索バーに「WPForms」と入力すると、検索結果にWPFormsブロックが表示されるはずです。クリックして追加してください。

WPFormsブロックを追加すると、ページにドロップダウンメニューが表示されます。

ドロップダウンをクリックして、リストからフォームを選択するだけです。先ほど作成した「お問い合わせフォーム」を選択しましょう。

ステップ 7: WordPress サイトに新しいフォームを公開する

この最終段階では、公開する前にフォームをプレビューして、すべてが完璧に見えることを確認しましょう。WordPressコンテンツエディターで、表示 » 新規タブでプレビューをクリックします。

必要であれば、フォームがタブレットやモバイルデバイスでどのように表示されるかをプレビューすることもできます。表示 » タブレットまたはモバイル » 新しいタブでプレビュー をクリックするだけです。

最後に、さらに調整が必要ない場合は、「更新」をクリックしてください。

おめでとうございます！ドロップダウンフィールド付きの新しい連絡フォームをWordPressウェブサイトに追加しました。

デモウェブサイトでの表示は以下の通りです：

ボーナスヒント：ドロップダウンフィールドのクリエイティブな使い方

ドロップダウンフィールドは非常に汎用性が高く、単なるお問い合わせフォーム以上の用途に使用できます。

長年のウェブサイト構築を経て、通常の連絡フォームを超えた、ドロップダウンの非常に巧妙な使い方を発見しました。インスピレーションを得るための、私たちのお気に入りのクリエイティブなユースケースをいくつかご紹介します。

• 🛍️ 製品コンフィギュレーター – ユーザーが「色を選択」、「サイズを選択」、「仕上げを選択」のように製品をカスタマイズできます。これはWooCommerceの製品ページやカスタム注文フォームに最適です。
• 📅 予約スケジュール – 中小企業やサービスサイトは、日付と時間のスロットにカスケードドロップダウンを活用できます。これは特に予約システムやコンサルティングリクエストに最適です。
• 🗺️ 地域ベースのサービス – フォームに地図を埋め込む際に、国、都道府県、市区町村を選択するためのドロップダウンを追加できます。これは配送サービスや地域ビジネスディレクトリに非常に役立ちます。
• ✏️ クイズフォーム – ドロップダウンは多肢選択式の質問にも最適です。オンラインコースを運営している場合、これらのフィールドを使用してすべてを整然と整理できます！

何よりも、WordPressフォームをカスタマイズしてスタイル設定することで、ウェブサイトのデザインに溶け込ませることができます。

よくある質問：WordPressフォームでのドロップダウンフィールドの使用方法

WordPress のドロップダウンフィールドの使用に関する最も一般的な質問への回答を以下に示します。

ドロップダウンフィールドを持つフォームを作成するのに最適なプラグインは何ですか？

私たちはWPFormsを最良の選択肢として推奨します。そのAIツールはプロセスをスピードアップし、ドラッグアンドドロップビルダーは非常に使いやすく、ドロップダウンフィールドは無料のWPForms Liteバージョンにも含まれています。

条件付きロジックのような高度な機能については、WPForms Proバージョンへのアップグレードがおすすめです。

フォームにドロップダウンフィールドを無料で追加できますか？

はい！無料のWPForms Liteプラグインには標準のドロップダウンフィールドが含まれており、費用をかけずに整理されたユーザーフレンドリーなフォームを作成できます。

ドロップダウンフィールドはモバイルフレンドリーですか？

もちろんです。WPForms のような質の高いプラグインを使用すると、すべてのフォームフィールドは完全にレスポンシブになります。つまり、ドロップダウンメニューは自動的に調整され、デスクトップ、タブレット、スマートフォンで見た目も機能もスムーズになります。

追加リソース：WordPressフォームをマスターする

このガイドが、WordPress フォームにドロップダウンフィールドを作成する方法を学ぶのに役立ったことを願っています。お役に立てた場合は、さらに活用するための厳選されたガイドをいくつかご紹介します。

• WordPressフォームのカスタマイズとスタイリング方法
• お問い合わせフォームを使用してメールリストを増やす方法
• WordPressでスパムお問い合わせフォームをブロックする方法 
• WordPressでフォームの放棄を追跡および削減する方法
• WordPress フォーム使用の究極ガイド

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。