WordPressフォームに番号範囲スライダーを追加する方法（無料）

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

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

では、WordPressフォームに番号範囲スライダーを追加するにはどうすればよいでしょうか？ここで最も簡単な方法を説明します。

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

WordPress 範囲スライダーとは？

WordPress 範囲スライダーは、人々が数値を入力する代わりにトラックに沿ってハンドルをドラッグして選択できるフォームフィールドです。

フィールドが受け入れることができる最も低い値と最も高い値を設定し、訪問者はその範囲内の任意の数値を選択します。この小さな変更により、いくつかの便利なことが行われます。

• より多くの完了フィールド: ドラッグは入力よりも速いため、人々はフィールドを空白のままにしたりスキップしたりする可能性が低くなります。
• より質の高い回答：あいまいな推測ではなく、実際の数値を把握できるため、フォローアップ時にスライダーは真に役立つリード獲得ツールになります。
• 電話で動作：スライダーハンドルは、数値入力よりもタッチスクリーンで操作しやすく、どのWordPressテーマでも正しく表示されます。
• 学習不要：訪問者は左右にドラッグするだけなので、間違った形式やエラーが発生することはありません。

WPFormsでは、このフィールドをNumber Sliderと呼び、フォームビルダーのStandard Fieldsグループにあります。開始するには、以下の手順に従ってください。

WordPressで数値範囲スライダーを追加する方法

ステップ1：WPFormsプラグインをインストールする

フォームに数値範囲スライダーを挿入する最も簡単な方法は、WPFormsを使用することです。WPFormsは、多くの高度なフォーム作成機能を備えた、最も初心者向けのWordPressフォームプラグインです。

WPFormsの最も気に入っている点は、ネイティブのNumber Sliderフィールドが提供されていることです。ドラッグして挿入し、最小値と最大値を設定すると、トラックの下のラベルが自動的に選択された値を報告し始めます。

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

プラグインのインストール方法がわからない場合は、WPFormsのインストール手順のガイドをクリックしてください。数分で完了します。サイトでWPFormsの準備ができたら、数値スライダーを使用したフォームの作成を開始できます。

WordPressフォームを今すぐ作成

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

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

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

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

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

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

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

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

それでは、フォームに数値範囲スライダーを追加しましょう。左側のStandard FieldsメニューからNumber Sliderフィールドを右側のフォームにドラッグするだけです。

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

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

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

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

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

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

WPFormsは、フォームが送信されるたびに自動的に通知を送信します。フォームの通知は、Settings » Notificationsに移動してカスタマイズできます。

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

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

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

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

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

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

最も一般的な配置オプションであるページ/投稿への埋め込みを見てみましょう。開始するには、フォームビルダーの上部にある埋め込みボタンをクリックします。

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

ページに名前を付けて、開始ボタンを押します。これでWordPressのブロックエディター内にフォームが埋め込まれた状態で表示されます。

必要であれば、コードなしでブロックエディターを使用してフォームをスタイル設定できます。準備ができたら、公開ボタンを押してフォームが埋め込まれたページを公開します。

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

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

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

WordPress 範囲スライダーに関する FAQ

WordPressの範囲スライダーは、無料バージョンで何がカバーされ、フィールドの制限がどこにあるかという、常に同じような質問を引き起こします。これらは最もよく寄せられる質問です。

WPFormsでナンバー スライダーは無料で使用できますか？

はい、数値スライダーは標準フィールドなので、WPForms Liteに無料で含まれており、個別の追加アドオンは必要ありません。

有料ライセンスが必要なのは、その周りに構築するもの、特にBasic以上の条件付きロジックとProでの計算のみです。

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

はい、可能です。その設定はデフォルト値と呼ばれ、フィールドオプションの高度な設定タブにあります。最小値に合わせて設定されており、範囲内の任意の整数を入力すると開始位置が移動します。

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

まさにそのために増分設定があり、選択可能な値と次の値の間隔を制御します。

0から100のスライダーで増分を5にすると、0、5、10などが表示されます。増分が範囲を均等に割り切れるようにしてください。そうしないと、ハンドルが最大値の手前で止まってしまいます。

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

高度な設定タブの値の表示設定がこれを処理し、デフォルトでオンになっています。テキストは選択した値: {value}と表示され、{value}は訪問者がハンドルをドラッグするとリアルタイムで更新されます。

そのプレースホルダーの周りの文言は、通貨記号や単位ラベルを追加する方法として、好きなように書き換えることができます。

最小値と最大値のために、2つのハンドルを持つ範囲スライダーを使用できますか？

単一フィールドではできません。なぜなら、数値スライダーはハンドルが1つで、その移動範囲を定義するためです。

訪問者に範囲を選択させる必要がある場合は、最小値と最大値のようなラベルを付けた2つの数値スライダーフィールドを追加します。両方の値は個別にエントリーに保存されるため、後で読みやすく、対応しやすくなります。

ナンバー スライダーは小数点に対応していますか？

いいえ、このフィールドは整数のみで機能します。これは、最小値、最大値、デフォルト値、および増分にも同様に適用されます。

小数点以下の精度が必要な場合は、代わりに数値フィールドを使用してください。最小値と最大値には独自の範囲設定があり、訪問者はそれにドラッグするのではなく、数値を入力します。

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

スライダーのトラックとハンドルは、プログレスバーとラジオボタンと同様に、送信ボタンから色を取得するため、フォーム内のすべての要素が視覚的に一貫したものになります。

したがって、ブロックエディターのスタイリングオプションで送信ボタンの色を変更すると、スライダーの色も変更されます。また、フィールドサイズを小、中、大に切り替えたり、フォームビルダーからラベルを編集したりすることもできます。

次に、スライダーを使用して計算フォームを作成する

次のステップは、そのスライダーを数式内で使用することです。これにより、訪問者が意思決定を行う間に価格がリアルタイムで変動します。

これが、ほとんどの人がそもそもフォームにスライダーを追加する理由であり、データ収集フィールドを販売用フィールドに変換します。

スライダーを価格設定ではなくフィードバックに向ける場合は、これらのNPSアンケートの例で、0から10のスケールが満足度に関する質問としてどのように機能するか、また得られた回答をどのように処理するかを示しています。

今すぐフォームに数値範囲スライダーを追加する

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。