[WordPress] 外掛分享： Range Slider For Contact Form 7

內容簡介

「Range Slider For Contact Form 7」是一款免費的WordPress外掛，可以與「Contact Form 7」搭配使用。該外掛具有易於使用、最小和最大範圍選項、單調或雙調範圍選擇器、隱藏或顯示標籤、設置默認範圍等多種功能，同時也支援手機設備，並提供使用手冊和實時演示。

問題與答案：
1. 「Range Slider For Contact Form 7」是什麼？
- 「Range Slider For Contact Form 7」是一個免費的WordPress外掛，可以與「Contact Form 7」搭配使用，為網站添加範圍選擇器。

2. 該外掛都提供哪些功能？
- 該外掛提供易於使用的界面、最小和最大範圍選項、自定義選項區間、支援手機設備、顯示或隱藏標籤、設定默認範圍等多種功能。

3. 「Range Slider For Contact Form 7」是否免費提供下載？
- 是的，「Range Slider For Contact Form 7」可以免費下載使用，需要搭配「Contact Form 7」一同使用。

4. 該外掛是否提供使用手冊和實時演示？
- 是的，「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

Make sure Contact Form 7 is installed and activated.
Install and activate Range Slider For Contact Form 7.
Open any Contact Form 7 form in the editor.
Click the range slider button in the tag generator toolbar.
Configure your slider options (name, min, max, default value, tooltip, label).
Click Insert Tag — the [range_slider] shortcode is added to your form.
Add the corresponding mail tag (e.g. [your-slider]) to your email template if you want the value included in notifications.
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.