Конструкторы форм обратной связи для сайта: бесплатно и платно | Postium

Почему письма не приходят

  1. письма от хостинга фильтруются и не попадают даже в папку “Спам”
  2. хостинг не имеет поддержки (не верно настроена или отключена) PHP-функции mail()

Что делать:

Что такое форма захвата

Форма захвата контактов, как воздух. О ней не задумываешься, когда делаешь сайт и считаешь, что важно всё, но только не она.

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

Форма обратной связи – это окно с полями для ввода данных, текстом и кнопкой для обратной связи с посетителем Вашего сайта.

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

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

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

Закрытая форма

Форма называется закрытой, когда выполнена в виде кнопки или ссылки на сайте, при нажатии на которую появляется развернутая форма с полями. Классика жанра – это кнопка обратного звонка в шапке сайта.

форма захвата на сайте закрытая
Закрытая форма

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

А также, когда она содержит больше 4-х полей и перекрывает часть контента на сайте. В основном в интернет – магазинах. Единственный минус – требует дополнительного клика мыши пользователем.

Лайфхак. Если Вы будете делать сайт самостоятельно, то я рекомендую конструктор – InSales. Там уже есть готовые шаблоны с очень крутыми формами захвата и прочими фишками для повышения конверсии. К тому же по промокоду “inscale” 30 дней бесплатно. Кликайте и тестируйте -> InSales.

Окно благодарности после отправки формы

Это та самая “галочка”, которая появляется на экране монитора, после отправки формы пользователем.

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

форма захвата на сайте страница спасибо
Окно благодарности

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

E- mail маркетинг успешно работает, что бы о нем не говорили. Поэтому одним из видов формы является “Подписка на рассылку”.

Цель её – взять e-mail адрес пользователя для дальнейшей продажи Ваших продуктов с помощью рассылки (например, через сервисы: UniSender, Notisend)

форма захвата на сайте подписка на рассылку
Подписка на рассылку

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

форма захвата на сайте подписка на рассылку варианты
Подписка на рассылку через соц.сети

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

Достаточно всего одного поля с указанием адреса почты. Ну максимум ещё имени. Конечно, лучший эффект Вы получите, только когда человек чётко поймёт на сайте что он получит взамен за свой контакт.

Поэтому тут название “Подписка на рассылку” больше общее. Вы можете также просто предложить взамен на контакты получить какой-нибудь подарок. Например, мы часто предлагаем 300 способов рекламы.

форма захвата на сайте подписка за бонус
Подарок в обмен на контакты

Интересно. Оценивайте качество рекламных каналов с сервисом сквозной аналитики Roistst. С его помощью вы узнаете Слабые места воронки продаж, сократит рекламный бюджет и увеличите прибыль. Кликайте -> Roistat. (по промокоду “INSCALE1120” 7500 руб. на баланс сервиса для тестирования)

Цвет формы

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

Диссонанс или отсутствие гармонии в цвете будет вызывать дискомфортное чувство.

Здесь необходимо работать с цветовым кругом Иттена, тоном, насыщенностью, шумом и т.д. Лучше всего с этим справится дизайнер.

форма захвата на сайте цвет формы
Цвет формы

Заказ обратного звонка

Пожалуй, самый распространенный вид формы обратной связи. Особенно если Вы работаете по своему городу.

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

форма захвата на сайте обратный звонок
Обратный звонок

“Заказать звонок” лучше размещать рядом с номером телефона в “шапке” сайта. И не обязательно это должна быть кнопка.

Форма может появится после нажатия на текст, который можно выполнить в виде ссылки (подчёркнута пунктиром и выделена цветом)

форма захвата на сайте позвоните мне
Форма захвата – обратный звонок

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

Но есть небольшой минус, хоть и не значительный – имя клиента должен будет узнать менеджер.

форма захвата на сайте заказ звонка
Заказ звонка

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

Каптча

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

forma-zaxvata-na-sajte-captha
Каптча

