Конструктор веб-форм и система для работы с заявками. Форма на сайт
13 лучших конструкторов форм онлайн / Полезное в сети / Постовой
Создание форм – трудное и отнимающее массу времени дело. Это явно не то занятие, за которым Вы бы хотели просидеть целый рабочий день. В основном, формы используются для реализации обратной связи на сайте и лидогенерации в Landing Page. Более сложные формы часто используют для создания каких-либо анкет, опросников и пр. В ситуации, когда требуется много полей, настройка серверных скриптов займет очень много драгоценного времени. На помощь приходят saas-сервисы. С их помощью, используя встроенный конструктор, можно создать в кратчайший срок форму любой сложности без особых усилий. Если же вы не ищете легких путей, предлагаю использовать скрипт для создания форм, который был ранее опубликован на сайте. Многие хотят создавать надежные и удобные веб формы быстро, и явно не в ручную. Оказывается, что создание форм с помощью специально разработанного для данного дела конструктора происходит намного легче и быстрее. Они способны создавать за несколько кликов полезные и хорошо оформленные проекты. Правда, некоторые разработчики берут плату за пользование своим ресурсом, но зачастую это стоит того. К тому же она не настолько большая, чтобы особо повлиять на Ваш бюджет. Мы решили немного сэкономить Ваше время и составили список из 13-и самых лучших онлайн конструкторов форм, наделенных огромным числом функций.
Смотрите также:Калькуляторы расчета стоимости — плагины для Wordpress
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 шаблонов готовых веб-форм. Их легко можно настроить для регистрации, отправки защищенных заказов, опросов клиентов и сбора платежей.postovoy.net
Обратная связь - создаем форму для сайтов на HTML/PHP в Joomla и Wordpress
Трудно сейчас представить сайт без формы для обратной связи.
Поэтому если на вашем ресурсе контактного раздела нет — стоит его установить. Разберемся, как это сделать.
Решения для организации обратной связи
Естественно, что сейчас существует несколько способов организации обратной связи на сайте: от универсальных скриптов на php до плагинов и модулей для CMS. То есть, необходимости писать код вручную, как видите, нет.
Можно воспользоваться следующими универсальными решениями:
- прибегнуть к услугам бесплатных онлайн-сервисов, которые автоматически генерируют код HTML формы связи. Но при этом файл обработки php нужно будет писать и ставить самостоятельно. Вот один из ресурсов для этих целей
- Обратиться к помощи бесплатных онлайн-сервисов, генерирующих код HTML и предоставляющих обработчики данных на php, которые зачастую размещаются на серверах этих сервисов. Один из примеров подобных ресурсов здесь.
- Найти в Интернете бесплатные скрипты для установки формы обратной связи. Этот вариант применим для людей, знающих на определенном уровне HTML и PHP, ведь скрипт в любом случае придется адаптировать конкретно под свой сайт.
Тем не менее, расширенных знаний по сайтопостроению от пользователей зачастую не требуется — универсальность и широкий выбор решений позволяют установить желаемую форму обратной связи любым из вышеизложенных способов.
Простая установка форм обратной связи в HTML
Рассмотрим одну из популярных программ для написания и установки HTML-форм обратной связи с капчей. Широкий их выбор представлен, например, на этом сайте. Сайт русскоязычный, определиться с выбором будет просто, а сама установка займет не более трех минут.
Но для начала следует не забыть внести поправки в стандартный файл config.php — нужно изменить кодировку и написать верный электронный адрес получателя.
Папку с исправленными файлами нужно скопировать в корневой каталог сайта, но перед этим ограничив ее индексацию в файле Robots.txt (Disallow: /sendmail-zakaz).
По сути, это все — если действия выполнены правильно, готовая форма будет выглядеть так:
Существуют конструкторы форм обратной связи, не требующие поддержки РНР. Рассмотрим один из них. После перехода по ссылке вы увидите окно, внося настройки в которое, можно создать желаемую форму.
После того, как все необходимые параметры внесены, следует ввести проверочную капчу и нажать на кнопку «Генерировать», а после — «Получить код».
Полученный код нужно просто скопировать на выбранную страницу сайта.
Можно сделать простую контактную форму собственноручно. Для этого нужно создать файл form.php и сохранить в нем следующий код:
Для функционирования формы нужен файл-обработчик. Назовем его mail.php и сохраним в такой код:
В итоге получится такая форма связи:
Форма обратной связи в Joomla
В этой довольно универсальной системе управления форму обратной связи можно настроить с помощью компонента «Контакты». Он довольно простой, но тем не менее его функциональности вполне хватает для нормальной работы формы.
Итак, для настройки компонента заходим в административную панель и выбираем вкладку «Компоненты/Контакты/Категории контактов».
Откроется страница, на которой не будет ни одной категории. Чтобы создать ее, нажмем на кнопку «Новый».
Система предложит заполнить поля «Заголовок» и «Псевдоним». Сделав это, нужно поставить галочку «Да» в строке «Опубликовано».
Настройки нужно сохранить, нажав одноименную кнопку в правом верхнем углу окна. Категория есть, осталось создать страницу с контактной формой. Для этого нужно зайти во вкладку «Контакты» и нажать на кнопку «Новый» в правом верхнем углу.
Заполняем открывшееся диалоговое окно. Обязательно заполняем строку «Название», строку «Псевдоним»,. Ставим галочку «Да» в строке «Опубликовано» и указываем категорию данного контакта. Перейдя немного ниже, обнаружим окно «Связь с пользователем», где нужно указать контактное лицо-получатель сообщений.
Обязательно заполняется и поле «Информация», где необходимо указать положение формы на сайте и электронный адрес получателя. Остальные пункты меню заполнять можно по желанию.
Сохранить настройки можно, нажав соответствующую кнопку в правом верхнем углу.
Форма обратной связи настроена, осталось расположить ее на сайте. Для этих целей надо перейти на административную панель и, выбрав вкладку «Меню», определиться с местом отражения пункта.
В этом меню создаем новый пункт. Для этого нажимаем кнопку «Создать» и в открывшемся меню выбираем «Контакты/Страница контакта».
Откроется страница, на которой нужно задать название пункта меню, прописать его псевдоним, включить его отражение и в поле основных параметров «Выберите контакт» указать контактные данные, к которым будет привязан этот пункт меню. Сохраняем настройки.
Переходим на сайт, находим пункт «Контакты» и нажимаем на него. Должна открыться следующая страница:
Обратная связь для WordPress
В этой системе форму обратной связи можно создать, также прибегнув к помощи плагинов. Самый популярный и функциональный — плагин Contact Form 7.
Скачать его можно с официального сайта, либо же добавить и активировать через меню административной панели «Плагины/Добавить новый»
В активированном плагине следует пройти во вкладку «Контакты» и скопировать код плагина для формы обратной связи.
После этого нужно проследовать во вкладку «Страницы/Добавить новую», и, включив режим HTML, вставить ранее скопированный код формы обратной связи
Если не нравится название страницы «Контакты», можно переименовать ее как угодно. Также можно ввести все необходимы настройки.
Оформив страницу по своему усмотрению, следует нажать «Опубликовать». Страница готова. Выглядеть она будет примерно так
Создание формы обратной связи на jQuery
Форму обратной связи для библиотеки JavaScript jQuery можно без особых усилий создать с помощью широкого набора плагинов. Многие из них доступны для бесплатного скачивания, например, на этой странице.
В зависимости от плагина, можно выбрать стиль контактной формы — будь то стандартная:
Либо же с эффектом подсветки:
Или же оригинальная дизайнерская в виде печатной машинки:
Справиться с установкой таких форм сможет даже не профессионал.
wildo.ru
21 контактная форма для сайта (обратная связь) на jquery
1. Плагин для создания онлайн форм «jFormer»
Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.
2. Пошаговая форма регистрации с использованием jQuery
Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.
3. Пошаговая форма
Заполнение формы в несколько шагов с проверкой правильности заполнения.
4. Контактная форма для сайта
Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.
5. Анимированное переключение между формами на jQuery
Анимированное переключение с помощью jQuery между формой входа на сайт, формой регистрации и полем для восстановления пароля. На демонстрационной странице нажмите на желтую ссылку для того чтобы увидеть эффект.
6. Выезжающая PHP форма обратной связи
Подобное решение можно использовать для того, чтобы дать посетителю возможность быстро связаться с владельцем сайта с любой страницы. На демонстрационной странице нажмите на стрелочку снизу, чтобы выехала форма.
7. PHP форма регистрации с использованием jQuery и CSS3
Форма с проверкой правильности ввода информации.
8. PHP форма регистрации в стиле Facebook
Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.
9. jQuery контактная форма «SheepIt»
Реализована возможность перед отправкой сообщения добавлять новые поля.
10. Контактная форма «Fancy AJAX Contact Form»
Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.
11. Система авторизации/регистрации на сайте
Выезжающий блок авторизации/регистрации на сайте. Используемые технологии: PHP, MySQL, jQuery, CSS.
12. Форма отправки данных
С проверкой правильности заполнения.
13. Плагин jQuery «Contactable»
Для реализации выезжающей формы обратной связи для быстрой отправки сообщения.
14. jQuery плагин «Formwizard»
Плагин для реализации пошаговых форм на сайте.
15. Контактная форма в стиле старой печатной машинки
16. Эффект свечения на jQuery
Контактная форма с эффектом неонового свечения полей.
17. Проверка правильности ввода данных в форму на jQuery
jQuery форма с анимированными подсказками о допущенных ошибках при заполнении.
18. Стильная форма
Проверка правильности заполнения полей перед отправкой.
19. Форма обратной связи выдвигается сверху экрана
Анимационный эффект выезжающей формы обратной связи сверху экрана при нажатии на кнопку «Contact Us».
20. Форма обратной связи
Аккуратная чистая форма.
21. Пошаговые формы
freeweber.ru
22 лучших формы входа и регистрации на сайте в HTML&CSS!
В этой статье у нас есть для Вас специальная коллекция лучших форм: форма входа и форма регистрации для сайта, созданные с помощью CSS3 и HTML5 технологий, в современном стиле и некоторыми классными эффектами на JavaScript. Смотрите одну из лучших и современных форм входа с эффектами JQuery.
На сегодняшнее время, формы html css, очень популярны, так как всё больше сайтов имеют свою регистрацию пользователей, а это означает, что им нужна будет форма для регистрации пользователей и их входа в личный кабинет (или ещё куда-то).
Чтобы помочь Вам, я подготовил для Вас подборку лучших, на моё мнение, форм, с различным расположением полей ввода, разными цветовыми оттенками и так далее. Некоторые имеют эффекты JavaScript, с 3D переворотами, эффектным появлением.
Я считаю, что веб-дизайн играет важную роль в создании подобных форм, и ему нужно уделить должное внимание. В принципе, форма входа имеет 3 стандартных поля: логин или имя пользователя, пароль, а также кнопка “Войти”.
Итак, затаив дыхание, представляю коллекцию 22 форм регистрации и входа на сайт!
1 → Темная форма входа
Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.
2 → Светлая форма входа
Светлая форма входа с прозрачной рамочкой и четкой структурой.
3 → Эффектная форма с эффектом появления
Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.
4 → Простая форма с эффектом появления
Простая форма, всего 3 стандартных элемента, но с приятным эффектом появления “снизу” с прозрачностью.
5 → Красивая форма с логотипом Apple
Продуманная форма на сайт с интересным дизайном и логотипом apple.
6 → Маленькая форма в розовом стиле
Маленькая и простая, в розовом стиле, и интересным дизайном.
7 → Светлая форма
Светлая, в выдержанном стиле и дизайне, ничего лишнего.
8 → Супер форма входа и восстановления пароля
Форма входа + обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.
9 → Приятная дизайнерская форма с эффектом
Приятная на вид, красивый эффект появления иконок при активации поля ввода.
10 → Форма серого цвета
Серый оттенок, в виде друг на друга наложенных листочков.
11 → Крупная форма с дополнительным элементом
Красивая, с крупными полями ввода данных, и дополнительной выпадающей кнопкой при наведении (её можно использовать для любых, задуманных целей).
12 → Дизайн в виде блокнота
Дизайн формы в виде блокнота, с простыми полями, но выдержанным стилем.
13 → Красочная, прозрачная форма
Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.
14 → Apple Iphone форма
Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!
15 → Чёткая форма с заголовком
Четкая и простая форма, без никаких отвлекающих элементов, и заметным черным заголовком.
16 → Тёмная форма
Тёмная форма с красивой и заметной кнопкой отправки данных.
17 → Черная форма
Черная форма входа с белыми полями – хорошее сочетание цветов.
18 → Горизонтальная форма входа и регистрации
Горизонтальная форма входа и регистрации пользователя, с эффектом 3D переключения между формами.
19 → Темная форма с дополнительными элементами
Темная форма с кнопками входа через социальные сети и красивыми полями.
20 → Форма входа на сайт + регистрация
Регистрация + форма входа, с 3D эффектом переключения между формами и социальными кнопками входа.
21 → Белая форма с красным заголовком
Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.
22 → Форма входа, регистрации и восстановление пароля
Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.
Заключение
Вот они и есть, все формы html css! Надеюсь, какая-то из них Вам точно подошла.
При использовании конкретной формы, Вам остается лишь её (возможно) немного корректировать, подогнать под свой сайт, и все будет супер! Если Вы собираетесь использовать какую-то из форм – дайте мне знать об этом в комментарии!
Данный урок подготовлен для вас командой сайта http://vladmaxi.net Подготовил: Владислав Бондаренкоvladmaxi.net
Форма обратной связи для сайта с отправкой на почту
Приветствую вас всех мои друзья! Сегодня я хочу поделиться с вами уроком. На какую тему? Думаю, вы и сами прекрасно догадались!
Форма обратной связи для сайта, которую я вам покажу – основана на использовании технологии Ajax. Но не волнуйтесь, знать этого вам не надо, все уже готово, останется только установить эту форму и настроить под себя!
Демо
Форма обратной связи php с отправкой на почту
Эта форма обратной связи на сайт очень функциональна сама по себе, к ней подключено несколько плагинов, которые создают привлекательный внешний вид и проверяют валидность (читай правильность) введенных вами данных. Эти плагины работают на великом и могучем JavaScript! А называются так:
1. JQTransform – плагин который позволяет сделать нашу форму обратной связи красивой!
2. formValidator – а этот плагин проверяет форму контактов на правильность введенной информации и в случае чего выводит всплывающие подсказки!
Для полноценной работы этой формы будет использован класс – PHPMailer. Считается одним из лучших!
Заметка для самых умных:Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!
Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!
Поэтому, ваш хостинг должен поддерживать PHP, а для этой формы контактов, PHP должен быть не ниже пятой версии. Надеюсь, понятно излагаю? Тем более, сейчас, любой нормальный хостинг поддерживает эти условия!
Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!
Там все на английском, поэтому нам с Сашей пришлось немного повозиться , что бы русифицировать данную форму контактов и сами плагины, которые подключены к ней.
Признаюсь честно, мы с этой «формочкой» провозились два дня, так как начинали всплывать различные косяки, а недоделанную до конца форму обратной связи, тем более такую красивую, выкладывать не хотелось! Так что если вы любитель все сделать сами, и в вашу светлейшую голову влезет мысль – самому русифицировать данную форму, дам пару советов, так как просто переводом фраз не ограничишься:
1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!
2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!
3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.
4. В оригинальной форме текст в полях ввода прижимался к низу, а не по середине. Это глюк плагина JQTransform.
Ну, вроде все расписал и предупредил. Поехали дальше!
Для тех кто хочет получить уже готовую форму обратной связи:
1. Скачиваем скрипт формы обратной связи для сайта (под видео).
2. Смотрим видео ниже. В нем я рассказал где необходимо менять настройки, что бы форма работала на вас.
Установка формы обратной связи для сайта
И так, смотрите видео по установке формы, там все рассказано. Если возникнут какие либо вопросы – задаем их или на форуме, или здесь в комментах. Если вопрос сугубо технического характера, то лучше на форуме.
ЗЫ: кстати, забыл добавить, что эта форма обратной связи для сайта, работает, даже если у вашего посетителя отключен JavaScript.
master-css.com
Конструктор веб-форм и система для работы с заявками
Создавайте формы в визуальном конструкторе
Форма обратной связи, форма оформления заказа или форма регистрации на мероприятие. Форма отправки резюме для приема на работу или опрос мнения клиентов.
Создавайте формы различной сложности в считанные минуты.
Разместите форму на своем веб-сайте
Нет необходимости устанавливать дополнительное программное обеспечение, форму можно добавить на сайт работающей на любом движке или без него — нужно всего лишь скопировать несколько готовых строчек кода.
Добавьте готовую форму на сайт прямой вставкой в страницу или удобной плавающей кнопкой с краю экрана.
Обрабатывайте поступающую информацию
Получайте заявки по почте, присваивайте им статус и оставляйте комментарии.
Добавьте к системе сотрудников вашей компании и настройте для каждого из них права доступа. Например, ваши сотрудники смогут просматривать и комментировать заявки, но не смогут как-либо изменить настройки формы.
Регистрация бесплатна и займет не более 5 минут. Вы сможете сразу приступить к работе.
Зарегистрироватьсяformstruct.ru
юзабилити форм и рекомендации по его улучшению
Сейчас на каждом сайте можно встретить форму обратной связи, будь то коммерческий или информационный сайт. К сожалению, большинство владельцев сайтов делают формы неудобными для заполнения или показывают их слишком навязчиво, портя впечатление о компании в целом. Давайте разберемся, где и как правильно запрашивать данные пользователя, чтобы было легко взаимодействовать с сайтом.
Рассмотрим особенности каждого вида, чтобы вы смогли выбрать подходящие для вашего сайта или использовать список как чек-лист, чтобы не забыть разместить их все.
Форма заказа обратного звонка
Рекомендуем всем коммерческим сайтам использовать данную форму. Идеальное место размещения – шапка сайта, рядом с номером телефона. Причем не стоит показывать поля ввода сразу, лучше их скрыть под кнопкой «Заказать звонок» и выводить после клика. Не обязательно делать кнопку яркой, в виде ссылки она будет так же хорошо заметна:
В развернутой версии достаточно двух полей «Телефон» и «Имя» и где обязательно для заполнения только первое:
Можно оставить только одно поле для ввода телефона, тоже вполне рабочий вариант, хотя придется у каждого клиента при звонке сначала спрашивать имя:
Также форма обратного звонка пригодится в подвале сайта, разместите ее рядом с контактной информацией. Так после просмотра страницы клиентам не придется возвращаться в начало.
Форма консультации
«Форма-спасатель» для тех пользователей вашего сайта, которые не смогли найти нужную информацию на странице, но хотят сделать заказ. Лучше размещать в одном из двух вариантов: либо в свернутом виде в правом нижнем углу экрана, либо в развернутом – внизу на Главной и на страницах каталога товаров или услуг.
Первый вариант размещения (пример с сайта Танго и Кэш):
Второй вариант размещения (пример с сайта Okna-dpa):
Данную форму часто заменяют онлайн-консультантом, что в принципе одно и то же, но нужно понимать, что понадобится сотрудник, который будет ее поддерживать.
Количество полей так же рекомендуем оставлять небольшим. Спрашивайте имя, а вместо номера телефона можно запрашивать email пользователя (сделайте второе поле обязательным для заполнения).
Ещё данную форму стоит разместить на странице контактов. Обязательно добавьте поле для комментария, чтобы пользователи могли рассказать, по какому вопросу они обращаются в компанию.
Форма обратной связи на странице контактов YouDesign:
Форма заказа услуг
Очевидно, что форму нужно размещать на странице услуги, лучше всего в конце страницы, после описания работ, результатов и цен, чтобы как бы направить пользователя к оформлению заявки после ознакомления с информацией. Выводить поля формы можно сразу, разворачивать после клика по кнопке или перенаправлять в личный кабинет на соответствующую страницу.
Часто на страницах услуг размещают форму заказа обратного звонка или консультации, что не совсем правильно. Клиент уже выбрал страницу услуги, возможно даже тариф, а ему показывается общая форма, где нет выбранной информации. Это дезориентирует. Рекомендуем указывать следующие поля:
- «Вид услуги» или «Тариф» – данное поле лучше заполнять автоматически или разместить в виде текста в начале формы
- «Имя»
- «Телефон» – сделайте поле обязательным для заполнения
- «Email» – чтобы продублировать информацию о заказе клиенту
- «Комментарий» – возможно, у клиента есть уточнения
Каждый бизнес индивидуален и вам могут понадобиться дополнительные параметры, но рекомендуем размещать не более 5-7 полей, чтобы не отталкивать клиента. Если все-таки большого количества полей не избежать, то визуально группируйте их по тематикам, чтобы сократить количество ошибок при вводе информации. Пример простой формы заказа на сайте компании Строя:
Форма заказа товаров
Такую форму лучше показывать пользователю на странице корзины, когда он определился с выбором товаров. Если у вас на сайте есть личный кабинет, то придётся проработать две формы: для авторизованных и неавторизованных пользователей.
Для новых клиентов. Не заставляйте их регистрироваться, чтобы возвратиться к заказу. Так вы только оттолкнете их. Достаточно добавить несколько полей с контактной информацией. Спросите имя, телефон, email и адрес доставки. Так пользователю не придётся совершать лишние действия, а вы получите нового клиента. По email можно сделать автоматическую регистрацию и выслать клиенту пароль на почту.
Пример размещения полей в форме для новых пользователей на Ozon:
Для старых клиентов. Те, кто заказывают повторно, уже указали всю контактную информацию, поэтому в форме помимо списка товаров должны быть только пункты выбора доставки и оплаты. И если вы используете промокоды, то добавьте поле для их ввода, но не более. Не нужно заново просить контакты клиента.
Форма заказа на Wildberries, где даже выводится прошлый выбор способа доставки и оплаты (но оставляют возможность их изменить):
Многие разбивают ввод адреса доставки на несколько полей, отдельно запрашивая индекс, название города, улицы, номер дома и т.д., что выглядит очень громоздко. Антипример с сайта Ангорочка:
Пользователи даже в таких формах допускают ошибки, поэтому лучше оставить одно общее поле ввода адреса и уточнять корректность данных у новых клиентов по телефону.
Обязательными полями для ввода следует сделать контактные данные, адрес доставки, выбор способа доставки и оплаты. Форму можно выводит поэтапно, но и не возбраняется показать все поля сразу. Главное, визуально разделите их на смысловые группы.
Форма регистрации
Рекомендуем отделять ее от формы авторизации, потому что многих новых клиентов дезориентирует кнопка «Войти». Две ссылки рядом не будут занимать много места и сократят время поиска. Также форма всегда должна быть заметна, поэтому лучше разметить ее в шапке сайта. Самый привычный вариант – в верхнем правом углу в виде ссылки (пример от Аква-Вива):
В целом форма должна содержать те же поля, что и форма заказа (и обязательные поля для ввода такие же), поэтому советуем не перегружать ее лишними пунктами и для адреса оформить общее поле. Помните, что регистрация это дополнительные действия для клиента, поэтому не отталкивайте его длинным списком. Можно спросить дату рождения, чтобы отправлять поздравления и скидки, но заставлять клиента придумывать никнейм или указывать дополнительный телефон или адрес – лишнее.
Шикарная практика предлагать клиентам зарегистрироваться через соцсети. Так клиенту не придется придумывать пароль и в целом регистрация пройдет быстрее. Пример использования такой возможности на сайте Asos:
Данный интернет-магазин зарубежный, поэтому приведены популярные соцсети тех стран, для русскоязычной аудитории лучше убрать Twitter и добавить кнопки для Вконтакте, Одноклассников.
Личный кабинет лучше всего подойдет интернет-магазинам для хранения контактных данных клиента, истории заказов, информации о скидках и бонусах. Также подойдет сервисам, работающим по подписке, например, если вы предоставляете доступ к просмотру фильмов в оригинале.
В то же время, если вы продаете промышленные товары, когда каждый заказ сопровождается звонком специалиста, то тогда ни в корзине, ни в форме регистрации смысла нет. Сайтам, предоставляющим услуги, например, по дизайну или ремонту квартир тоже чаще всего не нужен личный кабинет.
Форма авторизации
Как уже говорилось выше, разместить ссылку на форму лучше в шапке, рядом со ссылкой на регистрацию. Наиболее удобная пара полей – «Email» и «Пароль», но еще лучше, если вы также сделаете авторизацию через соцсети.
Пример хорошей формы авторизации от Lamoda, где предлагают два варианта входа на сайт:
Восстановление пароля привычнее всего делать по адресу почты, отправляя клиенту ссылку на форму ввода нового пароля. Генерирование автоматического «временного» пароля заставляет пользователя самому искать форму смены пароля, что неудобно и только лишние заморочки для клиента. Такого лучше не допускать.
Форма подписки на рассылку
Мы уже не раз писали о пользе email-маркетинга и давали советы по его развитию, например, в данной статье и ее второй части наиболее подробная информация. Поэтому форма подписки мастхэв, если вы хотите использовать данный канал привлечения клиентов.
Разместить форму следует на Главной странице, чтобы пользователь сразу увидел, что есть такая возможность. Лучше после всей основной информации, внизу страницы (пример от Lavkalavka):
Если на сайте есть блог, и в письмах, помимо товаров и услуг, вы анонсируете новые статьи, то тогда можно добавить форму на общей странице раздела, например, справа от статей, как это сделало у Vkusnosti by Mado:
В форме подписки, конечно же, нужно поле «Email», и еще можно спросить имя, чтобы сделать письма более персонализированными.
Иногда для подписок имеет смысл завести отдельную страницу. Так у вас будет больше шансов убедить читателя оставить свой контакт. На таких страницах обязательно укажите тематику писем (в идеале, дайте ссылку на пример письма) и опишите как часто они будут приходить на почту (желательно выделить определенный день, число), чтобы пользователь решил, подходит ли ему ваш формат. В октябре 2017 мы обновили свою страницу подписки. Посмотрите как это сделали мы – смотреть страницу подписки.
Теперь когда мы определились, какие формы и где нужно разместить на сайте, выясним как сделать их более удобными для заполнения.
К каждой форме следует подходить индивидуально, поэтому невозможно описать все случаи в одной статье. Главный принцип, которым следует руководствоваться – минимум полей. Лучше позвонить клиенту и уточнить детали устно, чем заставлять его заполнять длинные формы. Возможно у клиента возникли какие-то дополнительные вопросы, тогда звонком вы решите две проблемы.
Надеемся, что наши рекомендации помогут вам сделать на сайте удобные формы и собирать больше заказов. Для тех, кто хочет персональный анализ юзабилити форм, рекомендуем воспользоваться данной услугой.
P.S. Если вам нужна информация о том, как создавать формы (техническая сторона вопроса), нужны рекомендации по коду, удобным конструкторам и т.д., тогда пишите вопросы в комментариях, сделаем по этой теме отдельную статью.
1ps.ru