Range Slider

Video Documentation

Please see this:

Written Documentation

We will get you to set up your Range Slider using the plugin Ultimate Addons for Contact Form 7 in following steps:

1. Turn on the Feature First

If you have installed Contact Form 7 and Ultimate Addons For Contact Form 7 in your system, you will find a Contact option in your Admin Screen. Open Contact>Ultimate Addons.

1. Turn on Feature First - Themefic

You will find the Ultimate Addons panel on your Admin Screen and see a list of features with radio buttons on the right to turn them on. Turn the Range Slider on and Save Changes below.

2. Make a New Contact Form and Find the Feature on Admin Screen

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).
Below the Title, you will find an option UACF7 Range Slider. This will enable you to customize (i.e. changing colors, changing size of the buttons) your Range Slider Buttons.

2. UACF7 Range Slider Design - Themefic

Inside the Form Tag Generator Option, you will find a list of Tags with a Range Slider tag on the end.

3. Make a Contact Form and Find the feature - Themefic

3. Range Slider Tag

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.

4. Range Slider - Themefic

Field Type: You choose whether the Range Slider Field is required or not 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.

Slider Type

Single Handle: In this option you will get one button on the slider to show a specific value.

5. Single Slider - Themefic

Double Handle: In this option you will get two buttons on the slider to show a specific range of values.
6. Double Slider - Themefic

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.

4. Setting up Range Slider

Now that you know the features, you choose your features accordingly to set up your Range Slider.
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 Different Style for your Sliders developed by Themefic Team. For free users, you can customize your slider colors and shape from the UACF7 Range Slider Option.
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.

7. Setting Up the Contact Form - Themefic

Note: If you want a label for your slider, put the Title and Tag inside the label syntax like this: <label> Your Budget (In USD) [range slider tag] </label>.

8. Setting up - Themefic

5. Copy the Shortcode
Now that you have finished customizing your Range Slider for your Contact Form. Copy the Shortcode above the Admin Panel.

9. Copy the Shortcode - Themefic

Open Pages>All Pages> (Your Page Name) and place the Shortcode and Preview Changes.

10. Contact Form Ready - Themefic

Your Contact Form with a Range Slider is ready to use.