Помощник руководителя проектов stepFORM Артем Петров рассказал, как сделать веб-формы удобными для пользователей, защитить их от спама и перечислил основные способы их разработки.
Веб-формы — простой инструмент и один из главных источников лидов на сайте. С его помощью возможно выстроить хороший поток заявок с любой страницы. Чтобы веб-форма приносила стабильный приток прибыли, а не слабый ручеек из не целевых заявок, важно сделать ее удобной для посетителей. И не забудьте о безопасности, если не хотите получать спам вместо лидов.
- Научитесь писать код за две недели
- Создайте свой первый проект — небольшую игру для индивидуального подсчёта продолжительности жизни и мотивации
- познакомитесь с основами самого популярного языка программирования — JavaScript
Как улучшить веб-формы для пользователей
Используйте возможности Web Forms 2.0.
Веб-формы всегда требовали улучшений. Стандартные средства HTML не могли обеспечить решение многих задач разработчиков. На помощь приходил JavaScript, с помощью которого можно как угодно манипулировать с содержимым страницы. Аналогичная ситуация была и с CSS. Множество анимаций и визуальные эффекты реализовали при помощи скриптов.
С появлением HTML5 и CSS3 возможности веб-разработки расширились. Чтобы решить многие стандартные задачи, уже не приходилось использовать скрипты. HTML5 принес с новые возможности для веб-форм, включая спецификацию Web Forms 2.0. Разработчики получили возможность использовать новые значения для атрибута type. Чтобы предложить пользователям удобные веб-формы, можно использовать:
Дату и время
Многие сайты, например, бронирования отелей или такси, используют виджеты выборе даты и времени. В HTML5 можно реализовать простой календарь с помощью полей:
- date — год, месяц и день;
- datetime — год, месяц, день, час, минута, секунда, а также часовой пояс (устаревший тип, рекомендуется использовать datetime-local);
- datetime-local — аналог datetime, без часового пояса;
- month — год и месяц;
- week — год и номер недели;
- time — время в часах, минутах, секундах, долях секунд.
Числовой счетчик
Для решения многих задач достаточно использовать обычное текстовое поле. Но там, где нужен ввод точного числового значения, можно задействовать поле типа number. Его атрибуты min и max определяют минимальное и максимальное значение, а step — шаг. Пример:
<input type=»number» value=»0″ min=»0″ max=»10″ step=»1″>
Слайдер
Есть много JavaScript библиотек, которые позволяют создать слайдеры или ползунки с выбором значения из заданного диапазона. Сделать простой ползунок теперь можно средствами HTML. Пример:
<p>Выберите значение от 0 до 50:</p> <div>
<input type=»range» name=»volume»
min=»0″ max=»50″>
<label for=»volume»>Объем</label>
</div>
Email и телефон
Самая важная информация, которую собирают через формы — телефон и email. В Web Forms 2.0 предусмотрены поля с такими типами. Пример:
<div>
<input type=»tel» name=»phone» value=»»>
<label for=»phone»>Телефон</label>
</div>
<div>
<input type=»email» name=»email» value=»»>
<label for=»email»>Ваш email</label>
</div>
Выбор цвета
В HTML5 есть поля для выбора цвета. Можно задать любые значения в шестнадцатеричной системе счисления и предложить пользователям выбрать. Пример:
<p>Выберите цвет элемента:</p>
<div>
<input type=»color» name=»color1″ value=»#ff0000″>
<label for=»color1″>Цвет 1</label>
</div>
<div>
<input type=»color» name=»color2″ value=»#f6b73c»>
<label for=»color2″>Цвет 2</label>
</div>
Паттерны
Атрибут pattern позволяет проверить ввод данных в форму. Пример:
<input type=»password» name=»pwd» pattern=».{12,}» title=»Минимальная длина пароля должна быть от 12 символов»>
<input type=»password» name=»pwd» pattern=»(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{12,}» title=»Пароль должен содержать минимум 1 цифру, заглавную и строчную буквы и быть не менее 12 символов»>
<input type=»url» name=»address» pattern=»https?://.+» title=»Введите https://»>
Другие полезные атрибуты
В HTML5 есть и другие полезные атрибуты для форм.
- Атрибут placeholder позволяет вписывать текст, который отображается, когда поле пустое, и исчезает при фокусе.
- Атрибут autofocus автоматически ставит фокус на поле после загрузки страницы.
- Атрибут required помечает, что поле обязательное для заполнения.
- Атрибут autocomplete включает автозаполнение формы (запоминает ранее введенные данные). Отключается установкой значения off: autocomplete=»off».
Web Forms 2.0 подтолкнули развитие веб-форм вперед. Сегодня анатомия веб-форм значительно усложнилась. Поля и выпадающие списки могут быть связаны между собой и подгружаться динамически при выборе, а на серверной части установлена какая-нибудь система для обработки входящих заявок с отправкой на множество каналов связи (email, sms, CRM, мессенджеры). Поэтому для решения нестандартных задач HTML по-прежнему недостаточно.
Как защитить веб-формы от спама
Проводите валидацию данных. Это защитит от ввода нежелательной информации, поможет избежать взлома сайта через форму. Проводить валидацию можно не только на серверной части, но и на клиентской. Важно, чтобы на серверной части валидация выполнялась всегда, ведь клиентскую легко обойти, просто отключив обработку JavaScript в браузере.
Основной и один из самых простых способов защиты форм от спама — Captcha. Ее вполне достаточно, чтобы не быть заспамленным. В некоторых случаях можно прибегать к другим хитростям по распознаванию и защите от спама:
Динамическая генерация формы с помощью JavaScript — один из хороших способов не дать спам ботам атаковать ваш почтовый ящик. Ведь, как правило, они разработаны с учетом, что все поля формы заранее отображаются на странице.
Еще один простой способ — размещение скрытого поля с каким-нибудь именем, например:
<input type=»hidden» name=»phone» value=»»>
Пользователи сайта не видят поле и не заполнят его. А спам-бот будет автоматически заполнять все поля, чтобы отправка формы прошла успешно. Если скрытое поле оказалось заполненным, значит форму заполнит бот, и данные из нее можно не принимать.
Как правило, спам-боты заполняют форму за считанные секунды, что обычный пользователь не может сделать. Именно поэтому для выявления бота достаточно проверить, сколько времени прошло с момента входа на страницу и отправки формы.
Многие сервисы, например, Akismet, позволяют отфильтровывать спам на основе введенных данных Если раньше спамер промышлял на других сайтах, сервис поможет это выявить и не допустит отправку нежелательной информации.
Все перечисленные способы защиты можно использовать в комплексе — это повысит степень защиты перед разными видами спам-ботов.
Инструменты разработки форм
Развитие инструментов разработки позволило упростить создание форм. На смену обычному HTML пришла генерация содержимого форм на основе JSON Schema.
Это выглядит примерно так. Формируется json с полями, их типами, атрибутами и данными:
{
«schema»: {
«message»: {
«type»: «string»,
«title»: «Сообщение»
},
«author»: {
«type»: «object»,
«title»: «Автор»,
«properties»: {
«name»: {
«type»: «string»,
«title»: «Имя»
},
«gender»: {
«type»: «string»,
«title»: «Пол»,
«enum»: [ «male», «female», «alien» ]
}
«magic»: {
«type»: «integer»,
«title»: «Магический номер»,
«default»: 42
}
}
}
}
}
На выходе генерируется форма следующего вида:
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image1227.png)
JSON Schema решают несколько проблем:
- экономят время на разработку форм;
- сокращают общее количество кода;
- делают функционал форм гибким;
- задают понятную всем разработчикам структуру.
Ниже представлены специальные инструменты и библиотеки, с помощью которых возможно упростить разработку веб-форм.
JSON Form
Клиентская библиотека JavaScript для генерации форм Bootstrap 3 на основе схем JSON. Сгенерированные формы включают в себя валидацию данных на стороне клиента.
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image753.png)
React JsonSchema Form
Простой компонент React для создания HTML-формы из схемы JSON с использованием семантики Bootstrap.
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image1126.png)
Formik
React библиотека, которая поможет разобраться с получением значений из состояния, реализовать валидацию, обработку отправки формы, сообщения об ошибках
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image296.png)
Vue Form Generator
Компонент генерирует форму на основе схем для Vue.js. Содержит встроенные валидаторы, 21 тип поля, Bootstrap шаблоны, настраиваемые стили и может расширяться с помощью пользовательских полей.
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image660.png)
Angular Schema Form
Набор директив AngularJS для генерации форм Bootstrap 3 из JSON Schema. Инструмент позволяет настроить порядок и тип полей, использовать редактор wysiwyg, содержит средства выбора даты и цвета. Также доступно множество дополнений для расширения функционала.
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image485.png)
Formspree
Можно подключить готовую форму к внешнему API, чтобы отправлять данные по email. Сервис не требует использовать PHP или JavaScript, нужно просто задать поля. Это особенно полезно для сайтов, которые состоят из статических страниц.
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image381.png)
JSON Forms
Инструмент использует подход создания форм с помощью схем JSON. Включает в себя привязку данных, их валидацию и настраиваемые стили для пользовательских виджетов. Работает вместе с Redux и поддержкой React/Angular.
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image188.png)
Formoid
Необычное решение — программа для генерации форм, которую устанавливают на ПК. Создает формы с разным оформлением Modern Flat, Metro, Bootstrap, Solid. Генерирует не только HTML, но и обработчик PHP для отправки данных с формы.
Конструкторы форм
Еще несколько лет назад сложные формы приходилось разрабатывать вручную. Теперь появилась технология WYSIWYG, которая позволяет создавать формы в визуальном режиме без использования кода. На ее основе создали многочисленные конструкторы. Давайте рассмотрим самые известные.
Google Forms
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image571.png)
Помогает создавать формы (но больше подходит для опросов) в простом интерфейсе, собирать данные в таблицы и просматривать статистику ответов на вопросы пользователей. Формы можно использовать только по ссылке, на сайт поставить их нельзя. Также нет возможности добавить свои стили и скрипты. Тем не менее это хороший инструмент, чтобы провести опрос сотрудников или организовать запись на мероприятие.
TypeForm
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image940.png)
Инструмент с более широким функционалом, чем у Google форм. Позволяет создавать интерактивные формы и опросы с нестандартной логикой перехода между полями. Оптимальный инструмент для маркетологов, когда нужно протестировать идею или собрать контакты для рассылки.
stepFORM
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image1045.png)
Конструктор с простым интерфейсом для создания онлайн-форм и анкет. Позволяет добавить в формы различные расчеты. Это удобно для форм, которые помогают пользователю самостоятельно рассчитать стоимость товара или услуги по выбранным параметрам. Созданные формы можно установить на сайте в виде интерактивного виджета, использовать по ссылке в соцсетях и мессенджерах. Инструмент позволяет добавлять свои скрипты и css код с помощью специального виджета.
jotForm
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image1318.png)
Помогает создавать креативные и персонализированные формы для любых целей с помощью простого механизма перетаскивания. Сервис предлагает инструменты персонализации и брендинга, позволяет редактировать пользовательский css и добавлять скрипты.
Formstruct
![Как сделать веб-формы на сайте удобными и безопасными: инструменты разработки и конструкторы](https://blog-prod-bucket.website.yandexcloud.net/uploads/2019/06/image852.png)
Созданные в сервисе формы можно добавить на сайт стандартным способом или в виде плавающей кнопки — пользователь наводит на нее и видит форму. В инструменте можно настраивать права доступа. Например, чтобы ваши сотрудники могли просматривать и комментировать поступившие заявки, но не могли изменять содержимое самой формы.
Разработка форм на заказ
Направление по-прежнему существует, но продавать индивидуальную разработку становится сложнее — приходится конкурировать с конструкторами. Нужно доказать клиенту, почему он должен заказать разработку у вас, а не использовать конструктор.
На создание веб-формы, в зависимости от сложности, может уходить много времени. Особенно если нужно интегрировать форму с агрегаторами платежей, собирать статистику, складывать заявки в CRM и многое другое. В этом случае разработчику проще взять готовый комплект модулей или сделать на конструкторе. Как правило, в конструкторах есть готовые интеграции сторонних сервисов, которые легко подключаются. Благодаря этому разработчик может сосредоточиться на создании самой формы, а не ее комплектующих.
У конструкторов есть далеко не все нужные возможности. Поэтому многие позволяют использовать кастомный код в формах и предоставляют открытые API, чтобы веб-мастера могли доработать функционал. Поэтому некоторые разработчики делают формы своим клиентам на базе конструкторов. Здесь есть свои плюсы для всех сторон: разработчики приводят конструкторам новых клиентов, взамен предлагают свои услуги и не тратят время на разработку однотипной функциональности. Вполне логично, что они дополняют друг друга.
Часто разработчики допиливают внешний вид формы: расположение элементов и блоков. Ведь каждый клиент хочет индивидуальности, чтобы его форма не была шаблонной и не походила на остальные. Иногда разработчикам приходится подключать малоизвестные сервисы, которыми пользуется только конкретный клиент. Например, его собственную CRM или сервер email-рассылки.
Конструкторы форм и индивидуальная разработка форм — немного разные вещи. Крупная компания может себе позволить выделить или нанять разработчика, если ей понадобится какая-нибудь замороченная веб-форма. Например, форма для бронирования отелей с выбором городов и множества параметров, приемом платежей и интеграцией с CRM. Малому и среднему бизнесу выгоднее сделать недорогую форму на конструкторе и принимать заявки клиентов. Поэтому конструкторы не вытеснят разработчиков форм с рынка окончательно.
Заключение
HTML 5 вместе со спецификацией Web Forms 2.0 хоть и внес вклад в развитие форм, но по прежнему не может заменить JavaScript. JSON Schema позволил работать с содержимым формы максимально эффективно и генерировать динамически всю структуру полей. Кроме инструментов разработки, появилась масса удобных сервисов для не-программистов.
Можно использовать любое решение, в зависимости от потребностей бизнеса и бюджета. Главное, чтобы формы были удобными для пользователей и безопасными — защищенными от писем спам-ботов и взлома сайта через поля.
Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.