{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fdlfm"},{"data":{"image":{"id":"5f967e2d1772f52b50379300"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c63vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"257dv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-формы — простой инструмент и один из главных источников лидов на сайте. С его помощью возможно выстроить хороший поток заявок с любой страницы. Чтобы веб-форма приносила стабильный приток прибыли, а не слабый ручеек из не целевых заявок, важно сделать ее удобной для посетителей. И не забудьте о безопасности, если не хотите получать спам вместо лидов.","type":"unstyled","key":"2fa35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c44e3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-формы всегда требовали улучшений. Стандартные средства HTML не могли обеспечить решение многих задач разработчиков. На помощь приходил JavaScript, с помощью которого можно как угодно манипулировать с содержимым страницы. Аналогичная ситуация была и с CSS. Множество анимаций и визуальные эффекты реализовали при помощи скриптов.","type":"unstyled","key":"3emjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4ib2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С появлением HTML5 и CSS3 возможности веб-разработки расширились. Чтобы решить многие стандартные задачи, уже не приходилось использовать скрипты. HTML5 принес с новые возможности для веб-форм, включая спецификацию Web Forms 2.0. Разработчики получили возможность использовать новые значения для атрибута type. Чтобы предложить пользователям удобные веб-формы, можно использовать:","type":"unstyled","key":"dsdov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5sne1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дату и время","type":"unstyled","key":"de0og"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aqb0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Многие сайты, например, бронирования отелей или такси, используют виджеты выборе даты и времени. В HTML5 можно реализовать простой календарь с помощью полей:","type":"unstyled","key":"bc581"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ddg07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"date — год, месяц и день;","type":"unstyled","key":"7trq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"datetime — год, месяц, день, час, минута, секунда, а также часовой пояс (устаревший тип, рекомендуется использовать datetime-local);","type":"unstyled","key":"2f4b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"datetime-local — аналог datetime, без часового пояса;","type":"unstyled","key":"3e9o6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"month — год и месяц;","type":"unstyled","key":"eqkil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"week — год и номер недели;","type":"unstyled","key":"d6vea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"time — время в часах, минутах, секундах, долях секунд.","type":"unstyled","key":"8v463"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bago1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Числовой счетчик","type":"unstyled","key":"e2q57"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6e1ik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для решения многих задач достаточно использовать обычное текстовое поле. Но там, где нужен ввод точного числового значения, можно задействовать поле типа number. Его атрибуты min и max определяют минимальное и максимальное значение, а step — шаг. Пример:","type":"unstyled","key":"7uhp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6u8hu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fllqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b9b5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Слайдер","type":"unstyled","key":"6a91o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a19bs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть много JavaScript библиотек, которые позволяют создать слайдеры или ползунки с выбором значения из заданного диапазона. Сделать простой ползунок теперь можно средствами HTML. Пример:","type":"unstyled","key":"d6eh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6ohrk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Выберите значение от 0 до 50:

","type":"unstyled","key":"70bmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"3kgjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Объем","type":"unstyled","key":"5apkr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"brum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"flo99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Email и телефон","type":"unstyled","key":"842gc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a1tdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самая важная информация, которую собирают через формы — телефон и email. В Web Forms 2.0 предусмотрены поля с такими типами. Пример:","type":"unstyled","key":"6covo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f12ga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"51in7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"bk2na"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Телефон","type":"unstyled","key":"1vegh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"7tcml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"6h1oa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"6s38u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"cmr3f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Ваш email","type":"unstyled","key":"au4n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"56d9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ar78u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбор цвета","type":"unstyled","key":"qadf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3od8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML5 есть поля для выбора цвета. Можно задать любые значения в шестнадцатеричной системе счисления и предложить пользователям выбрать. Пример:","type":"unstyled","key":"7tfeg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f9ul9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Выберите цвет элемента:

","type":"unstyled","key":"64rbd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"1foqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"2pk74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Цвет 1","type":"unstyled","key":"135qq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"dl2ib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"c7h3m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"3lq84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Цвет 2","type":"unstyled","key":"9pqpa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"5vt3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8h3da"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Паттерны","type":"unstyled","key":"cr4qk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fe4i5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут pattern позволяет проверить ввод данных в форму. Пример:","type":"unstyled","key":"33gf0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d0c4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9qpum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1aagm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"et75s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6patj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ajkqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"oh1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Другие полезные атрибуты","type":"unstyled","key":"5hhon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9rspf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML5 есть и другие полезные атрибуты для форм.","type":"unstyled","key":"5jb61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f394i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут placeholder позволяет вписывать текст, который отображается, когда поле пустое, и исчезает при фокусе.","type":"unstyled","key":"e91sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут autofocus автоматически ставит фокус на поле после загрузки страницы.","type":"unstyled","key":"5pcr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут required помечает, что поле обязательное для заполнения.","type":"unstyled","key":"adbv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут autocomplete включает автозаполнение формы (запоминает ранее введенные данные). Отключается установкой значения off: autocomplete=\"off\".","type":"unstyled","key":"3prq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"23d4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Web Forms 2.0 подтолкнули развитие веб-форм вперед. Сегодня анатомия веб-форм значительно усложнилась. Поля и выпадающие списки могут быть связаны между собой и подгружаться динамически при выборе, а на серверной части установлена какая-нибудь система для обработки входящих заявок с отправкой на множество каналов связи (email, sms, CRM, мессенджеры). Поэтому для решения нестандартных задач HTML по-прежнему недостаточно.","type":"unstyled","key":"e7egv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7b4h5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как защитить веб-формы от спама","type":"unstyled","key":"cb82o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4fqqv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проводите валидацию данных. Это защитит от ввода нежелательной информации, поможет избежать взлома сайта через форму. Проводить валидацию можно не только на серверной части, но и на клиентской. Важно, чтобы на серверной части валидация выполнялась всегда, ведь клиентскую легко обойти, просто отключив обработку JavaScript в браузере.","type":"unstyled","key":"2vkbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9a4vd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основной и один из самых простых способов защиты форм от спама — Captcha. Ее вполне достаточно, чтобы не быть заспамленным. В некоторых случаях можно прибегать к другим хитростям по распознаванию и защите от спама.","type":"unstyled","key":"2d0jp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5edkd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Динамическая генерация формы с помощью JavaScript — один из хороших способов не дать спам ботам атаковать ваш почтовый ящик. Ведь, как правило, они разработаны с учетом, что все поля формы заранее отображаются на странице.","type":"unstyled","key":"879t7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a8f0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Еще один простой способ — размещение скрытого поля с каким-нибудь именем, например:","type":"unstyled","key":"370n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1b07b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"erq8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3q145"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользователи сайта не видят поле и не заполнят его. А спам-бот будет автоматически заполнять все поля, чтобы отправка формы прошла успешно. Если скрытое поле оказалось заполненным, значит форму заполнит бот, и данные из нее можно не принимать.","type":"unstyled","key":"7g9vl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bcojj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как правило, спам-боты заполняют форму за считанные секунды, что обычный пользователь не может сделать. Именно поэтому для выявления бота достаточно проверить, сколько времени прошло с момента входа на страницу и отправки формы.","type":"unstyled","key":"dnot6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"902qo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Многие сервисы, например, Akismet, позволяют отфильтровывать спам на основе введенных данных. Если раньше спамер промышлял на других сайтах, сервис поможет это выявить и не допустит отправку нежелательной информации.","type":"unstyled","key":"8o71n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6man4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все перечисленные способы защиты можно использовать в комплексе — это повысит степень защиты перед разными видами спам-ботов.","type":"unstyled","key":"46h7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5cct8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструменты разработки форм","type":"unstyled","key":"377s4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"73mga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Развитие инструментов разработки позволило упростить создание форм. На смену обычному HTML пришла генерация содержимого форм на основе JSON Schema.","type":"unstyled","key":"b9sl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e8u8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JSON Schema решают несколько проблем:","type":"unstyled","key":"9kqsv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"57qfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- экономят время на разработку форм;","type":"unstyled","key":"en4ng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- сокращают общее количество кода;","type":"unstyled","key":"5oc7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- делают функционал форм гибким;","type":"unstyled","key":"5l9s3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- задают понятную всем разработчикам структуру.","type":"unstyled","key":"4pjt0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3r12e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже представлены специальные инструменты и библиотеки, с помощью которых возможно упростить разработку веб-форм.","type":"unstyled","key":"6s4je"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6av9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JSON Form","type":"unstyled","key":"c0u83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dr2pm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Клиентская библиотека JavaScript для генерации форм Bootstrap 3 на основе схем JSON. Сгенерированные формы включают в себя валидацию данных на стороне клиента.","type":"unstyled","key":"6cnbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2csch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React JsonSchema Form","type":"unstyled","key":"v32e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8o1uh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простой компонент React для создания HTML-формы из схемы JSON с использованием семантики Bootstrap.","type":"unstyled","key":"6kifl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ienh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Formik","type":"unstyled","key":"9t4c9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1n0jd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React библиотека, которая поможет разобраться с получением значений из состояния, реализовать валидацию, обработку отправки формы, сообщения об ошибках","type":"unstyled","key":"9elgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3deud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue Form Generator","type":"unstyled","key":"c6uis"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2dv8v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент генерирует форму на основе схем для Vue.js. Содержит встроенные валидаторы, 21 тип поля, Bootstrap шаблоны, настраиваемые стили и может расширяться с помощью пользовательских полей.","type":"unstyled","key":"33esv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7msca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Angular Schema Form","type":"unstyled","key":"29p7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"56bjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Набор директив AngularJS для генерации форм Bootstrap 3 из JSON Schema. Инструмент позволяет настроить порядок и тип полей, использовать редактор wysiwyg, содержит средства выбора даты и цвета. Также доступно множество дополнений для расширения функционала.","type":"unstyled","key":"7slk0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"33bua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Formspree","type":"unstyled","key":"97od9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4s4o7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно подключить готовую форму к внешнему API, чтобы отправлять данные по email. Сервис не требует использовать PHP или JavaScript, нужно просто задать поля. Это особенно полезно для сайтов, которые состоят из статических страниц.","type":"unstyled","key":"39v9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eq5fl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JSON Forms","type":"unstyled","key":"4tq0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"18cab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструмент использует подход создания форм с помощью схем JSON. Включает в себя привязку данных, их валидацию и настраиваемые стили для пользовательских виджетов. Работает вместе с Redux и поддержкой React/Angular.","type":"unstyled","key":"b4hcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3p0a9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Formoid","type":"unstyled","key":"dpmvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ae67q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Необычное решение — программа для генерации форм, которую устанавливают на ПК. Создает формы с разным оформлением Modern Flat, Metro, Bootstrap, Solid. Генерирует не только HTML, но и обработчик PHP для отправки данных с формы.","type":"unstyled","key":"6llg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2v5cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конструкторы форм","type":"unstyled","key":"816f1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cqsb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Еще несколько лет назад сложные формы приходилось разрабатывать вручную. Теперь появилась технология WYSIWYG, которая позволяет создавать формы в визуальном режиме без использования кода. На ее основе создали многочисленные конструкторы. Давайте рассмотрим самые известные.","type":"unstyled","key":"5hvfk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5v535"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Google Forms","type":"unstyled","key":"f495h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9pj78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помогает создавать формы (но больше подходит для опросов) в простом интерфейсе, собирать данные в таблицы и просматривать статистику ответов на вопросы пользователей. Формы можно использовать только по ссылке, на сайт поставить их нельзя. Также нет возможности добавить свои стили и скрипты. Тем не менее это хороший инструмент, чтобы провести опрос сотрудников или организовать запись на мероприятие.","type":"unstyled","key":"6sdoc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3q9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"TypeForm","type":"unstyled","key":"3bq50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"43m8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструмент с более широким функционалом, чем у Google форм. Позволяет создавать интерактивные формы и опросы с нестандартной логикой перехода между полями. Оптимальный инструмент для маркетологов, когда нужно протестировать идею или собрать контакты для рассылки.","type":"unstyled","key":"9i6uf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5omkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"stepFORM","type":"unstyled","key":"e6dsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2vcq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конструктор с простым интерфейсом для создания онлайн-форм и анкет. Позволяет добавить в формы различные расчеты. Это удобно для форм, которые помогают пользователю самостоятельно рассчитать стоимость товара или услуги по выбранным параметрам. Созданные формы можно установить на сайте в виде интерактивного виджета, использовать по ссылке в соцсетях и мессенджерах. Инструмент позволяет добавлять свои скрипты и css код с помощью специального виджета.","type":"unstyled","key":"3ka1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fbdtd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jotForm","type":"unstyled","key":"3nlp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b9oo6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помогает создавать креативные и персонализированные формы для любых целей с помощью простого механизма перетаскивания. Сервис предлагает инструменты персонализации и брендинга, позволяет редактировать пользовательский css и добавлять скрипты.","type":"unstyled","key":"ajgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9blss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Formstruct","type":"unstyled","key":"1o5mp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"af15o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Созданные в сервисе формы можно добавить на сайт стандартным способом или в виде плавающей кнопки — пользователь наводит на нее и видит форму. В инструменте можно настраивать права доступа. Например, чтобы ваши сотрудники могли просматривать и комментировать поступившие заявки, но не могли изменять содержимое самой формы.","type":"unstyled","key":"257t3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"slph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разработка форм на заказ","type":"unstyled","key":"c7cg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"60hdp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Направление по-прежнему существует, но продавать индивидуальную разработку становится сложнее — приходится конкурировать с конструкторами. Нужно доказать клиенту, почему он должен заказать разработку у вас, а не использовать конструктор.","type":"unstyled","key":"2irp9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"vuqa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На создание веб-формы, в зависимости от сложности, может уходить много времени. Особенно если нужно интегрировать форму с агрегаторами платежей, собирать статистику, складывать заявки в CRM и многое другое. В этом случае разработчику проще взять готовый комплект модулей или сделать на конструкторе. Как правило, в конструкторах есть готовые интеграции сторонних сервисов, которые легко подключаются. Благодаря этому разработчик может сосредоточиться на создании самой формы, а не ее комплектующих.","type":"unstyled","key":"dn9cn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6irq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У конструкторов есть далеко не все нужные возможности. Поэтому многие позволяют использовать кастомный код в формах и предоставляют открытые API, чтобы веб-мастера могли доработать функционал. Поэтому некоторые разработчики делают формы своим клиентам на базе конструкторов. Здесь есть свои плюсы для всех сторон: разработчики приводят конструкторам новых клиентов, взамен предлагают свои услуги и не тратят время на разработку однотипной функциональности. Вполне логично, что они дополняют друг друга.","type":"unstyled","key":"4d409"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"pEjCHCbkwXYQBLewXUPR"}],"entityMap":{}},"mentions":[]}