Укрощение range в Contact Form 7

Популярный плагин Contact Form 7 для WordPress имеет широчайший функционал для построения контактных форм. Настолько широкий, что не все возможности описаны в документации, а некоторые поддерживаемые поля и вовсе представлены в сыром виде. Сегодня мы поговорим о том, как придать человеческий облик одному из таких недокументированных полей (форм) CF7. Речь идет о range.

Range в HTML

Тип Range в теге <input> - это ползунок для ввода чисел в указанном диапазоне, может применяется в тех случаях, когда нет необходимости указывать точное значение. Минимальное и максимальное число диапазона задается в настройках, а также шаг и первое требуемое значение. В разных браузерах ползунок выглядит с некоторыми отличиями, но суть от этого не меняется:

Синтаксис создания ползунка следующий:

<input type="range" min="5000" max="1000000" step="5000" value="25000">

Здесь min — минимальное число в диапазоне (по умолчанию 0), max — максимальное число (по умолчанию 100), step — шаг изменения чисел (по умолчанию 1), value — текущее значение.

Range в Contact Form 7

Ползунок для выбора чисел в указанном диапазоне можно использовать в CF7. Это может быть полезным в разных случаях.

В шаблоне формы CF достаточно использовать тег:

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

Использованные атрибуты:

min - Устанавливает нижнее значение для ввода числа.
max - Устанавливает верхнее значение для ввода числа.
step - Устанавливает шаг изменения числа для ползунков и полей ввода чисел.

Пример того, что будет сгенерировано в HTML:

<input type="range" name="your-range" value="25000" class="wpcf7-form-control wpcf7-range wpcf7-validates-as-required wpcf7-validates-as-number" min="5000" max="1000000" step="5000" aria-required="true" aria-invalid="false">

Пример того, как это будет выглядеть на сайте - на стороне пользователя в браузере:

Недостатком является то, что хоть пользователь с помощью ползунка и может изменять значения в выбранном диапазоне, однако он не видит никаких значений и собственно не знает, что он выбрал.

Модификация range в контактной форме

Когда нужно информировать пользователя: откуда и доколе он может выбирать и собственно сколько он выбрал в текущий момент, нужна модификация поля. К сожалению, атрибуты к полю range в плагине Contact Form7 нам ничем не помогут.

Чтобы создать примерно такой ползунок (range) нам потребуется:

1. Оформить поле range в шаблоне формы следующим образом:

<div class="slidecontainer">
[range* your-range min:5000 max:1000000 step:5000 class:slider id:square "25000"]
<div class="values"><p>5000 uah</p><div class="val"><p id="square_val"></p></div>
<p>> 1 000 000 uah</p></div>

2. Внешнее оформление задать с помощью стилей:

.slidecontainer .slider {
-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.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px 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.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px 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.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
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.4px;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}

3. Выводить интерактивно выбранное значение range с помощью JS кода:

var slider = document.getElementById("square"),
output = document.getElementById("square_val");
output.innerHTML = slider.value,
slider.oninput = function () {
output.innerHTML = this.value
};

И вот что у нас получилось: