=== Range Slider For Contact Form 7 === Contributors: topsmodule Tags: range slider contact form 7, contact form 7 range slider, CF7 range slider, slider field contact form 7, range input contact form 7 Requires at least: 5.5 Tested up to: 7.0 Stable tag: 1.0 Requires PHP: 7.2 License: GPLv3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.txt Add a fully customizable range slider field to your Contact Form 7 forms — with min/max range, tooltips, labels, and default value support. == Description == **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](https://www.topsmodule.com/how-to-add-range-slider-for-contact-form-7/) [Live Demo](https://topsmodule.com/task/range-slider-for-contact-form-7/range-slider/) [Get Pro Version](https://www.topsmodule.com/product/range-slider-for-contact-form-7/) --- = 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](https://www.topsmodule.com/product/range-slider-for-contact-form-7/) --- = 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. --- == Installation == **Option 1 — WordPress Plugin Directory (Recommended)** 1. Go to your WordPress dashboard → Plugins → Add New. 2. Search for **Range Slider For Contact Form 7**. 3. Click **Install Now**, then **Activate**. **Option 2 — Manual Upload** 1. Download the plugin `.zip` file. 2. Go to Plugins → Add New → Upload Plugin. 3. Choose the `.zip` file and click **Install Now**, then **Activate**. **After Activation** 1. Make sure Contact Form 7 is already installed and active. 2. Open any CF7 form, click the **range slider** tag generator button, configure your options, and insert the tag. 3. Keep both plugins updated to ensure compatibility. --- == Frequently Asked Questions == = Does this plugin require Contact Form 7? = Yes. Range Slider For Contact Form 7 is an add-on for Contact Form 7 and will not work without it. Please install and activate CF7 first. = Can I add more than one range slider to a single form? = Yes. You can insert multiple `[range_slider]` tags in one form. Just give each slider a unique **Name** in the tag generator. = Will the selected slider value be included in the CF7 email notification? = Yes. After inserting the slider tag, go to the **Mail** tab of your CF7 form and add the corresponding mail tag (e.g. `[your-slider-name]`) anywhere in the email body or subject. = Is the slider mobile-friendly? = Yes. The slider supports touch events and works on iOS and Android devices. = How do I set a default starting value for the slider? = In the tag generator, enter your desired starting value in the **Set Range** field. For the free (single) slider, enter a single number (e.g. `20`). For the Pro double slider, enter two values separated by a hyphen (e.g. `20-80`). = Can I style the slider to match my theme? = Yes. The slider wrapper receives the CSS class `rslider_container` and any custom class you specify in the **Class** field. You can override the default styles in your theme's CSS. = What is the difference between the free and pro versions? = The free version provides a single-handle range slider with full min/max, default value, tooltip, label, required field, and custom ID/class support. The Pro version adds a **Double Range Slider** (two handles for selecting a range between two values) and a **Step Value** control (snap the slider to fixed increments). = Where can I find documentation? = Full documentation is available at [https://www.topsmodule.com/how-to-add-range-slider-for-contact-form-7/] = Where can I see a live demo? = Visit the live demo at [https://topsmodule.com/task/range-slider-for-contact-form-7/range-slider/] --- == Screenshots == 1. CF7 form editor — "range slider" tag button highlighted in the form toolbar 2. CF7 form template — generated [range_slider] shortcode tag shown in the form body 3. Form-tag Generator modal — name, ID, class, single/double slider type, min/max range, default, tooltip, step, and range label options 4. Front-end contact form — single range slider and double range slider both rendered with tick labels --- == Changelog == = 1.0 = * Initial release. * Single range slider field for Contact Form 7. * Min / Max range configuration. * Default value (Set Range) option. * Tooltip show/hide toggle. * Range label (min/max labels) show/hide toggle. * Required field validation support. * Custom ID and Class options. * CF7 tag generator integration. * Mail tag support. * Mobile-friendly touch support. --- == Upgrade Notice == = 1.0 = Initial release. No upgrade steps required.