Range Slider For Contact Form 7

Range Slider For Contact Form 7 is a free WordPress plugin that lets you easily add an interactive range slider input field to any Contact Form 7 form. No coding required — simply use the built-in tag generator to configure your slider and insert it into your form in seconds.

Whether you need a price range selector, a rating scale, a quantity picker, or any other numerical input, this plugin gives your visitors a smooth and mobile-friendly slider experience right inside your CF7 form.

Documentation Live Demo Get Pro Version

Why Use Range Slider For Contact Form 7?

Standard Contact Form 7 does not include a range slider field out of the box. This plugin fills that gap by registering a native [range_slider] form tag directly inside the CF7 tag generator — the same familiar interface you already use. Configure everything visually, click “Insert Tag”, and you are done.

FREE Features

• Single Range Slider — Add a clean, single-handle slider field to any Contact Form 7 form.
• Min & Max Range — Define the minimum and maximum numeric boundaries of the slider.
• Set Default Slider Value — Pre-select a starting value so the slider is never empty on page load.
• Show / Hide Tooltip — Optionally display a tooltip above the slider handle showing the current value as the user drags it.
• Show / Hide Range Label — Toggle the min and max labels displayed at each end of the slider track.
• Required Field Validation — Mark the slider field as required; CF7 will block form submission and display an error if the field is left at its default empty state.
• Custom ID & Class — Assign a custom HTML id and/or class to the slider wrapper for easy CSS styling or JavaScript targeting.
• Seamless CF7 Tag Generator Integration — Configure the slider entirely through the familiar Contact Form 7 tag generator panel — no manual shortcode editing needed.
• Mail Tag Support — The selected slider value is available as a mail tag so you can include it in CF7 email notifications and auto-replies.
• Mobile Friendly — The slider is fully touch-enabled and responsive, working smoothly on phones and tablets.
• Lightweight — Loads only a single minified JS file and a single minified CSS file on the front end.

🔒 PRO Version Features

The following features are available exclusively in the Pro (Premium) version of Range Slider For Contact Form 7. They are visible but locked in the free plugin’s tag generator.

1. Double Range Slider Add a two-handle slider that lets users select a range between two values (e.g. a price range of $200–$800). The double slider outputs both the lower and upper values to the form — perfect for booking filters, budget selectors, and age-range inputs.

2. Step Value Control Define a custom step increment for the slider handle (e.g. a step of 10 means the slider snaps to 0, 10, 20, 30 … rather than every integer). This is essential when you need the user to select from a fixed set of values rather than an arbitrary number.

👉 Upgrade to Pro

How to Use

1. Make sure Contact Form 7 is installed and activated.
2. Install and activate Range Slider For Contact Form 7.
3. Open any Contact Form 7 form in the editor.
4. Click the range slider button in the tag generator toolbar.
5. Configure your slider options (name, min, max, default value, tooltip, label).
6. Click Insert Tag — the [range_slider] shortcode is added to your form.
7. Add the corresponding mail tag (e.g. [your-slider]) to your email template if you want the value included in notifications.
8. Save the form. The slider will now appear on your front-end form.

Use Cases

• Price / Budget Range — Let users specify their budget before submitting an enquiry.
• Rating & Satisfaction Surveys — Collect numeric ratings (e.g. 1–10 satisfaction score).
• Age or Year Selection — Replace a plain number field with a more intuitive slider.
• Quantity Selector — Allow users to pick quantities in a visually engaging way.
• Booking & Availability Forms — Combine with other CF7 fields to build rich booking enquiry forms.