Процесс создания веб-формы может быть длительным и непростым, особенно когда форма включает сложные вложенные структуры, калькулятор, интерактивные элементы или анимацию. На этой странице вы узнаете детали о расширении для разработки форм, которое способно облегчить вашу задачу. Мы предоставим вам стартовый гид, который поможет освоить плагин QuickForm.
В конце рассматриваемого примера, вы получите готовую форму, сможете добавить ее в Яндекс Метрику и защитить от ботов.
Давайте создадим форму "Запись на консультацию". Вы сможете разместить ее на своем сайте или экспортировать в файл быстрой установки, чтобы передать заказчику. Этот файл также можно использовать в ваших будущих проектах. Если вы еще не установили плагин QuickForm, сейчас самое время это сделать.
В данной статье я не буду углубляться в сложные концепции и возможности, а сосредоточусь на базовых основах и последовательности действий. Форма будет заполняться на английском языке, так как пример предназначен для всех языков моего сайта. Вы можете посмотреть, как будет выглядеть конечный результат, внизу этой страницы.
Создание и настройка проекта формы.
Проект формы представляет собой набор ее основных настроек. Перейдите на главную страницу расширения в административной панели сайта и нажмите кнопку "Add new". Откроется страница, с которой начинается процесс работы. Нас интересуют несколько полей, которые необходимо заполнить. Во-первых, добавьте заголовок для проекта. Я указал: "Sign up for a consultation. For the "First Form, Introduction" page.". Внизу добавьте текст, который будет сообщать пользователю об успешной отправке формы. Я написал: "Hello, {replacerName}! Thank you for your order. Our manager will contact you soon.". Также выберите QuickForm для отображения этого сообщения.
Далее нам нужно создать CSS файл для нашей формы. В пункте "CSS file for form" нажмите кнопку "Create". В появившемся поле введите название файла: "firstexample.css". Кнопку "Copy styles from default.css" оставьте выбранной.
Важно отметить, что после установки расширения у вас будет доступен только файл default.css для выбора стиля формы. Это технический файл, содержащий актуальный набор правил для всех полей плагина. Использовать его для выбора стиля формы нельзя, так как все изменения в нем потом восстановятся, и форма испортится.
Затем перейдите на вкладку "Email settings" и заполните адрес, на который будет отправляться форма, а также тему письма. Я указал: "Consultation Request No. {replacerId} from {replacerName}.". После этого нажмите "Save & close". Скриншоты настроек можно посмотреть ниже:
Заполнение формы полями.
После выполнения предыдущих указаний, рядом с названием созданного проекта появится ссылка "Fields". Перейдите по этой ссылке, и откроется менеджер групп полей. Конструктор работает не с отдельными полями, а с их группами. В нашем случае форма состоит из одной группы, так как она простая. Создадим эту группу, нажав на кнопку "Add new". На открывшейся странице заполните заголовок группы, я указал: "Starting group". Затем нажмите кнопку "Add fields" и добавьте поля, как показано на скриншоте ниже:
Описание полей
customHtml. Это специальное поле расширения, которое добавляет HTML-разметку. В данном примере я обернул поле "календарь" и поле "удобное время" в контейнер с классом "qfflex", чтобы расположить их на одной линии.
username. Это поле относится к группе меню "one-off". Поля из этой группы должны присутствовать только один раз в видимой части формы и обычно обладают дополнительной функциональностью. Например, поле "useremail" отличается от поля "input[email]" тем, что оно определяет того, кто заполняет форму. Значение из поля "useremail" используется плагином для отправки пользователю копии сообщения, служит подстановочным адресом для ответа и может использоваться в сообщениях типа "{replacerName}" и так далее. Поле "input[email]" используется, например, если вам нужно получить адреса каких-либо неопределённых людей. Настройки поля "username" можно увидеть на втором скриншоте вверху. Остальные поля настраиваются аналогичным образом. После завершения настройки нажмите "Save & close".
Выводим форму на страницу.
Чтобы вывести форму, необходимо скопировать Hashtag из менеджера проектов и вставить его в содержимое страницы. Дополнительные способы вывода можно узнать на странице плагина. Сразу после этого вы увидите что-то похожее на первый скриншот ниже. Это связано с тем, что нам нужно включить магию CSS. Открываем файл firstexample.css в нашем любимом редакторе кода и начинаем процесс... Вначале я удаляю все незадействованные формой блоки, а с оставшимся кодом продолжаю работу. К сожалению, описанию она не поддается из-за своего творческого характера. Тем не менее, некоторые технические аспекты нуждаются в объяснении.
Особенности CSS.
После очистки файл firstexample.css у меня выглядит так:
.firstexample {
background: #fff;
}
.firstexample * {
margin: 0;
box-sizing: border-box;
max-width: none;
font-size: 1em;
line-height: 1em;
}
.firstexample .qf3txt input,
.firstexample select,
.firstexample textarea {
background: #fff;
padding: 0.6em;
border: 1px solid #8e8e8e;
border-radius: 0.3em;
}
/* message */
.firstexample .qfmess span {
padding: 1em;
margin: 1em;
display: block;
}
/* textarea */
.firstexample textarea {
height: 10em;
}
/* checkbox */
.firstexample .qfcheckbox input {
margin: 0 0.5em 0 0;
}
/* link */
.firstexample .qfcapt {
text-align: right;
}
.firstexample .qfcapt a {
color: #CCC;
font-size: 10px;
padding: 1em 2em;
}
.firstexample .nfl {
display: none;
}
/* calendar */
.firstexample .single {
display: inline-block;
width: 38%;
}
.firstexample .qfcalendar input {
width: 100%;
}
.firstexample .qf_date_inner {
display: flex;
justify-content: space-between;
}
.firstexample .qf_calen {
position: relative;
z-index: 999;
}
.firstexample .widgetCalendar {
position: absolute;
left: 0;
height: 0px;
overflow: hidden;
width: 100%;
min-width: 180px;
}
.firstexample .qf_date_a {
display: block;
padding: 0 1.2em;
background-image: url(../datepicker/images/calendar.png);
background-size: 100% 100%;
width: 3em;
}
Легко заметить, что все правила начинаются с имени "firstexample". Это связано с тем, что QuickForm добавил этот класс к родительскому контейнеру, и мы можем им воспользоваться. Такой подход позволяет размещать на одной странице формы с различными дизайнами, не создавая конфликтов между ними. Если вы хотите, чтобы формы были однотипными, просто используйте один и тот же CSS файл для всех форм. Однако все правила должны начинаться с имени, соответствующего имени вашего файла.
Кроме этого, к родительскому контейнеру добавляется класс "touch" или "desk", в зависимости от того, является ли устройство с touchpad. Также, если ширина контейнера, в который вы поместили форму, становится меньше 500px, к форме автоматически добавляется класс "compact".
В результате 3,5 часов интенсивной работы со стилями форма приобрела законченный вид. Теперь она выглядит как на втором скриншоте вверху. Для многих шаблонов такой дизайн будет выглядеть эффектно. На этом можно завершить проектирование, но нужно уделить внимание еще одному важному аспекту.
Защита от спама.
QuickForm предлагает трехступенчатую защиту от спама, которая усиливается по мере усложнения структуры формы. Для нашей простой формы будет использоваться базовый алгоритм, который уже обеспечит достаточный уровень защиты. Однако я хочу добавить второй слой, использующий функционал зависимых полей. Вкратце, этот слой основан на том, что боты обычно не могут правильно обрабатывать XMLHttpRequest запросы. Правильная отправка формы QuickForm возможна только при нажатии на специальное поле "submit". Если форма не выводит это поле, ее прием сервером становится невозможным. Поэтому достаточно добавить эту кнопку через зависимое поле.
Для этого удаляем кнопку "submit" из нашей группы и вместо нее добавляем "input[button]". Скриншот. В настройках фальшивой кнопки указываем: value="Sign Up" onclick="this.form.submit()". Это нужно для проверки незаполненных полей: в такой конфигурации форма не будет отправляться. Создадим еще одну группу полей в нашем проекте, я назвал ее "Real submit button". Скриншот. В этой группе будет настоящая кнопка. Скриншот. Возвращаемся в главную группу и связываем новую кнопку с полем input[checkbox]. Скриншот. Теперь, после того как пользователь согласится с условиями, кнопка submit будет загружена с сервера и форма станет им принимаемой.
Третий слой защиты предназначен для калькуляторов, и я не буду его рассматривать в данный момент. Кроме того, в плагине предусмотрена reCAPTCHA, но она не добавляет дополнительной защиты поверх базовой, поэтому я ее не использую.
В настройках поля submit можно ввести имя задачи из Яндекс Метрики, если скрипт метрики подключен на вашем сайте. QuickForm обеспечивает защиту от скликивания: событие вызывается не по клику на кнопку, а по сабмиту правильно заполненной формы, что гарантирует ее реальную отправку.
Результат.
После завершения работы я экспортирую форму в файл с расширением .qf3.zip, используя имя, соответствующее имени файла CSS. Теперь этот файл можно использовать в будущих проектах, просто установив его с помощью кнопки "Import" на главной странице плагина. Заключительные настройки и стили проекта можно увидеть в файле firstexample.qf3.zip(11 KB).