Please see this:
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.
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.
Inside the Form Tag Generator Option, you will find a list of Tags with a Range Slider tag on the end.
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.
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.
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.
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.
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>.
5. Copy the Shortcode
Now that you have finished customizing your Range Slider for your Contact Form. Copy the Shortcode above the Admin Panel.
Open Pages>All Pages> (Your Page Name) and place the Shortcode and Preview Changes.
Your Contact Form with a Range Slider is ready to use.