Mobile devices and high technology.
Vseweb.com — webmaster, website, web
Rungo.link - news and the most interesting thing on the Internet - news of show business
RSS feeds in the directory: 2817
Added today: 0
Added yesterday: 0
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
WEB tools — when everything is at hand 14.02.2019 at 14:57
The embeddable random videos from Youtube on the website 25.09.2018 at 20:15
What is crowd-reference and where to get it for free? 07.08.2018 at 17:50
To change the design of the login page of WordPress 14.07.2018 at 15:16
Do bulk SMS today? 22.05.2018 at 20:43
As Yandex disliked all cryptanalytical together 09.04.2018 at 11:14
Delete clones of your site out of the index PS 07.04.2018 at 10:35
Contact Form 7 sent the data determines how SPAM 28.03.2018 at 10:00
"Call me back" with the receipt of SMS alert 20.03.2018 at 08:07
How to buy Xiaomi 13.02.2018 at 10:16