Range Slider

In this article, we will try to explain how to set up Contact Form 7 Range Slider with the help of our Free Addon “Contact Form 7 Range Field”.

What’s needed

  • Make sure Contact Form 7 and Ultimate Addons for Contact Form 7 are installed on your WordPress site.
  • Go to Contact -> Ultimate Addons menu in your WordPress Dashboard and enable the Range Slider checkbox. Then click the Save Changes button. This will enable the “Range Slider addon” settings.

contact form 7 range slider

Range Slider for Contact Form 7 – Live Example

In this tutorial, we will create a range slider for the contact form 7 form like the example below. You can, for sure, create your form following the same steps.


    Check our main demo to see all the supported fields for the Contact form 7 range field.

    Contact Form 7 Range Slider Creation

    From the Admin Screen Dashboard, Open Contact > Add New. This will open a new Contact Form on your Admin Screen. Put a title on your new Contact Form. (i.e. Range Slider).

    Contact Form 7 Range Field Settings

    Below the Title, you will find an option called UACF7 Range Slider. This will enable you to customize (i.e. changing colors, changing the size of the buttons) your Range Slider Buttons.

    range slider contact form 7

    Form Tag Generator

    Inside the Form Tag Generator Option, you will find a list of Tags. Look for the Range Slider.

    contact form 7 range

    Open Range Slider from the tags. You will find a list of settings that allows you to customize your Range Slider before you place it on your Contact Form.

    contact form 7 range field

    • Field Type: You choose whether the Range Slider Field is required in the Contact Form.
    • Name: You can work with the automatically generated name or you could put a different name for the Tag that you are going to place.
    • Show Values: Shows the specific values of the Slider, given where it is placed.
    • Minimum Range: You set a minimum range for your slider.
    • Maximum Range: You set a maximum range for your slider.
    • Default Value: This determines the initial value of the Slider Button when a user visits your site.
    • Slider Type: Single Handle: In this option, you will get one button on the slider to show a specific value. Double Handle: In this option, you will get two buttons on the slider to show a specific range of values. Here is the difference:

    range slider cf7 - Themefic

    Setting up Range Slider

    Now that you know the features, you choose your features according to your needs. Follow the steps mentioned below:

      • Tick the Required Field, if the slider information is required.
      • Choose On/Off according to your preference.
      • Choose Single Handle/ Double Handle according to your preference
      • Set a Minimum Range
      • Set a Maximum Range
      • Set a Default Value
      • Insert Tag

    Note: If you are a Pro user, you will get a Different Style for your Sliders.

    After you have finished customizing your range slider in the Contact Form. Copy the Tag or Click Insert Tag. It will place the Tag inside the Admin Panel of your Contact Form.

    cf7 range

    Add other fields

    Now add the rest of the Contact Form fields you need, either on top of the range slider codes or at the bottom. Wherever you feel necessary.

    contact form 7 range field

    Copy the Shortcode

    If your form is ready, click save and copy the Contact form shortcode.

    Copy Short Code - Themefic

    Time to Publish

    Paste the shortcode wherever you want to show your form (Pages/Posts/Custom Post Types/Sidebars). The result should be something similar to the above form.

    Looking for more Advanced Options?

    With the Range Slider Pro version, you can select from 3 Premium Prebuilt Range Slider layouts. Here is a live demo example of the form.

    Watch Complete Video

    If you are still confused, we suggest you watch this video. In this video, we tried to describe the whole step of How to create a form with Range Slider Field with Contact Form 7:

    Full-Form Code

    Here is a sample code of our above form:

    <label> <strong>Your Email</strong>
        [email* your-email autocomplete:email] </label>
    <label><strong>Your Budget</strong>
    [uacf7_range_slider uacf7_range_slider-234 min:100 max:20000 default:100 step:1 show_value:off handle:1 "default"]</label>
    <label><strong>Your Age Range</strong>
    [uacf7_range_slider uacf7_range_slider-199 min:18 max:60 default:26 show_value:off handle:2 "default"]</label>
    <label> <strong>Your Project Details</strong>
        [textarea your-message] </label>
    [submit "Submit"]

    Still Not Clear? Please contact us. If you are a free User, you can open a ticket from here. If you are a pro user, you can open a ticket from here.