How to Add Range Slider Using CF7 Extensions

Steps to add Range Slider Filed  #

To add the Range Slider filed to CF7, make sure that both the Contact Form 7 and Extensions for CF7 plugins are activated on your website.

Step 1: Enable the Range Slider Extension #

Go to WordPress Dashboard > HT Cf7 Extension > Extensions. From the list of extension, turn ON the Range Slider extension.

After turning on the Range Slider Switcher, just click the Save Settings button to save this settings.

Step 2: Configure the Range Slider field #

Once the Range Slider extension is enabled, a new tag called HT Range Slider will appear on the form edit screen. This tag becomes available whenever you edit an existing form or create a new one.

Clicking on the HT Range Slider tag will open a popup where you can set up the Range Slider by configuring options.

• Field Type: Choose whether the Range Slider field should be required.
• Name: Use the auto-generated name or enter a custom name for the field tag.
• Show Values: Option to display slider range values on the slider.
• Minimum Range: Define the minimum value for the slider.
• Maximum Range: Define the maximum value for the slider.
• Default Value: Set an initial value that will appear on the slider when users first visit the site.
• Range Step: Define the step value for the slider range.
• Slider Type:
  • Single Handle: A single button that represents one value.
  • Double Handle: Two buttons that display a range of values.

After customizing your range slider in the Contact Form, copy the tag or click Insert Tag. This will add the tag to your Contact Form.

Preview Example #

Once you've completed the setup, the preview will appear as shown below.

That’s it! Thank you for choosing Extensions for CF7 to enhance your user experience. If you need additional assistance, feel free to contact our support team. Our dedicated support team would be more than happy to assist you.