Минус – добавляет сложности в заполнении формы пользователем. И иногда именно каптча становится причиной ухода посетителя с сайта. Непонятные надписи, неразборчивые буквы. В общем, сложно все.

Если подумать, то проблема спама и ботов на ресурсе не является проблемой Ваших клиентов. Она Ваша. Так что старайтесь избегать или делать каптчи простыми (invisible reCAPTCHA от Goog) или в полу-игровой форме, с использованием изображения.

forma-zaxvata-na-sajte-captha-vibor
Каптча в игровой форме

Открытая форма

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

форма захвата на сайте открытая
Открытая форма

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

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

Форма связи без JavaScript

  1. в большинстве случаев расширение файла должно быть .php
  2. при нажатии клавиши F5 форма будет отправлена снова
  3. после отправки формы страница будет перезагружена
  4. проверка на правильность заполнения полей осуществляется не на стороне сервера

Цвет кнопки

О… Ну на эту тему можно написать целую диссертацию. Со времен повального распространения интернета между маркетологами, дизайнерами и вэб-программистами всегда существовали споры.

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

Мы пришли к одному глобальному выводу, главное, чтобы кнопка была контрастной относительно фона. Это будет выделять её.

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

Двойная форма

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

форма захвата на сайте двойная
Двойная форма

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

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

Создать подходящую форму и повысить конверсию сайта помогут сервисы из подборки

Консультация

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

форма захвата на сайте консультация
Консультация

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

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

форма захвата на сайте консультация данные
Обратный звонок

Лайфхак. Хотите быстро и безопасно накрутить активность в интернете? Тогда рекомендуем Вам сервис TaskPay. В личном кабинете Вы сможете выбрать любое массовое действие, указать кол-во и срок исполнения. А самое главное исполнителями будут 100% живые люди. Кликайте и тестируйте -> TaskPay

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

форма захвата на сайте бесплтаная консультация
Бесплатная консультация

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

Политика конфиденциальности

Помните о Законе N 152-ФЗ “О персональных данных”. Нет?! В общем закон Российской федерации гласит, что Вы не имеете собирать контакты людей без их согласия.

А их согласие это установка галочки в специальном чек-боксе под кнопкой (расположение может быть любое).

форма захвата на сайте политика конфиденциальности
Политика конфиденциальности

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

Цвет полей

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

форма захвата на сайте цвет полей
Цвет полей

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

Бонус

Надеюсь, Вы еще не уснули. Собственно, бонусы в Вашем бизнесе тоже влияют на конверсию лид-формы.

Например, Вы предлагаете человеку заказать выезд на замер, а дополнительно к этому обещаете, что бутылка шампанского в подарок, даже если человек ничего не купит.

Похожее:  Простой способ в личный кабинет Велком войти по номеру телефона
форма захвата на сайте бонус
Какой сюрприз!

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

Размер формы и её частей

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

Если это молодёжь, то тут главное, чтобы она была заметна и красиво вписалась в дизайн, а размер уже будет второстепенным.

форма захвата на сайте размер полей
Размер формы и её частей

Расчёт / калькулятор стоимости

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

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

форма захвата на сайте расчет стоимости
Расчет стоимости

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

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

Кстати. Если Вы хотите сделать квиз самостоятельно, то используйте конструкторы Marquiz или Envybox ( “in-scale” 500 руб. на баланс). Это самые ТОПовые сервисы, с ними создание квиза обойдется в считанные минуты.

Но не обязательно так заморачиваться, в некоторых случаях достаточно просто сделать кнопку с обычным предложением “Рассчитать стоимость” или “Получить предложение с ценами”.

Например, именно так у нас было реализовано на первом экране нашего сайта по разработке landing page.

форма захвата на сайте узнать цены
Узнать цены

Онлайн-консультант

Онлайн-чат тоже относится к форме обратной связи, хоть и косвенно. Но мы не оставим его без внимания.

