Популярный плагин 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 };
И вот что у нас получилось:

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...
Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...
Привет! Нужно доработать CF7 для отправки формы аттачем в xml. Возьмешься?
Пишите в контакты https://seo-zona.ru/contact