Сегодня поговорим о формах обратной связи на сайте. Они позволяют получать контакты клиентов, собирать обратную связь, регистрировать пользователей. Вот лишь несколько примеров форм:
- заявка на консультацию;
- подписка на рассылку;
- обратный звонок;
- регистрация;
- оформления заказа;
- онлайн-калькулятор;
- публикация отзывов, идей и предложений.
Самое главное – тщательно продумать структуру формы, что она должна собирать и куда отправлять данные. Когда этот шаг пройден, пора приниматься за создание.
В Qform есть удобный конструктор, который позволит гибко управлять расположением и настройкой полей, оформлять внешний вид и отдельные элементы. В каждой форме по умолчанию отображается ссылка на «Соглашение об обработке персональных данных».
О важности наличия соглашения об обработке ПД в формах на сайте читайте в статье "Коротко и по сути: закон о персональных данных"
С QForm можно:
- встроить форму на сайт кодом или поделиться по ссылке, если нет сайта;
- просмотреть и отследить обработку заявок во внутренней CRM-системе или скачать в виде таблицы;
- настроить уведомления на почту и мессенджеры;
- подключить интеграцию с аналитикой (Яндекс, Google, пиксель ВК) и внешними сервисами (Sigma SMS, Bitrix24, AmoCRM, Sendpulse);
- использовать API сервиса для обмена данными (например, автоматически выгружать заявки в систему 1С);
- использовать вебхуки, чтобы оперативно реагировать на заявки и обрабатывать данные на стороннем сервисе;
- отслеживать статистику форм, отправленных заявок и расхода дискового пространства;
- выбрать язык формы и настроить перевод полей и сообщений.
Итак, начнем: зарегистрируйтесь и авторизуйтесь. Далее нужно добавить и привязать свой сайт. Для этого откройте страницу Мои сайты, кликните на кнопку Добавить сайт вверху страницы и заполните всплывающую форму данными. Сайт добавляется один раз.
Далее перейдите во вкладку Формы, кликните по кнопке Добавить форму и дайте ей название.
Откроется страница конструктора, где слева располагается набор готовых полей, которые можно добавить в форму, а по центру – рабочая область.
Приступим к созданию. Для примера рассмотрим вот такую форму для сбора контактов:
Для начала разместим название формы. Для этого добавьте элемент «Текстовое поле». В «Описание» можно вставить HTML-теги. В поле вводим название формы и делаем из него заголовок <h1>.
Чтобы добавить поле, нужно кликнуть на кнопку «+» или просто перетащить его.
Для всех полей доступно:
- редактирование заголовка, подписи, плейсхолдера;
- указание класса (полезно при добавлении собственных CSS-стилей);
- включение/отключение обязательности заполнения.
Добавьте поле «Имя» и сделайте его обязательным для заполнения.
Под этим полем добавьте в ряд «Телефон» (включите использование маски для удобного ввода номера) и «E-mail».
Можно стилизовать формы, к примеру добавить фоновое изображение. Для этого нужно открыть меню раздела и выбирать пункт «Изображение раздела». Откроется модальное окно, куда загружается картинка.
После того, как форма собрана и стилизована, осталось разместить ее на странице. Перейдите во вкладку «Код вставки», скопируйте DIV для установки формы и вставьте на сайт.
Форма готова к использованию. По умолчанию она будет располагаться в теле страницы. Но есть возможность сделать ее во всплывающем окне. Для этого в настройках формы перейдите в раздел «Настройка отображения формы» и выберите вариант «В виде pop-up». Тогда форма будет появляться при нажатии на кнопку, у которой можно изменить текст, цвет, шрифт и расположить на странице, где она будет заметна.
Заявки будут поступать во внутреннюю CRM-систему. В ней удобно отслеживать и контролировать работу по ним, просматривать источники (полезно для оценки эффективности формы с разных сайтов). Кроме этого, отправлять заявки можно и на сторонние сервисы, используя доступные интеграции, вебхуки или API QForm.
В нашей форме использовался не весь набор полей, есть и другие:
- «Один из списка» и «Несколько из списка». Можно добавлять варианты, перемешивать их последовательность, добавлять иллюстрации.
- «Текст (абзац)». Позволяет вставлять большее количество текста. Например, пользователи могут вписать в это поле дополнительные вопросы или оставить комментарии.
- «Загрузка файлов». Дает возможность прикреплять и отправлять файлы. Можно включить поддержку отправки нескольких файлов, установить ограничение для размера и типов файлов.
- «Дата» и Время». Можно установить допустимые значения для корректного ввода данных.
- «Изображение». Используется для вставки картинки отдельным элементом.
Во вкладке «Дизайн» собраны готовые шаблоны для оформления. Есть возможность настроить:
- тип оформления, размер и скругление полей;
- расположение заголовков, подсказок и предупреждений;
- цвет, тип и размер шрифта для текстовых элементов и кнопки отправки;
- выравнивание и рамку для поля «Изображение»
- цвета для состояние полей (при наведении и в фокусе).
Захотелось попробовать? Вперед!
Переходите по ссылке и становитесь пользователем QForm!
Где еще на нас подписаться и лайкнуть:
ВКонтакте
Telegram
YouTube