Виды форм заказа на сайтах
Форма заказа услуг
Обычно располагается в конце или сбоку страницы с описанием, портфолио, ценами и преимуществами. Это позволяет сначала ознакомиться со всеми условиями, а уже потом начать заполнять заявку, если информация заинтересовала посетителя.
Обязательные атрибуты:
- Выбор из списка (тарифа или названия услуги);
- Имя пользователя;
- Номер телефона;
- Адрес электронной почты;
- Примечание или комментарий (при необходимости).
Форма для заказа товара
Множество для заполнения может отпугнуть пользователя. Воспользуйтесь одним из следующих подходов:
- создайте отдельную форму для регистрации/авторизации пользователей и сохраняйте их данные, чтобы не приходилось вводить их при каждом новом оформлении заказа. Тогда при последующих покупках останется лишь выбрать способ оплаты и доставки.
- не навязывайте пользователям обязательную регистрацию. Встройте поля для контактных данных в форму оформления заказа и регистрируйте их автоматически после совершения покупки.
Излишние запросы только отталкивают клиентов. Если нужно узнать адрес, предоставьте запись в одну строку. Не делайте отдельные поля для страны, города, улицы, дома, квартиры.
Форма заказа на небольшом товарном сайте
Кроме крупных интернет-магазинов с большим ассортиментом товаров, есть и те, кто занимается торговлей только одного типа товара. Специфика такого рода бизнес модели в том, что в силу узкой специализации подобный интернет-магазин становится экспертом и досконально разбирается в тонкостях своего товара и поэтому тут еще стоит вопрос поддержания репутации.
Интернет-магазин зонтов – всех возможных расцветок, модификаций. Хендмейд наволочки, разных размеров, цветов, фактур. Эти ресурсы объединяет то, что они специализируются на каком-то одном товаре.
Единичные товары можно продавать при помощи корзины или прямой оплаты.
Количество полей сведено к минимуму, 2-3 основных типа и в дополнение может быть поле для комментариев. Весь процесс заключается в отправке простой текстовой информации. Поэтому для их создания можно воспользоваться готовыми решениями из интернет ресурсов.
У крупных маркетплейсов с большим ассортиментом товаров форма оформления заказа намного больше, с целью детальной проработки заказа. Обычно она оформляется на одной странице в несколько шагов:
- Полное имя клиента;
- Информация о доставке;
- Биллинг и платежные реквизиты;
- Список покупаемых предметов;
- Детали товара, такие как количество, размер, стиль и т.д;
- Срок и условия;
- Стоимость доставки.
Какой должна быть форма заказа для сайта.
Важно, чтобы форма не отпугивала посетителя. В первую очередь, не нужно делать процесс сложным или долгим. Постарайтесь собирать только самую необходимую информацию.
- Доступность
Желательно, чтобы посетители ее быстро находили. Не стоит делать всплывающие окна, которые появляются сами собой, оформлять ее анимацией. - Ненавязчивость
Должна собирать только нужные данные и сохранять их. - Сохранение данных
Все введенные данные бережно сохраняются, даже если страница обновилась или пользователь закрыл вкладку. - Встроенная проверка правильности заполнения
Система должна уведомить, если в номере не хватает цифр или не указан домен почтового сервера.
При создании формы оформления заказа имеются общие моменты для сайта, которые стоит учитывать:
Структура
При продаже «цифрового товара» пользователь указывает электронную почту после чего у него автоматически появляется выбор способа оплаты.
Остальные данные должны быть структурированы по важности и иметь логическую последовательность.
Как формировать структуру:
- Сгруппировать связанные вопросы;
- Расположить вопросы по порядку.
Поля ввода
В них пользователи отвечают на вопросы, прописывают пароль, выбирают правильный вариант из списка.
Как формировать поля ввода:
- Отмечайте обязательные поля;
- Если настроена функция заполнения «По умолчанию», убедитесь, что она работает корректно;
- Для номеров телефона желательно использовать маски ввода;
- Переход между полями или их редактирование должны происходить с минимум усилий;
- Лучше подсвечивать вопросы, на которые в данный момент отвечает пользователь.
Метки
Указывайте дополнительный текст, чтобы помочь пользователю правильно ввести данные.
Кнопки действий
Важные кнопки выделяйте цветом, а при наличии других кнопок разместите их отдельно от основных.
Как сделать форму заказа на QForm
Для наглядности опишем процесс создания формы заказа на конкретном примере.
Этапы создания
Добавляем форму в один клик, даем ей название для идентификации на сервисе, и приступаем к редактированию полей. Для перехода нажимаем на форму или на кнопку редактирования.
Задаем поля
Наша форма заказа содержит 5 полей: имя, адрес, телефон, количество товара и кнопку заказа. Путем перетаскивания или нажатием по кнопке + добавляем соответствующие типы полей. При необходимости задаем настройки (тексты внутри поля, дополнительный текст для пояснений, маску номера телефона).
Работаем с оформлением
Выберите тип оформления, настройте элементы: размер, степень скругления.
Выбирайте варианты отображения элементов, уведомлений при валидации, стилизуйте кнопку.
Согласие на обработку персональных данных
Мы выбрали типовое соглашение, но сервис предлагает возможность отредактировать текст и использовать свой вариант.
Настройки уведомлений почты
Настройте уведомления по почте: укажите получателей, есть возможность кастомизировать шаблон письма.
При необходимости можно использовать свои настройки SMTP.
Вставка формы
Скопируйте и вставьте DIV код в то место сайта, где должна быть сгенерирована форма.
Скопируйте и вставьте скрипт в раздел head для вызова формы