Пошаговая форма


Содержание

Урок по созданию форм в html для новичков. Сделайте красивые формы регистрации на своем сайте

Доброго времени суток, любители веб-разработки и желающие сверстать свой собственный сайт. До этого все мои публикации были посвящены основным элементам языка, способам создания различных объектов контента, их форматированию, структурированию и т.д. Освоив предыдущие темы, вы уже можете создать достаточно хороший сайт. Однако он будет неполноценным без сегодняшней темы: «Создание форм в html».

Данный раздел в языке гипертекстовой разметки очень важен. Поэтому уделите его изучению особое внимание, иначе созданный вами веб-ресурс нельзя будет выпустить в продакшн. Таким образом, после прочтения статьи вы узнаете, для чего нужно использовать формы, с помощью каких тегов они создаются, а также сможете опробовать конкретные примеры на практике. Приступим же!

Что такое форма и как она функционирует

Форма – это один из важнейших объектов сайта, который предназначен для обмена информационными данными между сервером и пользователем.

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

Форма задается при помощи специального элемента языка html

Как сделать форму в HTML для сайта

Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.

На рисунке представлена форма регистрации студента на сайте образовательного учреждения.

Для создания формы используется контейнер с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.

Структура простейшей формы:

В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.

Итак, для записи практически всех элементов форм используется тэг с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:

Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию

Пример записи формы с двумя текстовыми полями:

Результат работы формы представлен на рисунке.

В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга

Результат работы кода с текстовой областью представлен на рисунке.

Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги с параметром value, отвечающем за значение элемента и

Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге дописать атрибут selected. Различные возможности построения элемента списка и его код представлены на рисунке.

Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.

Структура записи флажка и радиокнопки:

В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.

Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:


В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:

Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.

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

При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:

Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:

Элемент формы hiddenбудет невидим в окне браузера.

Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:

Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.

Коллекция из 15+ красивых форм регистрации и авторизации

Не будет преувеличением сказать, что более половины всех существующих сайтов имеют форму для авторизации или регистрации. При желании, можно модернизировать, улучшить любую форму. Достаточно знать HTML, CSS и немного JavaScript.

Сегодня хотел поделиться своей подборкой красивых форм. Они могут стать прекрасным стартом для создания ваших, оригинальных web-элементов. В эту коллекцию попали наиболее удачные на мой взгляд формы. Они просты для установки, имеют большое разнообразие «свистелок», легко впишутся в адаптивную верстку, и просто эффектно смотрятся. Представленные формы соответствуют разным стилям: плоские, объемные, и ряд других. Все же, лучше один раз увидеть, чем 100 раз услышать.

Пошаговая форма в WordPress

Bootstrap snippet + Contact Form 7

    Копируем JS и CSS на наш сайт. Без JS кода переходы не будут работать. А стили дают нужный вид форме.

Создаем новую форму Contact Form 7 и копируем в неё HTML код.

Нужно заменить все поля ввода на элементы управления CF7. Не забудьте про кнопку «Отправить» в конце формы.

  • Собственно, всё, дизайн готов. Копируем шорткод на страницу и наслаждаемся. Далее вы знаете как довести форму и тело сообщения до работающей отправки.

