Виды форм заказа на сайтах

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

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

Обязательные атрибуты: 

  • Выбор из списка (тарифа или названия услуги);
  • Имя пользователя;
  • Номер телефона;
  • Адрес электронной почты;
  • Примечание или комментарий (при необходимости).

Форма для заказа товара

Множество для заполнения может отпугнуть пользователя. Воспользуйтесь одним из следующих подходов:

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

Излишние запросы только отталкивают клиентов. Если нужно узнать адрес, предоставьте запись в одну строку. Не делайте отдельные поля для страны, города, улицы, дома, квартиры.

Форма заказа на небольшом товарном сайте

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

Интернет-магазин зонтов – всех возможных расцветок, модификаций. Хендмейд наволочки, разных размеров, цветов, фактур. Эти ресурсы объединяет то, что они специализируются на каком-то одном товаре.

Единичные товары можно продавать при помощи корзины или прямой оплаты.

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

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

  • Полное имя клиента;
  • Информация о доставке;
  • Биллинг и платежные реквизиты;
  • Список покупаемых предметов;
  • Детали товара, такие как количество, размер, стиль и т.д;
  • Срок и условия;
  • Стоимость доставки.

Какой должна быть форма заказа для сайта.

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

  1. Доступность
    Желательно, чтобы посетители ее быстро находили. Не стоит делать всплывающие окна, которые появляются сами собой, оформлять ее анимацией.
  2. Ненавязчивость
    Должна собирать только нужные данные и сохранять их.
  3. Сохранение данных
    Все введенные данные бережно сохраняются, даже если страница обновилась или пользователь закрыл вкладку.
  4. Встроенная проверка правильности заполнения 
    Система должна уведомить, если в номере не хватает цифр или не указан домен почтового сервера.

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

Структура

При продаже «цифрового товара» пользователь указывает электронную почту после чего у него автоматически появляется выбор способа оплаты. 
Остальные данные должны быть структурированы по важности и иметь логическую последовательность.
Как формировать структуру:

  • Сгруппировать связанные вопросы;
  • Расположить вопросы по порядку.

Поля ввода

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

  • Отмечайте обязательные поля;
  • Если настроена функция заполнения «По умолчанию», убедитесь, что она работает корректно;
  • Для номеров телефона желательно использовать маски ввода;
  • Переход между полями или их редактирование должны происходить с минимум усилий;
  • Лучше подсвечивать вопросы, на которые в данный момент отвечает пользователь.

Метки

Указывайте дополнительный текст, чтобы помочь пользователю правильно ввести данные.

Кнопки действий

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

Как сделать форму заказа на QForm

Для наглядности опишем процесс создания формы заказа на конкретном примере.

Этапы создания

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

Задаем поля

Наша форма заказа содержит 5 полей: имя, адрес, телефон, количество товара и кнопку заказа. Путем перетаскивания или нажатием по кнопке + добавляем соответствующие типы полей. При необходимости задаем настройки (тексты внутри поля, дополнительный текст для пояснений, маску номера телефона).

Работаем с оформлением

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

Согласие на обработку персональных данных

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

Настройки уведомлений почты

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

Вставка формы


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

Скопируйте и вставьте скрипт в раздел head для вызова формы

Понравилась статья? Поделись!!