WordPressで数値範囲スライダー付きフォームを作成する方法

フォーム内の数値範囲スライダーは非常にクールに見えます。それ自体が重要なメリットです。視覚的に印象的でプロフェッショナリズムを反映したフォームを使用すると、訪問者はあなたをより信頼する可能性が高くなります。

さらに、数値範囲スライダーはフォームに高いレベルのインタラクティビティを追加します。インタラクティビティはエンゲージメントを生み出し、最終的にコンバージョンするのはエンゲージされた訪問者です。

では、WordPressフォームに数値範囲スライダーを追加するにはどうすればよいでしょうか？

ここで、それを達成するための最も簡単な方法を説明します。

数値範囲スライダーフォームを今すぐ作成

数値範囲スライダー付きフォームを作成する方法

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

フォームに数値範囲スライダーを挿入する最も簡単な方法は、WPFormsプラグインを使用することです。WPForms Lite（無料版）を使用して数値範囲スライダー付きフォームを作成することもできますが、このチュートリアルではWPForms Proを使用します。これにより、スライダーフィールドをエキサイティングな方法で使用するための多くの追加の可能性が開かれます。

プラグインのインストール方法がわからない場合は、WPFormsのインストール手順のガイドをクリックしてください。

これには数分しかかかりません。サイトでWPFormsの準備ができたら、数値スライダー付きフォームの作成を開始できます。

ステップ2：簡単なフォームを作成する

WordPressダッシュボードから、**WPForms »新規追加**に移動して新しいフォームを作成します。

すぐに、フォーム設定画面がウィンドウに表示されます。ここで、フォームの名前を入力し、テンプレートを選択できます。

完全にゼロから（空白のテンプレートから始めて）フォームを作成することも、既製のテンプレートを使用してさらに迅速に進めることもできます。

この記事では、**シンプルな連絡先フォームテンプレート**を使用して、数値スライダーのような追加フィールドを挿入する方法を説明します。

テンプレートを選択すると、フォームビルダーインターフェイスに移動します。ここで、フォームをサイトに直接埋め込むか、さらにカスタマイズするかを選択できます。

次のステップでは、数値範囲スライダーフィールドとその関連設定について説明します。

ステップ3：数値範囲スライダーを追加する

それでは、フォームに数値範囲スライダーを追加しましょう。

左側の標準フィールドメニューから**数値スライダー**フィールドを右側のフォームにドラッグするだけです。

このフィールドの設定と動作を変更するには、追加した**数値スライダー**をクリックします。フィールドオプションが左側のペインに表示されます。

これらのオプションを使用すると、次の設定を変更できます。

• **ラベル** – スライダーによって制御される数量を表す名前を追加するために使用します
• **説明** – 必要に応じて追加のコンテキストを提供します
• **値** – スライダーの最小値と最大値を設定します
• **デフォルト値** – フォームが最初に読み込まれたときにフィールドが想定する値です
• インクリメント – 各選択可能な値の間のインクリメント量を選択できます。

最後に、左側から右側にドラッグして、数値範囲スライダーフォームに追加のフィールドをドラッグして追加できます。

範囲スライダーフォームのカスタマイズが完了したら、右上隅にある保存をクリックします。

🧮 数値スライダーを使用してWordPressフォームを作成する

ステップ4：フォームの通知と確認を設定する

WPFormsは、フォームが送信されるたびに自動的に通知を送信します。

設定 » 通知に移動して、フォームの通知をカスタマイズできます。

ここでは、通知の受信者（管理者メール、フォーム送信者、または入力したいその他のハードコードされたメール）を選択できます。WPForms Basic以上のユーザーは、複数のフォーム通知を作成することもできます。

ついでに、フォームの確認も確認することをお勧めします。確認は、フォームが送信された直後に表示されます。これは、メッセージのように単純なものにすることも、戦略に応じて別のページにリダイレクトすることもできます。

設定 » 確認に移動して、確認をカスタマイズできます。

次に、必要な確認の種類（メッセージ、ページを表示、URLにリダイレクト）を選択し、メッセージやその他の詳細を入力します。

完了したら、フォームビルダーの上部にある保存を再度押します。フォームを埋め込む時間です！

ステップ5：数値範囲スライダーフォームをサイトに追加する

フォームを作成したら、WordPressウェブサイトに追加する必要があります。WPFormsを使用すると、ブログの投稿、ページ、さらにはサイドバーウィジェットなど、ウェブサイトの多くの場所にフォームを追加できます。

最も一般的な配置オプションであるページ/投稿の埋め込みを見てみましょう。

まず、フォームビルダーの上部にある埋め込みボタンをクリックします。

次に、このフォームを新しいページに埋め込むか、既存のページに埋め込むかを尋ねるモーダルが表示されます。後者のオプションを選択し、新しいページを作成をクリックします。

ページに名前を付けて、開始ボタンを押します。

これでWordPressブロックエディターに入り、フォームが埋め込まれています。必要に応じて、コードなしでブロックエディターを使用してフォームをスタイル設定することができます。

準備ができたら、公開ボタンを押して、フォームが埋め込まれたページを公開します。