Поэтому если Вы уверены, что у посетителя возникнут какие-либо вопросы по продукту и менеджер в чате может закрыть его на последующую ступень воронки продаж, то внедряйте онлайн консультанта на свой ресурс. И самые ТОПовые – это Jivosite (по промокоду “inscale” 30 дней бесплатно 5 операторов) и Talk-me (по промокоду “INSCALE” 7 дней бесплатно). Тестируйте на здоровье.

форма захвата на сайте онлайн консультант
Онлайн-консультант

Только фраза в примере выше – это приветствие у тысячи сайтов. И у Ваших конкурентов. Поэтому убирайте шаблоны.

Подстраивайтесь под специфику Вашей ниши. Если Вы продаете детские игрушки, то можете написать такое приветствие: “Здласти! Если Вы не мозете опледелица с выболом, написыте нам в цят и полуците всю инфолмацию )))”

Нелепо, но прикольно. А позитив и смех, поверьте, больше располагает, нежели сухое: “Здравствуйте, чем могу помочь?”.

И есть ещё одна хорошая новость, в своей практике мы поработали с большим количеством онлайн-консультантов и естественно за это время выбрали лучшие. О них мы написали статье.

По теме: Обзор онлайн консультантов для сайта: якобы рейтинг.

Поля для ввода

Этот пункт применим для сайтов, в которых форма располагается на отдельной странице. Нет необходимости поле “Ваше имя” делать на всю ширину страницы. Или, даже, наполовину.

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

форма захвата на сайте поля для ввода
Поля для ввода

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

Располагать его слева от полей, сверху или внутри поля? Если текст внутри поля, то при вводе данных он исчезает, поэтому его необходимо дублировать. Удобнее делать это над полями, но если позволяет дизайн формы.

Важно. Выжимайте из бизнеса максимум с помощью нашей методички формата “фишечная стратегия”. В ней самый сок из сотен тренингов и книг по маркетингу и продажам. А также концентрат успешных действий. По ссылке скидка 50% в течение 4 часов, кликайте -> “200 фишек маркетинга: от привлечения до удержания“

Призыв

Миксуйте банальные призывы к действию с небанальными. Например, у студии дизайна в блоке “Портфолио” глупо делать основной призыв к действию – “Заказать звонок”. Лучше будет написать “Хочу также”.

форма захвата на сайте призыв к действию
Призыв к действию

Либо, если Вы представляете продукт, у которого много преимуществ, но он требует подробной консультации, можно использовать призыв – “Еще больше плюсов”.

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

форма захвата на сайте необычный призыв
Необычный призыв к действию

Заголовок и подводка к форме

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

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

форма захвата на сайте текст
Заголовок и подводка к форме

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

Форма входа и регистрации

Эта форма обеспечивает доступ к дополнительной информации или возможностям ресурса на пробный период. Опять же, никаких лишних действий для пользователя. Достаточно трех полей: “Имя”, “E-mail” и “Пароль”.

форма захвата на сайте попробовать бесплатно
Форма регистрации

Казалось бы, проще простого, но… Можно сделать еще проще: сгенерировать пароль за пользователя и избавить его, в очередной раз от перебирания в голове дат рождения своих родных.

форма захвата на сайте генерация пароля
Генерация пароля

Только если вдруг Вы сервис, то не смешивайте между собой форму “Вход” и “Регистрация”. У этих форм хоть и нет большого отличия, но они предназначены для разных задач.

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

форма захвата на сайте вход и регистрация
Формы вход и регистрация

Важно. Допиливать сайт до идеала, конечно, хорошо, но многие забывают про самое главное – систему оплаты. И наш выбор – Yookassa. Внедряется легко и есть решение для отправки чеков в налоговую. Кликайте -> Yookassa

Анимация

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

Но делать так, чтобы кнопка, как в припадке, постоянно дёргалась – это идея уже плохая.

форма захвата на сайте анимация кнопки
Да куда она опять?

