AI要約
WordPressフォームにNumber Sliderを追加しますか？ Number Sliderフィールドを使用すると、ユーザーはセレクターをクリックしてドラッグするだけで、数値線上の値を選択できます。
このチュートリアルでは、WPFormsでNumber Sliderフィールドを使用する方法を説明します。
始める前に、まずWPFormsがWordPressサイトにインストールされ、有効化されていること、そしてライセンスが検証されていることを確認する必要があります。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスできます。
フォームにNumber Sliderフィールドを追加する
フォームビルダーを開いたら、標準フィールドの下にあるNumber Sliderオプションを探します。それをクリックするか、プレビューエリアにドラッグアンドドロップしてフォームに追加します。
Number Sliderフィールドオプションの設定
フィールドをフォームに追加したら、プレビューエリアでクリックしてフィールドオプションパネルを開きます。以下では、レストラン予約フォームを例に使用して、ここで利用可能な各設定について説明します。
ラベルと説明
Number Sliderフィールドオプションでは、ラベルと説明をカスタマイズできます。ラベルはデフォルトで「Number Slider」と表示されますが、必要に応じて変更できます。
レストラン予約の例では、ラベルを「何名様でご利用ですか？」に変更します。
フィールドの説明は、フォームに追加のテキストを追加する機会を提供します。たとえば、ナンバー スライダーの使用方法に関する指示などです。提供されたフィールドに好きなテキストを入力できます。
最小値と最大値
また、値の設定で、ユーザーが選択できる最小値と最大値をカスタマイズすることもできます。デフォルト値は0から10ですが、必要に応じて任意の整数に置き換えることができます。
この例では、最小値を1名、最大値を20名に設定します。
Number Sliderの詳細オプションの設定
フィールドオプションパネルの詳細タブで、フィールドサイズ、デフォルト値、および増分値をカスタマイズできます。フォームビルダーでクリックして、これらの追加設定にアクセスします。
フィールドサイズ
デフォルトでは、フィールドサイズは中に設定されています。ただし、スライダーの長さを小、中、または大に変更するオプションがあります。
以下は、各フィールドサイズがサイトのフロントエンドでどのように表示されるかの例です。
デフォルト値
デフォルト値は、ユーザーがフォームを開いたときにスライダーが設定される位置を決定します。これは、フィールドオプションで選択した最小値に自動的に設定されます。
ただし、デフォルト値フィールドに目的の値を入力することで、番号スライダーの範囲内の任意の整数に調整できます。
注：フォームフィールドのデフォルト値の設定に関する詳細は、このオプションに関する完全なチュートリアルをご覧ください。
値の表示
デフォルトでは、スライダーの下のラベルは「選択された値：{value}」と表示されます。{value}タグは、ユーザーが現在選択している数値をプルして、それが正しいことを確認できるようにします。
値の表示の下のラベルの表示を変更できます。
ただし、ユーザーが選択内容を確認できるように、{value}タグはそのまま残しておくことをお勧めします。
注：ユーザーがフォームに入力したすべての情報を送信前に確認できるようにしたいですか？詳細は、WPFormsでの入力プレビューの表示に関するチュートリアルをご覧ください。
増分
この設定は、スライダーの位置が1つ上がるごとのステップサイズを決定します。たとえば、この設定を2に設定した場合、1つ上がるごとに選択された値に2が追加されます（0、2、4、6など）。
デフォルトでは、増分値は1に設定されています。ただし、増分設定の下で好きな整数に変更できます。
注：増分値を偶数に選択し、最大値が奇数（またはその逆）の場合、番号スライダーは最大値の前の数値で停止します。
条件付きロジックの設定
必要に応じて、条件付きロジックを使用して、特定の値を選択したユーザーにメッセージを表示することもできます。
レストラン予約の例では、10人を超えるパーティーであることを示すユーザーにメッセージを表示します。メッセージでは、請求書に自動的に20％のサービス料が追加されることを通知します。
これを設定するには、まずフォームにHTMLフィールドを追加し、「注：10人を超えるパーティーの場合、請求書に自動的に20％のサービス料が追加されます。」というテキストを入力します。
次に、番号スライダーを使用してユーザーが10より大きい数値を選択した場合にのみ、このHTMLフィールドが表示されるように条件付きロジックを設定します。これを行うには、HTMLフィールドのフィールドオプションパネルにあるスマートロジックタブをクリックし、条件付きロジックを有効にする設定をオンにします。
次に、フィールドが表示されるルールを設定します。この例では、ロジックを「[パーティーの人数]が10より大きい場合、このフィールドを表示する」と設定します。
注：条件付きロジックルールの設定でお困りですか？WPFormsでの条件付きロジックの使用に関する初心者向けチュートリアルには、すべての詳細が記載されています。
ユーザーが番号スライダーフィールドで10より大きい値を選択しない限り、HTMLフィールドは非表示のままになります。
これで完了です！これで、番号スライダーフィールドをフォームに追加してカスタマイズできます。
次に、収集したデータを分析する方法を学びたいですか？詳細は、アンケート＆投票アドオンに関するチュートリアルで、エントリ統計の表示、レポートの生成などの方法を確認してください。