ドロップダウンフィールドを備えたWordPressフォームを作成する方法（簡単な方法）

多くの Web サイト所有者は、長いフォームでユーザーを圧倒することなくユーザー入力を収集するのに苦労しています。

ドロップダウン フィールドでは、オプションの簡潔なリストが表示されるため、フォームが簡素化されます。これは、フォームの完了率を高め、ユーザー エクスペリエンスを向上させることができることを意味します。

この記事では、ドロップダウンフィールドを備えたWordPressフォームを作成する方法を説明します。

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

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

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

ドロップダウン フィールドを使用すると、フォームの効率を向上させることができます。以下にいくつかの利点があります。

  • 一貫性。 オプションのセット リストにより、収集されたデータの一貫性が維持され、無効なエントリが防止されます。これにより、データ分析がより正確になります。

  • それはダイナミックフィールド。 ドロップダウン フィールドを使用すると、条件付きロジックを簡単に設定できます。オプションのセット リストを使用すると、不必要なハードルを課すことなく、ユーザーの選択に基づいて追加のフィールドを表示できます。

  • フォームの長さの短縮。 複数のオプションをコンパクトなドロップダウン メニューに組み合わせることで、フォームの見た目がそれほど威圧的ではなくなります。これにより、ユーザー エクスペリエンスが向上します。

そうは言っても、WordPress でドロップダウンフィールドを含むフォームを作成する方法を見てみましょう。このチュートリアルで説明する手順の概要を次に示します。

始めましょう!

ステップ 1: WPForms のインストール

WPForms は、初心者に優しい、ドラッグ アンド ドロップでフォームを作成できる最高の WordPress プラグインです。このフォーム ビルダーには 1,800 以上のテンプレートがあり、数回クリックするだけで使いやすいフォームを作成できます。

また、Constant Contact や Stripe などのサードパーティのマーケティングおよび支払いプラットフォームを統合することもできます。

注: WPForms Lite にはドロップダウン フィールド機能が付属しています。ただし、条件付きロジックを設定してフォームのユーザー エクスペリエンスを向上できるように、プラグインのプレミアム バージョンを入手することをお勧めします。

良いニュースとして、WPBeginner 読者は、WPForms クーポン SAVE50 を使用すると特別 50% オフが得られます。

WPForms をインストールしてアクティブ化するには、WordPress プラグインのインストール方法に関するガイドをお読みください。

ステップ 2: 新しいフォームの作成

アクティブ化すると、WordPress 管理エリアに次のような WPForms メニューが表示されます。

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

新しいフォームの作成を開始するには、WPForms の上にカーソルを置き、[新規追加] をクリックします。

または、[WPForms] をクリックすることもできます。これにより、ビルダーの「フォームの概要」セクションにリダイレクトされます。

まず、「+ 新規追加」ボタンをクリックしてください。

これで、WPForms フォームビルダー内に「セットアップ」パネルが表示されます。このパネルでは、最初にフォームに名前を付ける必要があります。

たとえば、「フォームの名前」フィールドに「Simple Contact Form」または単に「Contact Form」と入力できます。

それが完了したら、テンプレートを選択します。

フォーム テンプレートを使用するには、目的のテンプレートの上にマウスを移動し、[テンプレートを使用] をクリックするだけです。この例では「簡易お問い合わせフォーム」を使用します。

お問い合わせフォームの作成について詳しくは、WordPress でのお問い合わせフォームの作成方法に関する詳細ガイドをご覧ください。

ステップ 3: ドロップダウンフィールドの追加

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

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

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

注: 「標準フィールド」カテゴリのフィールドはすべて WPForms Lite で利用できます。そのため、複数選択フィールドを含むフォームを作成したり、ログインおよび登録フォームに 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 Web サイト上の既存のページを選択する必要があります。 「URL に移動 (リダイレクト)」を選択した場合は、ページ URL を挿入します。

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

それが完了すると、WordPress サイトに新しいフォームを表示する準備が整います。

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

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

これにより、「ページに埋め込む」ポップアップウィンドウがトリガーされます。その上で、「既存のページを選択」または「新しいページを作成」のいずれか適切なものを選択できます。

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

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

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

その後、WPForms の手順が記載された WordPress ブロック エディターにリダイレクトされます。

「完了」ボタンをクリックすると、これらの指示を非表示にすることができます。

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

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

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

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

ステップ 7: フォームを公開する

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

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

最後に、これ以上調整する必要がない場合は、「更新」をクリックします。

おめでとう！ WordPress ウェブサイトにドロップダウンフィールドを備えた新しいお問い合わせフォームが正常に追加されました。

デモ Web サイトでは次のように表示されます。

このガイドが、ドロップダウン フィールドを備えた WordPress フォームの作成方法を学ぶのに役立つことを願っています。次に、お問い合わせフォームを使用してメール リストを増やす方法と、Google アナリティクスでフォーム追跡を設定してフォームのパフォーマンスを最適化する方法を学びたい場合があります。

この記事が気に入っていただけましたら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。