Поп ап с формой обратной связи

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

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

форма захвата на сайте обратная связь с бонусом
Спец.предложение

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

Только умоляю Вас, настройте нормальную логику его появления. Этот поп-ап не должен вылетать на каждой странице через 2 секунды движения мышки.

Всё должно быть логично, и тогда даже можно будет тестированием не заниматься.

Иконки

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

форма захвата на сайте иконки
Иконки

Checkbox

Настало время добавить ‘checkbox’ с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.

Создаем разметку в форме, определяем в ‘config.php’ обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.

Итак, checkbox. Добавим разметку:

Elfsight

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

Плюсы: регулярное обновление ПО, обеспечивающее быстрое устранение ошибок и высокую скорость работы.

Минусы: для установки сервиса необходима помощь технической поддержки.

Ограничения бесплатной версии: 1 веб-сайт, 200 просмотров формы, брендирование Elfsight.

Стоимость: от 60$ в год.

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

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

Плюсы: удобный конструктор, много шаблонов.

Минусы: часть интерфейса на английском.

Стоимость: от 15 $ / мес. (при оплате за год — скидки),  14-дневная пробная версия. Ознакомиться с продуктом →

Formdesigner

Проверен временем и многими пользователями. Позволяет создать любую форму обратной связи, опроса, голосования, формы заказа или онлайн-калькулятор. Недавно появилась возможность создавать квизы. В визуальном редакторе доступны 30 типов элементов веб-форм и 9 тем оформления.

Плюсы: высокий уровень технической поддержки.

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

Ограничения бесплатной версии: 3 формы по 10 элементов, до 100 записей.

Стоимость: от 350 р./мес., 7-дневный пробный период.

Formsite

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

Плюсы: лучшее обеспечение безопасности (среди бесплатных конструкторов), шифрование текста.

Минусы: ограниченные возможности бесплатной версии,

Ограничения бесплатной версии: 5 форм размером не более 50 Мб и 100 показов в месяц, ежедневный отчёт вместо уведомлений по электронной почте.

Стоимость: от 19,95$ в месяц и 199,95$ в год, 14-дневный пробный период.

Похожее:  Configuring Apache for SSL Client Certificate Authentication - Stuff… And Things…

Formy

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

Плюсы: файлы хранятся на сервере и передаются по защищённому протоколу; рендеринг формы происходит мгновенно без обновления страницы; форму можно создать и использовать, даже не имея сайта (для этого у сервиса есть собственный сервер); создаваемые формы контролируются на вопрос соответствия 152-ФЗ.

Минусы: в бесплатной версии можно оформить лишь 1 форму.

Ограничения бесплатной версии: 1 форма на 500 записей, 40 Мб для файлов.

Стоимость: 4 р./день

Google forms

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

Плюсы: 100% бесплатный, статистика по показам сохраняется в таблицу Google (гораздо удобнее локальной базы данных, т.к. позволяет легко отслеживать результаты и делиться ими).

Минусы: ограниченные возможности персонализации.

Ограничения бесплатной версии: нет.

Стоимость: бесплатно.

Jotform

Сервис известен как один из лучших визуальных конструкторов форм, благодаря обилию типовых шаблонов (самая большая коллекция 10000 бесплатных вариантов), стилей и шрифтов. Русскоязычный интерфейс. Принимает от 30 различных платёжных шлюзов. Интегрируется с Dropbox, Google Docs и другими сервисами.

Плюсы: мобильное приложение.

Минусы: служба поддержки долго отвечает по электронной почте.

Ограничения бесплатной версии: 5 форм размером не более 100 Мб и 100 показов в месяц, получение не более 10 платежей в месяц, брендирование JotForm, отсутствие шифрования.

Стоимость: от 19$ в месяц и 189,96$ в год.

Qform

