The taming of the range in Contact Form 7

The Popular Contact Form 7 plugin for WordPress has the widest functionality for building contact forms. So wide that not all features described in the documentation, and some supported fields and is presented in its raw form. Today we will talk about how to put a human face to one of these undocumented fields (forms) CF7. We are talking about range.

Range HTML

Type of Range, the tag is a slider to enter numbers in a specified range, can be applied in cases where there is no need to specify the exact value. The minimum and maximum number range set in settings, as well as the first step and the required value. In different browsers the slider looks with a few differences, but the essence remains the same:

the Syntax for creating a slider is the following:

Here min is the minimum number in the range (default 0), max — the maximum number (default 100), a step — change step number (default is 1) value current value.

Range in Contact Form 7

Slider to select the numbers in the specified range can be used in CF7. This can be useful in different cases.

In the form template CF, it is sufficient to use the tag:

[range* your range min:5000 max:1000000, step:5000 "25000"]

Used attributes are:

min - Sets the lower value for the input number.

max - Sets the upper value for the input number.

step - Sets the step change in the numbers for the sliders and input fields to numbers.

an Example of what will generate in HTML:

an Example of how it will look on the website on the user's browser:

the Downside is that though the user using the slider and can change the values in the selected range, however, he sees no value and actually does not know what he chose.

the range Modification on the contact form

When you need to inform the user: where and how long he may choose and in fact many he chose in the moment, we need a field modification. Unfortunately, the attributes to a field range plugin Contact Form7 doesn't help us.

to create approximately a slider (range) we need:

1. To make the field range in the form template in the following way:

[range* your range min:5000 max:1000000, step:5000 class:slider id:square "25000"]

5000 uah

> 1 000 000 uah

2. The appearance using styles:

.slidecontainer .slider {["newline"]- webkit-appearance: none;

width: 100%;

height: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

background: #fff;

outline: 0;

opacity: .8;

-webkit-transition: .2s;

-webkit-transition: opacity .2s;

-o-transition: opacity .2s;

transition: opacity .2s;

}

.slidecontainer .values {

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

padding-top: 5px;

}

.slidecontainer .values p {

color: #FFEB3B !important;

font-family: sans-serif;

}

.slidecontainer .val {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

width: 60px;

height: 60px;

margin: 0 auto;

-webkit-border-radius: 50%;

border-radius: 50%;

margin-bottom: 20px;

-webkit-box-shadow: 0 0 10px 0 rgba(255,255,255,.4);

box-shadow: 0 0 10px 0 rgba(255,255,255,.4);

}

input[type=range] {

-webkit-appearance: none;

width: 100%;

margin: 13.8 px 0;

}

input[type=range]:focus {

outline: none;

}

input[type=range]::-webkit-slider-runnable-track {

width: 100%;

height: 8.4 px;

cursor: pointer;

box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

background: #3071a9;

border-radius: 1.3 px;

border: 0.2 px solid #010101;

}

input[type=range]::-webkit-slider-thumb {

box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

border: 1px solid #000000;

height: 36px;

width: 16px;

border-radius: 3px;

background: #ffffff;

cursor: pointer;

-webkit-appearance: none;

margin-top: -14px;

}

input[type=range]:focus::-webkit-slider-runnable-track {

background: #367ebd;

}

input[type=range]::-moz-range-track {

width: 100%;

height: 8.4 px;

cursor: pointer;

box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

background: #3071a9;

border-radius: 1.3 px;

border: 0.2 px solid #010101;

}

input[type=range]::-moz-range-thumb {

box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

border: 1px solid #000000;

height: 36px;

width: 16px;

border-radius: 3px;

background: #ffffff;

cursor: pointer;

}

input[type=range]::-ms-track {

width: 100%;

height: 8.4 px;

cursor: pointer;

background: transparent;

border-color: transparent;

color: transparent;

}

input[type=range]::-ms-fill-lower {

background: #2a6495;

border: 0.2 px solid #010101;

border-radius: 2.6 px;

box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

}

input[type=range]::-ms-fill-upper {

background: #3071a9;

border: 0.2 px solid #010101;

border-radius: 2.6 px;

box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

}

input[type=range]::-ms-thumb {

box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

border: 1px solid #000000;

height: 36px;

width: 16px;

border-radius: 3px;

background: #ffffff;

cursor: pointer;

height: 8.4 px;

}

input[type=range]:focus::-ms-fill-lower {

background: #3071a9;

}

input[type=range]:focus::-ms-fill-upper {

background: #367ebd;

}

3. Output interactively selected range with the help of JS code:

var slider = document.getElementById("square"),

output = document.getElementById("square_val");

output[removed] = slider.value,

slider.oninput = function () {

output[removed] = this.value

};

so there you have it:

5000 uah

> 1 000 000 uah