これで、Webサイトに数値範囲スライダーフォームが表示され、訪問者はすぐに使用を開始できます。

送信されたフォームエントリを表示するには、このフォームエントリの完全ガイドを確認してください。たとえば、フォームエントリを表示、検索、フィルタリング、印刷、削除できます。

これで完了です！WPFormsプラグインを使用してWordPressで数値範囲スライダーフォームを作成する方法がわかりました。これにより、Webサイト訪問者から詳細なフォーム送信を簡単に取得できます！

数値範囲スライダーフォームを今すぐ作成

数値スライダー付きフォームに関するFAQ

フォームに数値スライダーを使用することに関心のあるユーザーからよく受ける質問をいくつか紹介します。

数値範囲スライダーを使用する理由

WordPressフォームで数値範囲スライダーを使用すると、次のような多くの利点があります。

• 追加情報 — フォームに入力する人々から追加情報を簡単に取得できます。インタラクティブな感覚が強いため、訪問者は詳細を尋ねる数値範囲スライダーフィールドを完了する可能性がはるかに高くなります。
• 質の高いリード＆nbsp;— 最初からリードに関する追加情報があれば、リードはさらに良くなります。これにより、スライダーフォームは優れたリードジェネレーションツールになります。
• レスポンシブ＆nbsp;— 数値範囲スライダーフィールドは、すべてのデバイスでうまく表示されます。このフィールドを追加することで、サイトとレスポンシブWordPressテーマをきれいに保つことができます。
• 使いやすい — 数値スライダーがフォームに追加されると、リードや顧客は簡単に使用できます。金額を調整するために、前後にドラッグするだけです。

スライダーのデフォルトの開始値を設定できますか？

はい、スライダーフォームのデフォルトの開始値を簡単に設定できます。WPFormsでは、この設定は数値スライダーフィールドのフィールドオプションからアクセスでき、「デフォルト値」というラベルが付いています。ここに任意の数値を入力してデフォルトを設定できます。

別のフォームビルダーを使用している場合、この設定は異なる場合があります。

スライダーを特定の増分にスナップさせることができますか？

もちろんです！WPFormsの数値スライダーでは、増分値を設定できます。これは、次の値との間の増分「ステップ」を決定します。

現在選択されている値をスライダーの横に表示するにはどうすればよいですか？

WPFormsの数値フィールドは、現在選択されている値を表示するように自動的に構成されています。訪問者がスライダーを調整すると動的に更新され、理想的なユーザーエクスペリエンスのために即座に視覚的なフィードバックを提供します。

スライダーの外観をカスタマイズするにはどうすればよいですか？

WPFormsのスライダーの色、プログレスバー、ラジオフィールドの箇条書き、およびその他のさまざまな要素の色は、送信ボタンの色に接続されています。これは、送信ボタンとフォームの他のインタラクティブ要素との間のテーマの一貫性を確保するためです。

したがって、WordPressブロックエディターで利用可能なWPFormsの簡単なスタイリングオプションから送信ボタンの色を変更することで、数値スライダーの色を変更できます。

フォームビルダーを使用してフォームを編集する際に、スライダーのラベルとフィールドの幅を編集することもできます。

Webフォームで数値範囲スライダーの最適な用途は何ですか？

数値範囲スライダーは、訪問者が定義済みの範囲から数量を選択できるようにしたい場合に最適です。

お客様が数値範囲スライダーを採用した実用的な例をいくつかご紹介します。

• 見積もり/概算：数値範囲スライダーは、計算機能を使用してリアルタイムで見積もりを提供する場合にうまく機能します。調整可能であるため、訪問者はスライダーで要件を選択すると見積もりがどのように変化するかを比較的簡単に確認できます。
• 予算選択：請負業者は、慎重に選択された最小値と最大値の範囲からクライアントが予算を示すことができるように、スライダーを頻繁に使用します。
• サービス期間：可変長の予約を受け付けるサービスプロバイダーの場合、数値スライダーを使用すると、顧客は事前に定義されたオプションの範囲から必要なサービス期間を選択できます。
• アンケートの質問：特定のアンケートの質問は、数値スライダーで簡単に回答できます。たとえば、世帯収入や回答者の年齢に関する質問は、スライダー形式にすることができます。
• ウェルネス評価：ヘルスケアの現場では、スライダーフォームは、痛みのレベル、精神的ストレス、睡眠の質などの同様の質問を評価するためによく使用されます。

これらはほんの一例です。数値スライダーは、さまざまな設定で使用できます。

次に、NPSアンケートの例を見る

ウェブサイトの訪問者が何を考えているか知りたいですか？NPSアンケートの例が掲載されているこの記事にアクセスして、サイトにアンケートを簡単に設置し、貴重なフィードバックを収集する方法をご覧ください。

さあ、何をためらっていますか？今日から最も強力なWordPressフォームプラグインを使い始めましょう。WPForms Proには無料の数値範囲スライダーフォームが付属しており、14日間の返金保証が付いています。

そして忘れないでください、この記事が気に入ったら、FacebookとTwitterでフォローしてください。