Совершенно бесплатный конструктор веб-форм. Интуитивно понятный функционал: защита форм от спама, создание индивидуального дизайна с помощью визуального редактора или использование готовых шаблонов, интеграция с различными сервисами (amoCRM, Битрикс24, Билайн АТС и другие) и удобный журнал лидов. Русскоязычный интерфейс.

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

Минусы: не отмечено.

Ограничения бесплатной версии: нет.

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

Stepform

Конструктор позволяет создавать формы и квизы в визуальном редакторе. Готовые тематические шаблоны для сфер строительства, ремонта, подбора персонала и бизнеса в сфере услуг. Шаблоны можно персонализировать. Есть функции защиты от спама и подключения онлайн-платежей (Яндекс.Касса, Яндекс.Деньги, Wallet One, PayPal). Русскоязычный интерфейс.

Плюсы: внутренняя CRM.

Минусы: ограниченное количество интеграций (например, Telegram и amoCRM ещё в разработке).

Ограничения бесплатной версии: 5 форм по 20 элементов, 50 ответов и 5000 просмотров в месяц.

Стоимость: от 174 р./мес., 7-дневный пробный период.

Ucalc

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

Плюсы: интуитивно понятный и приятный интерфейс.

Минусы: не отмечено.

Ограничения бесплатной версии: 3 проекта, 100 почтовых уведомлений, функция SMS-уведомлений ограничена.

Стоимость: от 4$ в месяц, от 21,6$ на полгода, от 38,4$ в год, от 90$ постоянная лицензия.

Wufoo

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

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

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

Ограничения бесплатной версии: 5 форм по 10 полей, 100 показов в месяц, отсутствие функции загрузки файлов.

Стоимость: от 19$ в месяц и 169$ в год.

Автоматическое скачивание файла

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

Будем отталкиваться от того, что файл, который автоматически будет скачиваться после отправки формы, лежит в папке “files”, которая, в свою очередь находится в корне вашего проекта.

Теперь, после успешной отправки нам необходимо добавить “Window.location” со ссылкой на расположение файла. Я предпочитаю делать это с небольшой задержкой, чтобы пользователь успел понять, что произошло, а именно увидеть сообщение об успешной отправке. Можно, конечно, и прелоадер “прикрутить”, но это уже дело вкуса.

Напоминаю, что сигналом о том, что сообщение успешно отправлено у нас является строка пришедшая в файле “mail.js”. Вот тут:

if (respond.success) {
//.
// some code
//.
}

Сюда и будем добавлять ссылку на файл. Поставим задержку в 1 секунду при помощи “setTimeout”.

if (respond.success) {
 setTimeout(() => {
  window.location = '/files/test-file.docx';
 }, 1000);
}

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

Важно

Для корректной работы потребуется:

Как вам такой формат статей? Нужно ли делать настолько большие?

Валидация формы перед отправкой

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

Все вам понадобится дополнительная валидация, все это реализовано в файле ‘valid.php’.

Ввод текста в input

Элемент <input> является универсальным, в отличии от элемента <textarea>. С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.

Изменим нашу форму.

Уже лучше, давайте добавим поле с адресом электронной почты.

Все хорошо, но не хватает нормальной группировки элементов.

Выбор даты

Выбрать дату можно с помощью типа date все того же input’а. Полный код: <input type=”date” />.

Добавим в нашу форму возможность выбора даты.

Результат.

Выпадающий список

Выпадающий список создается с помощью тега <select>, а элемент списка с помощью <option>. Давайте создадим в нашей форме возможность указать адресата.

Результат.

Где размещать

Обычно применяют два вида размещения формы:

  • На отдельной странице в случае, если форма содержит много полей.
  • На странице «Контакты» под заголовком «Напишите нам».

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

Группировка элементов управления в html-форме

Давайте немного изменим форму, а именно:

Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.

Ну что же, уже лучше. Не хватает кнопок.

Два вида коммуникации с посетителем

  • Отправка на email. После заполнения предложенных полей форма отправляется на e-mail администратора сайта. Все дальнейшее общение происходит посредством обмена электронными письмами или выходом в офф-лайн (телефон и т.п.).
  • Отправка в систему управления сайтом. После заполнения администратор сайта видит запрос в списке заполненных данных в CMS, и там же может его обработать. К примеру, таким образом может быть реализована гостевая книга или система «Вопрос-ответ». Покупка товаров в интернет-магазине работает подобным образом.

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

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

Для чего нужна обратная связь

  • Ответы на вопросы посетителей.
  • Анкетирование.
  • Прием заказов посредством сайта.
  • Прием заявок на обратные звонки.

Добавление файла

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

Разметка:

Другие популярные элементы

Продолжим дополнять нашу форму. Добавим несколько элементов.

Зависимый переключатель

Зависимый переключатель создается с помощью тега  input и его атрибута type=«radio». Соответственно в зависимом переключателе можно выбрать только один варинат.

Как должна выглядеть форма захвата

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

Цвет, форма, размер, текст, кнопка, расположение. Каждая мелочь влияет на эстетическое восприятие пользователя.

Как сделать форму обратной связи на сайте

Для разработки необходимы знания php, html и javascript. На CMS существуют разные конструкторы, позволяющие сделать сервис обратной связи, также можно воспользоваться сервисами в интернете. Но все же предпочтительнее первый способ. Вы, как администратор сайта, должны точно знать, какие механизмы применяются для отправки сообщений.

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

Кнопка отправки формы

Кнопка отправки формы на сервер создается с помощью тега <button> (от англ. button — кнопка)  с типом submit (от англ. submit — разместить). Полный HTML-код  кнопки отправки формы на сервер: <button type=”submit”>Отправить</button>.

Кнопка очистки формы

Тут по аналогии, только вместо submit мы пишем reset (от англ. reset — сбросить). Полный HTML-код кнопки очистки формы: <button type=”reset”>Очистить</button>.

Давайте дополним нашу форму.

Результат.

Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?

Похожее:  Росденьги: как узнать задолженность онлайн, посмотреть сумму долга, проверить, узнать, официальный сайт, по фамилии

Кнопки в html-форме

Добавим две кнопки:

Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).

Кнопка «Очистить» будет очищать все введенные в форму данные.

Коротко о главном

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

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

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

  1. Забота о пользователе – вот что должен чувствовать посетитель.
  2. Его мысли должны совпадать c Вашей формой связи.

Критерии выбора конструкторов веб-форм

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

Статья в тему: Как сделать мультилендинг

Маска ввода номера телефона

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

Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять ‘jQuery Mask Plugin’ из статьи, ссылку на которую дал выше.

Подключаем после jQuery. Я делаю это так:

Независимый переключатель

Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.

Добавим эти элементы на нашу форму.

Результат.

На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.

Область для ввода сообщения

Конечно же многим из вас может понадобится поле для ввода сообщения. Для того, чтобы получить его мы воспользуемся тегом ‘textarea’. Добавьте следующую разметку в форму:

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

Для того, чтобы очистить форму обратной связи после успешной отправки, нужно добавить несколько строк кода в файл “mail.js”. Давайте сделаем это. В первую очередь сохраним в переменную класс формы на которой сработало событие “submit”.

Чуть ниже, там где получали “id”, добавим переменную “formClass” и передадим класс формы:

.
.
let form = $('#'   $(this).attr('id'))[0];

// Сохраняем в переменную класс формы
let formClass = $(this).attr('class');

// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
let inpNameError = $(this).find('.contact-form__error_name');
.
.

А когда срабатывает событие success, при успешном ответе сервера, добавим саму очистку полей. Заменим это:

if (respond.success) {
  formDescription.text(respond.success).fadeIn();
  setTimeout(() => {
    formDescription.fadeOut("slow");
  }, 4000);
  setTimeout(() => {
    formDescription.text('');
  }, 5000);
}

На это:

if (respond.success) {
  formDescription.text(respond.success).fadeIn();
  $('.' formClass).find('input').val('');
  $('.' formClass).find('input').prop('checked', false);
  $('.' formClass).find('textarea').val('');
    setTimeout(() => {
      formDescription.fadeOut("slow");
    }, 4000);
    setTimeout(() => {
      formDescription.text('');
    }, 5000);
}

Теперь, при успешной отправке, очистятся чекбоксы, обычные поля и textarea.

Переброс на страницу благодарности

Как и говорил в начале статьи данная форма может работать как без перезагрузки, так и с перебросом на страницу благодарности. Давайте реализуем это. Нам понадобится немного подправить код в файле ‘mail.js’ и сама страница благодарности. На скриншоте со структурой проекта вы видели файл ‘thank-you-page.php’ – это и есть страница благодарности, которую я буду использовать. Как вы могли заметить, он лежит в корне. У вас она может быть где угодно, главное правильно указать к ней путь.

Итак, открываем файл ‘mail.js’, находим участок кода:

if (respond.success) {
   formDescription.text(respond.success).fadeIn();
   setTimeout(() => {
	formDescription.fadeOut("slow");
   }, 4000);
   setTimeout(() => {
	formDescription.text('');
   }, 5000);
}

И заменяем на:

if (respond.success) {
  window.location.replace("/thank-you-page.php?status=success"); 
}

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

Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.

Если у вас уже страница в ‘html’, просто измените расширение. Это никак не повлияет на работоспособность.

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

Переключатели

Переключатели бывают зависимые — можно выбрать только один вариант и независимые.

Правила хорошего тона

После заполнения полей и отправки сообщения посетитель должен получить на экране ответ типа «Спасибо за ваш вопрос. Мы ответим вам в течение 1 часа». Если посетитель не получает ответ в течение установленного времени, его расположение к вам резко падает.

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

Проверка заполнения формы

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

Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.

Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».

Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:

Иные проверки (валидации) выполняются с помощью PHP или JS кода.

Структура

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

Как правило, обязательными к заполнению являются поля: ФИО, телефон, e-mail, ваш вопрос. Самая простая страница коммуникации должна содержать эти поля.

Помимо текстовых полей, страница может содержать элементы выбора.

Пример сервиса обратного звонка

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

Пример усложненной формы обратной связи для заказа

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

Структура проекта

Здесь нас интересует папка ‘mail’. Именно тут и происходит вся магия.

Обратите внимание, что она лежит в корне сайта.

В первую очередь давайте разберем файл ‘config.php’. Тут задаются основные настройки формы.

Тег <form> — создание формы

Для создания формы в HTML используется тег <form>. Все, что находится между открывающим и закрывающим тегом является элементами управления формой.

Итак, наш первый код.

У тега <form> есть два обязательных атрибута:

  • action — ссылка на скрипт, обычно PHP, который будет обрабатывать форму. А точнее, который будет обрабатывать введенные  форму данные.
  • method — метод отправки данных на сервер (GET или POST).

Подробности вы сможете найти на этом сайте, но сейчас вернемся к самой форме.

Типы форм для сайта

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

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

Фишечки и нюансы

Вы, должно быть, уже почувствовали, что этот “квадратик с кнопкой” на сайте не такой уж и плохой.

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

Кстати. Буквально в 2 клика с сервисом Formdesigner Вы можете создать крутую форму захвата, которая точно сработает. Внутри простой интерфейс и более 30 элементов для форм. Кликайте -> Formdesigner.

Форма для ввода текста

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

Результат.

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

Для вставки пояснительного текста используется атрибут placeholder тега <textarea>.

Сделаем 100% ширину с помощью CSS.

textarea
{
  width:100%;
}

Получим следующую форму.

Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.

Форма загрузки файлов

Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:

Дополним нашу форму. Создадим отдельную группу элементов.

Результат.

Заключение

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 4,00 из 5)
Загрузка...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector