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

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

長いフォームはユーザーを威圧し、コンバージョンプロセスに不必要な摩擦を生むというのが真実です。

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

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

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

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

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

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

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

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

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

• ステップ 1: 最良の連絡フォームプラグインをインストールする
• ステップ2：WPFormsを使用して新しいフォームを作成する
• ステップ3：フォームにドロップダウンフィールドを追加する
• ステップ4：オプションと条件付きロジックを使用したドロップダウンの設定
• ステップ 5: フォームの通知と確認をパーソナライズする
• ステップ6：WordPressにフォームを埋め込む
• ステップ 7: WordPress サイトに新しいフォームを公開する
• ボーナスのヒント: ドロップダウンフィールドのクリエイティブな使い方
• よくある質問：WordPressフォームでのドロップダウンフィールドの使用方法
• 追加リソース：WordPressフォームをマスターする

さあ、始めましょう！

ステップ1：最高のコンタクトフォームプラグインのインストール

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：フォームにドロップダウンフィールドを追加する

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

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

「ドロップダウン」をドラッグして、フォームの右側にドロップするだけです。

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

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

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

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

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

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

ドロップダウンフィールドをクリックし、「フィールドオプション」に移動します。

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

• ラベル。 ドロップダウンフィールドでは、ラベルは通常質問です。「ニュースレターを購読しますか？」を例として使用します。
• 選択肢。「はい、お願いします。」と「いいえ、結構です。」を追加しましょう。
• 説明。このフィールドには「いつでも登録解除できます。」を残すことができます。
• 必須。このオプションをオンにすると、訪問者はこのフィールドを完了する必要があります。

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

条件付きロジックとは、「もし〜ならば」「〜する」というステートメントで意思決定を行うことです。フォームで使用される場合、ユーザーが与えた回答に基づいて次に何が起こるかを決定します。

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

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

その前に、新しいフィールドを準備する必要があります。「フィールドの追加」タブに戻り、「ドロップダウン」またはその他のフィールドタイプをクリックします。次に、新しいフィールドの詳細を完成させます。

例を挙げます。

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

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

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

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

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

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

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

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

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

「デフォルト通知」フィールドの一部のエントリには「スマートタグ」があります。このタグは、フォーム送信通知をどこに送信するかなどを想定しています。ただし、ニーズに合わせて設定を調整できます。

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

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

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

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

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

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

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

ハイライトされた部分は、サイトの管理者メールアドレスが別のドメイン（例：@gmail.com）にあることを示しています。これは、メールが「迷惑メール」フォルダに届くなど、配信の問題につながる可能性があります。

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

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

「返信先」フィールドでは、ユーザーの返信を受け取るメールアドレスを設定できます。このフィールドの「スマートタグ」は {field_id= "1”} です。これは、ユーザーの返信が「差出人メール」フィールドと同じメールアドレスに送信されることを意味します。

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

通知のカスタマイズが完了したら、「確認」に移動します。このセクションでは、フォーム送信後の確認表示方法を設定します。

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

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

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

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

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

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

ステップ6：WordPressにフォームを埋め込む

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

フォームフィールドの選択肢として画像を使用できますか？

WPForms Proには、ラジオボタンとチェックボックス用の「画像選択」機能が含まれています。これはドロップダウンでは利用できませんが、ユーザーは視覚的なオプションから選択でき、製品選択や同様のフォームに最適です。

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

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。