Ничего сложного. В сети выложены много готовых сниппетов (на сайтах подобным https://www.bootply.com) и вы легко найдете подходящие для себя, даже если не умеете верстать самостоятельно красивые формы.

Плагин последовательной формы Contact Form 7

Последовательность состоит не из одной, а из нескольких страниц и форм. Иногда это то, что требуется.

Для каждого шага нужно создать страницу и форму. В шаблоне формы вставляется тег multistep, с указанием текущего шага, количества шагов и ссылки на следующую страницу.

Сообщение отправляется последней формой, поэтому в её тело сообщения нужно собрать все нужные теги из остальных/предыдущих форм.

Наверное, не совсем удобно делать несколько форм. Ну а в остальном, плагин полезный.

Плагин конструктор Multi Step Form (не CF7)


Плагин позволяет создать отзывчивую форму с помощью привычного перетаскивания элементов.

Инструкция (https://mondula.com/en/2020/01/06/multi-step-form-anleitung/) абсолютно вся в картинках. Поэтому разобраться не сложно.
За неё разработчику отдельный жирный плюс.

Платные плагины

Подойдет для более сложных дизайнов, лендингов и пр, с большим количеством полей.

Разумеется, этот плагин сделает за вас все сложные технические шаги.

Как видите, варианты есть практически на любую ситуацию, где требуется пошаговое отображение, но единая отправка формы.

Пошаговая форма

Как создавать пошаговые формы регистрации? Поделитесь ссылками.

2 ответа 2

В сети таких примеров много. Искать по словам: jquery пошаговая форма регистрации.

Простенько и со вкусом. )

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35399

13 лучших конструкторов форм онлайн

Создание форм – трудное и отнимающее массу времени дело. Это явно не то занятие, за которым Вы бы хотели просидеть целый рабочий день. В основном, формы используются для реализации обратной связи на сайте и лидогенерации в Landing Page. Более сложные формы часто используют для создания каких-либо анкет, опросников и пр. В ситуации, когда требуется много полей, настройка серверных скриптов займет очень много драгоценного времени. На помощь приходят saas-сервисы. С их помощью, используя встроенный конструктор, можно создать в кратчайший срок форму любой сложности без особых усилий. Если же вы не ищете легких путей, предлагаю использовать скрипт для создания форм, который был ранее опубликован на сайте.
Многие хотят создавать надежные и удобные веб формы быстро, и явно не в ручную. Оказывается, что создание форм с помощью специально разработанного для данного дела конструктора происходит намного легче и быстрее. Они способны создавать за несколько кликов полезные и хорошо оформленные проекты. Правда, некоторые разработчики берут плату за пользование своим ресурсом, но зачастую это стоит того. К тому же она не настолько большая, чтобы особо повлиять на Ваш бюджет. Мы решили немного сэкономить Ваше время и составили список из 13-и самых лучших онлайн конструкторов форм, наделенных огромным числом функций.

Google Forms

Несомненно, Google Формы – это самый лучший и популярный сервис. Этот бесплатный конструктор форм автоматически помещает результаты в электронных таблицах после ответов пользователя. Создание нужных форм облегчают наличием горячих клавиш и сохранением изменений в ваших личных настройках. Все это помогает без проблем отсылать приглашение нужным людям, давать ответы по обычной электронной почте или в социальных сетях.

Wufoo

Данный сервис также является одним из лучших онлайн конструкторов web форм, который способен всего за несколько минут решить все Ваши задачи. Являетесь ли Вы секретарем на предприятии или IT- специалистом, Wufoo поможет вам быстро собрать данные, не написав ни строчки кода.

Formstack


Formstack – это отличный онлайн конструктор веб форм для пользователей сети, оснащенный всеми функциями для оптимизации. Он способен реализовать все Ваши маркетинговые идеи. Вручную набирать код в этом конструкторе веб форм не нужно. Данная программа позволяет интегрировать форму на свой индивидуальный ресурс без особых познаний пользователя в деле программного обеспечения.

iFormbuilder

FormBuilde является уникальным сервисом, на основе облачных вычислений он способен по всему миру собирать данные своим клиентам из мобильных устройств. Кроме того, данный конструктор форм может создавать такие элементы, как форму заявок, форму тестирования, форму заказа и подписки. Пользователи практически на ходу способны вводить данные и даже изменять многие параметры. Это идеальный инструмент для вашей работы.

Formbakery

Это платный, но очень эффективный сервис для создания простых и быстрых форм. Что от вас требуется – перетащить в рабочее поле необходимые элементы (текстовые блоки, кнопки выбора нужных опций, флажки и другое), и ввести адрес, куда вы желаете отправить созданную форму. Генерируемый код, который Вы используете в проектах, читается легко, словно написанный не роботом, а человеком.

FormDesk

Данный ресурс также позволяет создавать свои собственные формы, такие, как анкеты, форму регистрации, результаты различных исследований. Затем Вы можете выложить ее в интернет сайтах, использовать в социальных сетях или в электронной почте. Формы FormDesk расположены на собственном сервере и к ним легко перейти с помощью гиперссылки или фрейма.

Reformed

Reformed — открытый и бесплатный конструктор форм, имеющий прекрасный дизайн, он позволяет очень быстро реализовывать и создавать различные полезные проекты для вашего сайта.

Typeform

Еще один бесплатный онлайн конструктор форм, который удобен для пользователей. Все, что необходимо для работы – это простая регистрация в аккаунте, также Typeform совершенно не требует дополнительных средств.

FormsSmarts

Данный онлайн конструктор форм позволяет создавать отличные формы и публиковать их. Создатели этого сервиса предоставляют несколько способов делиться формами с пользователями мировой сети и получать от них ответы. Большинство клиентов устанавливают их на собственном ресурсе и получают форму ответ по электронной почте или уже сведенные в таблицу серию ответов в виде отчета Excel.

MatchForm

MachForm – это ресурс профессионального уровня, он позволяет создавать формы с максимальной совместимостью. Он работает не только на настольных компьютерах, но и подходит для работы на большинстве мобильных / сенсорных устройств (iPhone, IPAD, Android устройств). Все новые версии Form Builder позволяют легко создавать формы с помощью перетаскивания и вообще без программирования. Он интегрирован с основными платежными системами (PayPal, Authorize.net, Stripe, Braintree). Всего за несколько кликов мышки пользователь создаст прекрасную форму и сможет отправлять онлайн-заказы или принимать платежи.

Email me Form

С данным платным ресурсом пользователь имеет возможность создавать различные онлайн-формы с помощью перетаскивания. Вы также можете перенаправить посетителей на сообщение с заказом или URL.

Form Builder for Bootstrap

Этот конструктор формы обратной связи html форм платный, однако он может быть использован не только веб-разработчиками, но и веб-дизайнерами. Поэтому Form Builder for Bootstrap можно назвать очень универсальным инструментом. Данный инструмент состоит из полезных HTML-элементов, которые с успехом используются в их работе.

Formsite

Если вам нужно построить веб-формы для онлайн-опросов, анкетирования, торговли в интернете и безопасного сбора данных с сайтов, то используйте мощные функции ресурса FormSite. Он позволит легко построить профессиональные онлайн HTML веб-формы. Пользователю можно будет выбирать из более 100 шаблонов готовых веб-форм. Их легко можно настроить для регистрации, отправки защищенных заказов, опросов клиентов и сбора платежей.

Формы для сайта: юзабилити форм

Сейчас на каждом сайте можно встретить форму обратной связи, будь то коммерческий или информационный сайт. К сожалению, большинство владельцев сайтов делают формы неудобными для заполнения или показывают их слишком навязчиво, портя впечатление о компании в целом. Давайте разберемся, где и как правильно запрашивать данные пользователя, чтобы было легко взаимодействовать с сайтом.

Основные виды форм для сайта

Рассмотрим особенности каждого вида, чтобы вы смогли выбрать подходящие для вашего сайта или использовать список как чек-лист, чтобы не забыть разместить их все.


Форма заказа обратного звонка

Рекомендуем всем коммерческим сайтам использовать данную форму. Идеальное место размещения – шапка сайта, рядом с номером телефона. Причем не стоит показывать поля ввода сразу, лучше их скрыть под кнопкой «Заказать звонок» и выводить после клика. Не обязательно делать кнопку яркой, в виде ссылки она будет так же хорошо заметна:

В развернутой версии достаточно двух полей «Телефон» и «Имя» и где обязательно для заполнения только первое:

Можно оставить только одно поле для ввода телефона, тоже вполне рабочий вариант, хотя придется у каждого клиента при звонке сначала спрашивать имя:

Также форма обратного звонка пригодится в подвале сайта, разместите ее рядом с контактной информацией. Так после просмотра страницы клиентам не придется возвращаться в начало.

Форма консультации

«Форма-спасатель» для тех пользователей вашего сайта, которые не смогли найти нужную информацию на странице, но хотят сделать заказ. Лучше размещать в одном из двух вариантов: либо в свернутом виде в правом нижнем углу экрана, либо в развернутом – внизу на Главной и на страницах каталога товаров или услуг.

Первый вариант размещения (пример с сайта Танго и Кэш):

Второй вариант размещения (пример с сайта Okna-dpa):

Данную форму часто заменяют онлайн-консультантом, что в принципе одно и то же, но нужно понимать, что понадобится сотрудник, который будет ее поддерживать.

Количество полей так же рекомендуем оставлять небольшим. Спрашивайте имя, а вместо номера телефона можно запрашивать email пользователя (сделайте второе поле обязательным для заполнения).

Ещё данную форму стоит разместить на странице контактов. Обязательно добавьте поле для комментария, чтобы пользователи могли рассказать, по какому вопросу они обращаются в компанию.

Форма обратной связи на странице контактов YouDesign:

Форма заказа услуг

Очевидно, что форму нужно размещать на странице услуги, лучше всего в конце страницы, после описания работ, результатов и цен, чтобы как бы направить пользователя к оформлению заявки после ознакомления с информацией. Выводить поля формы можно сразу, разворачивать после клика по кнопке или перенаправлять в личный кабинет на соответствующую страницу.

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

  • «Вид услуги» или «Тариф» – данное поле лучше заполнять автоматически или разместить в виде текста в начале формы
  • «Имя»
  • «Телефон» – сделайте поле обязательным для заполнения
  • «Email» – чтобы продублировать информацию о заказе клиенту
  • «Комментарий» – возможно, у клиента есть уточнения

Каждый бизнес индивидуален и вам могут понадобиться дополнительные параметры, но рекомендуем размещать не более 5-7 полей, чтобы не отталкивать клиента. Если все-таки большого количества полей не избежать, то визуально группируйте их по тематикам, чтобы сократить количество ошибок при вводе информации. Пример простой формы заказа на сайте компании Строя:

Форма заказа товаров

Такую форму лучше показывать пользователю на странице корзины, когда он определился с выбором товаров. Если у вас на сайте есть личный кабинет, то придётся проработать две формы: для авторизованных и неавторизованных пользователей.

Для новых клиентов. Не заставляйте их регистрироваться, чтобы возвратиться к заказу. Так вы только оттолкнете их. Достаточно добавить несколько полей с контактной информацией. Спросите имя, телефон, email и адрес доставки. Так пользователю не придётся совершать лишние действия, а вы получите нового клиента. По email можно сделать автоматическую регистрацию и выслать клиенту пароль на почту.

Пример размещения полей в форме для новых пользователей на Ozon:

Для старых клиентов. Те, кто заказывают повторно, уже указали всю контактную информацию, поэтому в форме помимо списка товаров должны быть только пункты выбора доставки и оплаты. И если вы используете промокоды, то добавьте поле для их ввода, но не более. Не нужно заново просить контакты клиента.

Форма заказа на Wildberries, где даже выводится прошлый выбор способа доставки и оплаты (но оставляют возможность их изменить):


Многие разбивают ввод адреса доставки на несколько полей, отдельно запрашивая индекс, название города, улицы, номер дома и т.д., что выглядит очень громоздко. Антипример с сайта Ангорочка:

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

Обязательными полями для ввода следует сделать контактные данные, адрес доставки, выбор способа доставки и оплаты. Форму можно выводит поэтапно, но и не возбраняется показать все поля сразу. Главное, визуально разделите их на смысловые группы.

Форма регистрации

Рекомендуем отделять ее от формы авторизации, потому что многих новых клиентов дезориентирует кнопка «Войти». Две ссылки рядом не будут занимать много места и сократят время поиска. Также форма всегда должна быть заметна, поэтому лучше разметить ее в шапке сайта. Самый привычный вариант – в верхнем правом углу в виде ссылки (пример от Аква-Вива):

В целом форма должна содержать те же поля, что и форма заказа (и обязательные поля для ввода такие же), поэтому советуем не перегружать ее лишними пунктами и для адреса оформить общее поле. Помните, что регистрация это дополнительные действия для клиента, поэтому не отталкивайте его длинным списком. Можно спросить дату рождения, чтобы отправлять поздравления и скидки, но заставлять клиента придумывать никнейм или указывать дополнительный телефон или адрес – лишнее.

Шикарная практика предлагать клиентам зарегистрироваться через соцсети. Так клиенту не придется придумывать пароль и в целом регистрация пройдет быстрее. Пример использования такой возможности на сайте Asos:

Данный интернет-магазин зарубежный, поэтому приведены популярные соцсети тех стран, для русскоязычной аудитории лучше убрать Twitter и добавить кнопки для Вконтакте, Одноклассников.

Личный кабинет лучше всего подойдет интернет-магазинам для хранения контактных данных клиента, истории заказов, информации о скидках и бонусах. Также подойдет сервисам, работающим по подписке, например, если вы предоставляете доступ к просмотру фильмов в оригинале.

В то же время, если вы продаете промышленные товары, когда каждый заказ сопровождается звонком специалиста, то тогда ни в корзине, ни в форме регистрации смысла нет. Сайтам, предоставляющим услуги, например, по дизайну или ремонту квартир тоже чаще всего не нужен личный кабинет.

Форма авторизации

Как уже говорилось выше, разместить ссылку на форму лучше в шапке, рядом со ссылкой на регистрацию. Наиболее удобная пара полей – «Email» и «Пароль», но еще лучше, если вы также сделаете авторизацию через соцсети.

Пример хорошей формы авторизации от Lamoda, где предлагают два варианта входа на сайт:

Восстановление пароля привычнее всего делать по адресу почты, отправляя клиенту ссылку на форму ввода нового пароля. Генерирование автоматического «временного» пароля заставляет пользователя самому искать форму смены пароля, что неудобно и только лишние заморочки для клиента. Такого лучше не допускать.

Форма подписки на рассылку

Мы уже не раз писали о пользе email-маркетинга и давали советы по его развитию, например, в данной статье и ее второй части наиболее подробная информация. Поэтому форма подписки мастхэв, если вы хотите использовать данный канал привлечения клиентов.

Разместить форму следует на Главной странице, чтобы пользователь сразу увидел, что есть такая возможность. Лучше после всей основной информации, внизу страницы (пример от Lavkalavka):

Если на сайте есть блог, и в письмах, помимо товаров и услуг, вы анонсируете новые статьи, то тогда можно добавить форму на общей странице раздела, например, справа от статей, как это сделало у Vkusnosti by Mado:

В форме подписки, конечно же, нужно поле «Email», и еще можно спросить имя, чтобы сделать письма более персонализированными.

Иногда для подписок имеет смысл завести отдельную страницу. Так у вас будет больше шансов убедить читателя оставить свой контакт. На таких страницах обязательно укажите тематику писем (в идеале, дайте ссылку на пример письма) и опишите как часто они будут приходить на почту (желательно выделить определенный день, число), чтобы пользователь решил, подходит ли ему ваш формат. В октябре 2020 мы обновили свою страницу подписки. Посмотрите как это сделали мы – смотреть страницу подписки.

Общие рекомендации по юзабилити форм

Теперь когда мы определились, какие формы и где нужно разместить на сайте, выясним как сделать их более удобными для заполнения.

    Формы во всплывающих (модальных) окнах. Следует выводить их только после клика пользователем по нужной ссылке или кнопке. Никаких «всплывашек» при открытии Главной страницы или при попытке клиентов покинуть сайт. Онлайн-консультант тоже не должен «выскакивать», предлагая начать чат. Такие вещи раздражают и отталкивают пользователей. Антипример от Delicat-Servis (сейчас ребята убрали эту проблему, и форма раскрывается только после клика):


  • Использование анимации. Выделим в отдельный пункт, так как это распространенная проблема. Форма не должна мигать, прыгать по экрану или выплывать на середину экрана для привлечения внимания. Такая анимация мешает пользователю изучать основное содержимое страницы и при долгом просмотре раздражает. Делайте кнопки на формы контрастными, и тогда клиент их точно не пропустит.
  • Название формы. Всегда подписывайте формы, чтобы пользователь видел, что заполняет. Правильно, когда в заголовке прописывается название тарифа или услуги, но если заголовок получается слишком длинным, то добавьте данную информацию в виде текста ниже, как это сделали Fullhousedesign:

    Название полей формы. Лучше всего располагать название поля над ним, а уже внутри поля указать пример заполнения. Если разместить название внутри поля, то оно будет стираться при заполнении, что не совсем удобно. Также плохой вариант, когда названия находятся слева, а поля справа, глазам приходится соотносить колонки между собой (плохой пример формы на сайте Московского дома книги):

    Удобный вариант расположения подписей и подсказок (на сайте Xarakiri.ru):

    Обязательные поля. Всегда помечайте * поля, обязательные для заполнения. Выше при описании форм мы указали, какие выбрать. Исключение составляют формы с один полем – и так ясно, что оно обязательное. Пример выделения обязательных полей от компании Izto:

    Ошибки в формах. Пользователи часто ошибаются и не замечают этого, поэтому рекомендуем добавить проверки ввода для контактной информации и обязательных полей. Сообщения об ошибках лучше выводить в виде текста рядом с соответствующим полем. Они не должны исчезать или перекрывать поля ввода. Можно выделять поле красной рамкой, но сообщение тоже должно присутствовать. Пример понятных сообщений об ошибках от Aristo:

    Подтверждение отправки данных. После того, как клиент заполнил все поля и нажал кнопку отправки, нужно вывести заметное сообщение с подтверждением, чтобы он не пытался заполнить форму повторно. Можно использовать модальные окна или, если форма и так во всплывающем окне, разместить под кнопкой отправки соответствующий текст. Также в сообщении стоит указать, когда конкретно специалисты свяжутся с клиентом или что ему делать дальше. Простого «Спасибо, данные отправлены» недостаточно. Пример подробного подтверждения отправки от компании Кабельные системы:

    Использование «капчи». Не рекомендуем использовать в формах проверку на робота, так как она заставляет пользователей совершать лишние действия и может даже стать причиной ухода с сайта. Используйте незаметные для пользователей методы защиты, например, отслеживайте на сервере время заполнения формы (если оно слишком маленькое, то значит форму заполняет робот), добавляйте скрытые поля (которые сможет заполнить только робот), используйте анти-спам сервисы для проверки и т.д. На самый крайний случай можно воспользоваться проверкой ввода от Google:

  • Сохранение данных. Возможно клиент случайно закрыл форму, случилась ошибка или перезагрузка, и чтобы не пришлось вводить данные заново – сохраняйте их до отправки. Особенно этот совет касается длинных форм.
  • Кнопка сброса данных. Ни в коем случае не размещайте ее рядом с кнопкой отправки, чтобы пользователь случайно не кликнул по ней. Разместите ее в другой части формы или вовсе уберите. Пример неудачного расположения кнопок на сайте Avarit:
  • Закон о Персональных данных. Чтобы избежать штрафов за сбор персональных данных клиентов, необходимо подготовить нормативные документы и написать об этом на сайте. Подробнее о законе и подготовке сайта »
  • Итоги

    К каждой форме следует подходить индивидуально, поэтому невозможно описать все случаи в одной статье. Главный принцип, которым следует руководствоваться – минимум полей. Лучше позвонить клиенту и уточнить детали устно, чем заставлять его заполнять длинные формы. Возможно у клиента возникли какие-то дополнительные вопросы, тогда звонком вы решите две проблемы.

    Надеемся, что наши рекомендации помогут вам сделать на сайте удобные формы и собирать больше заказов. Для тех, кто хочет персональный анализ юзабилити форм, рекомендуем воспользоваться данной услугой.

    Как сделать пошаговую форму?

    Здравствуйте!
    Есть задача реализовать пошаговую форму. Нашел в интернете несколько скриптов и плагинов (например, этот: www.jquery-steps.com/Examples#basic ), но у них у всех один принцип действия: для содержимого используется position:absolute, которому нужно задавать фиксированную высоту. Форма можно содержать разное количество полей, где-то больше, где-то меньше, и как следствие сложно предугадать и прописать высоту. А если этого не сделать, то поля не помешаются и часть из них пропадает.


    Может кто сталкивался с подобным вопросом или даст совет по использованию другого скрипта или плагина?

    Плагин для «живых» форм

    Статья посвящена плагину, который упрощающает жизнь client-side программиста.

    При заполнении формы случается так, что учитывая введенные данные, форму нужно менять (прятать и показывать поля). Простейший пример: при заказе доставки товара пользователь выбрал «самовывоз», значит поля про адрес доставки можно спрятать, зато было бы здорово показать карту проезда для самовывоза.

    И что дальше

    Часто такая логика остается без реализации, однако если вы заботитесь о своих пользователях, то делать это нужно.

    Первый стандартный подход это сделать некий пошаговый мастер, где форма для каждого шага генерируется на стороне сервера. По-моему мнению это неудачный вариант, так как требует муторной работы по разбиению процесса на шаги, написанию тонны кода да удовольствия от работы с такой формой мало.

    Второй подход это писать «портянки» javascript’а который всю эту логику реализует на стороне клиента. Особенно грустно писать «каскадную» логику типа «если ввели a в поле A, показать B, если ввели c в поле B, то показать D. Если в A ввели что-то другое, спрятать B, а потом D».

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

    Решение

    В общем когда возникла потребность реализовывать еще одну такую форму, то было решено написать наконец плагин для jQuery который бы:

    • реагировал на заполнение полей формы
    • позволял описать стандартную логику типа показать, спрятать, добавить вариант в select в одну-две строки
    • сам бы заботился о каскадном выполнении действий и их откате
    • требовал бы для изучения пару минут

    Получившийся плагин я назвал jQuery.grewform (типа растущая форма). Без разглагольствований – простейший пример. Опишем реализованную логику русским языком:

    Теперь посмотрим как эта логика описана с использованием плагина:

    Подробнее

    Далее идёт подробное описание работы плагина. Если вам всё более-менее понятно из приведенного выше примерчика, можете пропустить этот раздел статьи и перейти к описанию возможностей.
    Поведение плагина задается набором правил. Каждое правило состоит из терма и набора действий. После инициализации, а так при каждом изменении формы плагин проверяет терм каждого правила. При проверке определяется соответствие терма текущему состоянию формы. Каждое правило может оказаться в одном из трех положений:

    1. при прошлой проверке терм не соответствовал состоянию, а теперь соответствует
    2. при прошлой проверке терм соответствовал состоянию, а теперь не соответствует
    3. соответствие терма состоянию формы не изменилось

    В первом случае правило помечается как сработавшее, элементы DOM описанные в терме (по сути изменение этих элементов привело к срабатыванию правила) получают метку (добавляется класс) показывающую что на них «висит» сработавшее правило такое-то. После чего запускаются по очереди все описанные в правиле действия. Второй случай более интересен. Аналогично, правило помечается как уже не сработавшее, пометки с элементов удаляются. После чего запускаются негативы действий описанных в правиле (показали что-то? Теперь спрячем!), причем если в процессе в DOM прячутся или удаляются какие-то элементы, то сначала проверяется
    не «висит» ли на них каких-либо правил (см. случай №1), если это так то запускается процесс «отката» для этих правил (работает как случай №2). В третьем случае ничего не происходит.
    Стоит отметить, что про проверке соответствия термов учитываются только видимые элементы формы.

    Возможности

    Выражение по которому определяется не пора ли запускать действия (терм) это CSS/jQuery-совместимый селектор. Если в форме находятся элементы соответствующие селектору, то запускаются действия этого правила. Иногда нужно чтобы правило сработало только при двойном (тройном, четверном. ) условии, для этого можно использовать функцию AND (пример). Это единственное изменение синтаксиса, а точнее дополнение.
    В первом примере используется селектор [value=show]. Особо хорошо знающие jQuery справедливо скажут, что такие селекторы не должны работать если value был изменен в процессе выполнения кода. Однако плагин поддерживает актуальное состояние атрибута value для всех , соответсвенно всё работает как надо.
    Перейдём к описанию разновидностей действий. Вот их список с описанием синтаксиса:

    Как было сказано выше описываются только позитивные события, т.е. только те что должны произойти при срабатывании правила. Действия отката вычисляются автоматически.
    Как видно почти все действия имеют следующий синтаксис:
    название_действия:’селектор элементов’
    Синтаксис селектора так-же полностью CSS/jQuery-совместимый. Над элементами найденными по селетору будет произведено указанное действие. Собственно все действия описаны выше в коде.

    Need help

    Я начал писать этот плагин 2 недели назад и мы уже используем его в 2 формах на продакшне. Буду очень благодарен, если вы попробуете этот плагин и расскажите чего вам не хватает.

    Пошаговая форма

    Показатель отказов – важный параметр работы сайта. Он показывает, насколько ресурс интересен и полезен для пользователей. Соответственно, чем ниже процент отказов, тем вы.

    Несмотря на то, что сайт – это не вещь, его тоже можно потерять. Серьезные проблемы с интернет-порталом могут быть результатом:Посягательств со стороны злоумышленников. П.

    Стоит ли опасаться гнева поисковика, если на страницах сайта присутствуют грамматические ошибки? Этот вопрос волнует всех, кто уже давно распоряжается собственным виртуал.

    Илон Маск рекомендует:  Вёрстка веб-страниц
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL