форма обратной связи для лендинга

Создание формы обратной связи

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

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

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

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

Создание формы обратной связи – HTML разметка

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

Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.

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

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

Знаю, что заголовок формы не согласован с кнопкой, но лень переделывать все скриншоты. Суть же не в этом совсем. Правда?

Давайте, кратко объясню, что тут к чему. В теге ‘form’ я размещаю два параграфа. В одном будет заголовок формы, а второй послужит для вывода сообщений и уведомлений, возникающих при отправке формы. Например, о том, что сообщение успешно отправлено в варианте, когда все происходит без перезагрузки.

Под каждым полем создаю ‘div’ для вывода уведомлений об ошибках при валидации ‘.contact-form__error’.

Параметр ‘enctype’ в теге ‘form’ нужен для того, чтобы отправлять файл. Пока можете его не писать, но, если планируете сделать так, чтобы пользователь мог прикрепить вложение к письму, то нужно оставить все как есть.

Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу ‘body’, чтобы основной контент грузился быстрее.

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

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

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

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

Основные настройки формы

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

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

То есть если имя обязательно, но не было заполнено, появиться сообщение ‘Поле обязательно для заполнения’. Вот так:

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

Можете вывести любое сообщение, которое подходит в вашем случае.

Теперь самое главное. Если прошлые вещи можно было оставить по умолчанию, то теперь нужно настроить отправку на почту. Так как в скрипте используется SMTP протокол передачи почты, то нужно узнать несколько параметров у вашего почтового сервиса. Это:

пароль и логин у каждого свои, а ‘HOST’ и ‘PORT’ для популярных почтовых сервисов я приведу в списке.

Будьте внимательны с этими параметрами, так как тут легко сделать ошибку и ничего приходить не будет.

С остальным все проще, объяснять по сути и нечего:

Обратите внимание, что почта, указанная в ‘const SENDER’ должна совпадать с почтой, которую указали в ‘LOGIN’.

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

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

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

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

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

Отправка формы

Отправка формы осуществляется в файле mail.php, там нечего менять и настраивать. Оставьте как есть, если плохо разбираетесь в php. Если соберетесь добавить свои поля и, по какой-то причине не захотите скачать файл, предложенный мной ниже, где мы будем добавлять обещанный ранее функционал, то в тело письма, после валидации, необходимо передать переменные с данными полученными из формы. Делается это в 34 строке.

Также, в отправке формы и валидацие участвует файл ‘mail.js’. Именно он помогает реализовать отправку без перезагрузки страницы. Тут тоже ничего менять не нужно, если вы не планируете использовать страницу благодарности, а вам достаточно того, что уведомление об успешной отправке выводится в форме.

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

Форма обратной связи с основными полями

Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.

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

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

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

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

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

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

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

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

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

Если вам важен такой функционал, то раскомментируйте ее и настройте приемлемое время.

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

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

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

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

Теперь необходимо инициализировать скрипт.

После этого маска успешно появилась в поле телефона:

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

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

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

Стили я уже добавил в ‘style.css’, так что теперь наша форма выглядит так:

Теперь необходимо передать данные в файл валидации ‘valid.php’ и проверить все ли в порядке. Как уже говорил выше, у нас простейший случай с проверкой не пустое ли поле. Прежде чем перейти к реализации валидации давайте предположим, что поле для ввода текста обязательно для заполнения.

Для этого перейдем в файл ‘config.php’ и укажем ‘true’ в константе, отвечающей за это текстовое поле.

Теперь наше текстовое поле стало обязательно для заполнения. В файле ‘valid.php’, по аналогии с другими полями напишем такую проверку:

Обратите внимание на ‘text’ в проверке POST запроса. Этот то самое значение, которое указывали в параметре ‘name’ у тега ‘textarea’.

В файле ‘mail.js’ сохраним ‘div’ в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

А затем, ниже, напишем проверку:

По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную ‘$text’ в тело письма. Делается это в файле ‘mail.php’ в 34 строке, той самой, о которой я уже упоминал выше.

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

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

Checkbox

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

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

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

Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.

Идем в файл ‘config.php’ и делаем поле обязательным.

Далее открываем файл ‘valid.php’ и добавляем следующий код:

Теперь переходим в файл ‘mail.js’ добавляем ‘div’ в который будет выводится ошибка, если она есть, и обработчик ошибки:

Осталось в тему письма добавить переменную с текстом о принятии соглашения.

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

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

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

Настройки в файле ‘config.php’:

Вот так теперь выглядит форма.

А вот так выглядят пришедшие данные.

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

Форма обратной связи с дополнительными полями

Источник

Эффективная форма обратной связи на сайте — 14 принципов

1. Простота

Форма должна быть максимально простой — чем меньше полей, тем лучше. Если логика ситуации все же требует нескольких полей, распределите их по нескольким экранам c кнопкой «дальше». Так пользователя не будет удручать длинная «простынь» из ваших вопросов.

Так мы и сделали на лендинге для фитнес-центра.

2. Контрастная кнопка

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

Однако, есть несколько непреложных правил, соблюдение которых повысит кликабельность кнопки под вашей формой:

1. Кнопка должна выделяться на внешнем фоне благодаря контрастирующему цвету.

2. Для вторичного контента лучше использовать менее заметную контурную кнопку — чтобы не порождать визуальный конфликт. Пусть пользователь обратит внимание в первую очередь на кнопку CTA.

3. Важно, чтобы было понятно, что это кнопка. На некоторых излишне хитро «задизайненных» сайтах миниатюрные контурные кнопки уж больно напоминают логотип и другие графические элементы.

4. Кнопка должна содержать глагол, а не существительное. Например, «заказать», а не «заказ». Практика показывает: по таким кнопкам чаще кликают.

«Записаться», а не «запись онлайн» (лендинг для центра подготовки к экзаменам).

3. Отсутствие капчи

Не стоит стращать пользователей капчей. Она вызывает страшное раздражение.

4. «Человечное» автоуведомление

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

5. Дизайнерское оформление

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

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

6. Грамотное управление вниманием

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

7. Мобильная адаптация

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

Согласно исследованиям, среднему пользователю максимально комфортно нажимать на объекты, имеющие ширину 45-57 px.

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

8. Емкий дескриптор

Пользователь должен четко понимать, что именно произойдет после заполнения им формы:

⦁ какие блага он получит;

⦁ через сколько времени следует ожидать обратную связь.

Пример: форма заказа с нашего лендинга для детского кафе-ресторана.

9. Форма справа

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

Например, посетители разработанного нами лендинга для EГЭ-центра сначала узнают о том, что им предлагается обучение в одном из старейших подобных учебных центров России, и только потом им предлагается совершить действие — записаться на пробное занятие.

10. Используйте эффекты при наведении курсора

Есть возможность изменять вид кнопки при наведении с помощью средств CSS (каскадных таблиц стилей). Ею не стоит пренебрегать. Изменение цвета дает понять пользователю, что данный элемент не является декорацией. Это даже привлекает дополнительное внимание «в моменте».

Пример с нашего лендинга для услуг по строительству домов.

11. Дополнительные стимулы

Используйте формулировки наподобие «бесплатно», «в течение 5 минут», «записалось уже 123 человека». Информация, которая свидетельствует о легкости совершения сделки, оперативности обратной связи и социальном одобрении повышает вероятность заполнения формы. Естественно, ваши обещания и утверждения должны быть правдивыми.

12. Выделяйте заполняемые поля

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

13. Выделите обязательные для заполнения поля

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

14. Тщательно продумайте надписи

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

По возможности задействуйте понятные, но интересные призывы к действию. Например, в одной из форм лендинга для фитнес-центра мы использовали призыв «обновись с нами». С одной стороны, это созвучно названию «НОВА фитнес». С другой, созвучно идее омоложения — одному из главных мотиваторов в ЗОЖ.

Мы желаем вам множества заполненных форм — пусть покупатели обретают свое потребительское счастье именно с вами!

Источник

Формы захвата на сайте: виды, цели, правила составления

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

Открытая (полноэкранная) форма визуально занимает целый блок в структуре сайта. Состоит из заголовка, призыва к действию, полей для ввода контактов и кнопки с целевым действием.Существует правило, что лендинг обязательно должен содержать одну открытую форму. Обычно это форма с самым важным для продавца целевым действием. Именно на него и делается основной акцент.Такую форму можно расположить на первом или втором экране сайта, перед подвалом или в середине лендинга.Закрытая форма представляет собой обычную кнопку. Нажав на нее, читатель видит окно с призывом и полями сбора контактов.

· для экономии места на лендинге

· для второстепенных целевых действий

· в меню или подвале сайта для дополнительной конверсии

· в портфолио/кейсах для захвата читателей, которым понравилась работа компании

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

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

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

Какие поля может содержать форма:

· фамилию и имя· телефон

· регион его проживания

· статус (физическое лицо или компания)

· продукт/услугу, которую он хочет купить (можно использовать на главной странице многостраничного сайта)

Контекстная форма не только собирает контакты, но и решает ряд других целей:

1. Продает экспертность компании (содержит триггеры доверия — статистику, опыт работы, число довольных клиентов)

2. Рассказывает о порядке предоставления услуги (сроках, этапах работ, обязанностях подрядчика)

3. Снимает возражения (содержит гарантию на работы/товар)

4. Содержит успешный кейс

5. Информирует о стоимости услуги (порядок ценообразования в компании, пример расчета стоимости для конкретного клиента)

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

Чаще всего располагается в правом верхнем углу первого экрана сайта и выглядит в виде простой кнопки. Большинство компаний указывает в форме время перезвона консультанта.

Для усиления конверсии добавьте в форму:

· день недели и конкретное время, удобное клиенту для созвона (актуально, если клиент оставил контакты в вечернее/ночное время либо если он очень занятой человек (B2B сфера)

· фотографию менеджера, который перезвонит

· возможность выбора определенного менеджера (если у вас большой отдел продаж)

· вопрос менеджеру (актуально для юридических/бухгалтерских услуг).

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

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

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

Наше агентство использует 3 простых правила:

1. Сокращаем количество полей в простых сферах бизнеса (имя и телефон, либо имя и адрес электронной почты)

2. Заранее сегментируем аудиторию клиента и прописываем формы/призывы к действию под каждый из них

3. Используем окна благодарности и страницу «Спасибо» после отправки формы.

Задача сайта — не только получить заявки, но и сохранить внимание клиента. Хотите, чтобы клиент ждал вашего звонка, а не ушел мониторить конкурентов? Добавьте на страницу «Спасибо» ссылку на другие материалы компании — YouTube, Инстаграм, блог со статьями.

Так вы убьете сразу 2 зайцев: дадите бесплатную пользу и повысите свою экспертность в его глазах.

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

Удачных вам конверсий!

Ждем от вас обратной связи в комментариях! А если вы хотите узнать больше о нашей работе, заходите к нам на сайт Студии.

Хочу добавить. На страницу спасибо можно поместить кнопки мессенджеров для забора контактов. Чтобы коиенты их оставляли предложить можно что-то полезное взамен. Например: чек-лист или скидку за подписку. Так мы получаем еще один автоматический канал коммуникации с клиентом, если ведем на чат-бот

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

Возможно, вы имели ввиду рассылки?

Также что вы думаете по поводу многоступенчатых форм заявок, которые эксплуатируют Эффект Зейгарник (эффект незавершенного действия)?
Я имею в виду те формы, где полей для заполнения великое множество (например, форма для получения кредитной карты), но все поля предлагаются для заполнения небольшими частями. Это позволяет не отпугнуть потенциального Клиента этим великим множеством полей, которое визуально выглядит устрашающе. 🙂

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

Никита, я немного не понял, чего вы придерживаетесь:
— «. нужно продавать не акциями, а экспертностью и качеством товара.»
или
— «Задача какая взять контактные данные, а дальше продает человек, умеющий продажник продаст лучше, чем любой лендинг»
Товар должен продавать сам себя (с условием, что посетитель принял принципиальное решение о покупке) или важно получить контакты, чтобы в дело вступил продавец? 😉

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

А по поводу многоступенчатых форм, то они используются как минимум в e-commerce (интернет-магазинах) при оформлении заказа и онлайн оплаты.
Фишка многоступенчатой формы заявки заключается в том, что покупателю демонстрируются не сразу все поля для заполнения, так как общее большое количество полей может отпугнуть. Наоборот поля предлагается заполнять группами, что положительно сказывается на конверсии такой формы.

Источник