форма обратной связи пример текста
Делаем форму обратной связи на сайте
Говорят, что если программист может написать форму обратной связи, он может написать всё.
Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.
В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.
Смысл программы в том, что посетитель страницы заполняет нужные поля, пишет текст сообщения и нажимает кнопку «Отправить». На почту владельцу сайта приходит письмо с текстом сообщения и данными о том, кто это сообщение отправил.
Чтобы сделать у себя на сайте такое, нам понадобится:
Сервер для PHP
Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.
Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:
Готовим страницу с формой
Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.
Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :
Чтобы сделать форму на странице, мы будем использовать такие теги:
— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.
— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.
Ещё мы воспользуемся тегом
Пишем обработчик формы на PHP
Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:
Логика работы PHP-программы будет такая:
Отправляем PHP-скрипт на сервер
Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.
Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:
Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!
Что дальше
Дальше как обычно — улучшаем.
Идеальная форма заявок с сайта. 9 правил
Вы знаете, что до 80% пользователей покидают ваш сайт, не заполнив заявку потому, что форма обратной связи на вашем сайте далека от идеала? Или вы уверены в том, что ваша форма заявок идеальна и имеет максимальную конверсию?
Все чаще наши новые клиенты, которые обращаются к нам в студию, при обсуждении создания и продвижения сайта, задаются вопросом о конверсии. Это абсолютно правильный вопрос, когда речь идет об интернет-маркетинге, т.к если сайт не приносит клиентов, то и смысла инвестировать в него время и деньги нет никакого. В сегодняшнем блоге мы расскажем об одно из факторов, который сильно влияет на количество клиентов с сайта компании. Этот фактор — формы обратной связи, или как их еще называют — «формы захвата». Какая она — идеальная форма обратной связи.
Сразу отметим, что в зависимости от сегмента бизнеса эта форма может отличаться, т.к у каждого бизнеса свои задачи, свои форматы взаимодействия с клиентами. Именно форма «общается» с клиентом пока ваш менеджер обзванивает другие контакты и ждет новые заявки.
Форма обратной связи на сайте важна. Вы ведёте покупателя к совершению покупки или заказу услуги ненавязчиво и осторожно. Используете всё, что можно, начиная с удобного интерфейса и заканчивая отличными условиями продажи. Но когда клиент добирается до формы заказа — он уходит. Вся работа насмарку. Вряд ли он когда-нибудь вернётся к вам снова. Этого можно избежать, просто изменив форму обратной связи.
Для чего нужна форма обратной связи
Не только для совершения заказа/покупки. С помощью формы обратной связи вы выясняете у пользователей, что им нравится/не нравится, какие есть «косяки» в работе компании и даже получаете готовые советы по её улучшению. Разговор с пользователями — это:
а) повышение лояльности к вашей компании;
б) возможность быстро отреагировать на запрос, снизить негатив и сохранить клиента;
в) возможность улучшить продукт или сервис;
г) способ увеличить продажи.
Главная ошибка, которую совершают неопытные владельцы сайта — перегруженная форма обратной связи. Пользователей отпугивает большой набор полей, которые необходимо заполнить, чтобы сделать запрос в вашу компанию. Они не хотят предоставлять лишнюю информацию о себе, даже если вы обещаете им конфиденциальность. Мы собрали для вас несколько правил оформления идеальной формы.
Правило №1. Максимально упрощайте форму
Какую из этих форм вы заполните охотнее?
Оставляйте только самые важные поля. Посетители большинства сайтов не любят заполнять большое количество полей
Если правило упрощения формы выполнили, то стоит ожидать увеличение конверсии на 30–60 %.
Совет. Уберите всё лишнее, оставьте 2–3 поля или даже 1. Обычно это «Имя», «номер телефона или e-mail». Если у вас интернет-магазин и вы делаете форму для заказа, то полей будет немного больше: «Имя», «№ телефона или E-mail», «Вариант доставки», «Количество товара», «Адрес». Смотрите, для каких целей вы делаете форму обратной связи, и максимально упрощайте её.
Правило №2. Форма должна быть заметна
Форма обратной связи или заявки с сайта должна быть заметной, иначе посетитель может просто ее не заметить и не заполнить. Вы даже можете поместить некий анимированный элемент, который позволит еще больше акцентировать внимание.
Правило №3. Минимум «обязательных полей»
Одно обязательное поле — телефон
Часто на сайтах компаний можно наблюдать не только перегруженную лишними полями форму, но и обязательность заполнения этих полей. Формулировка «обязательное поле» присутствует на 99 % сайтов. Хотите увеличить конверсию? Уберите обязательное заполнение всех полей, кроме телефона. Если человек захочет, он сам заполнит те поля, которые считает нужными, но основное поле — номер телефона, которое позволит перезвонить клиенту и уточнить всю остальную информацию. Главное не забудьте составить правильные скрипты для менеджеров.
В каких случаях конверсия с форм падает:
Если поля о доставке, адресе и ФИО присутствуют в интернет магазине, то пользователь конечно же их заполняет и на конверсию это не влияет. Но если вы хотите, чтобы он заполнил данные, чтобы отправить вам заявку, то конверсия безусловно будет падать.
Правило №4. Ссылки в форме (условия обращения)
Если у вас есть необходимость отправить посетителя прочитать условия обращения, обработки заявок, заказов и прочее, то делайте эти ссылки непосредственно в блоке формы. При клике на такую ссылку лучше показать всплывающее окно с информацией, которое легко закрыть и перейти к заполнению формы.
Пример такой формы:
Старайтесь минимизировать количество текста и условий в форме, т.к пользователю будет лень все перечитывать и он просто закроет форму, не отправив вам свои данные. Также ошибки в данной форме — слишком большое количество обязательных полей.
Правило №5. Согласие на обработку данных
Даже несмотря на то, что данные в форме могут быть заполнены не верно и не носить характер персональных данных, данный чекбокс необходимо поставить. Уже были судебные претенденты, по которым ответчики должны были заплатить штраф за невыполнение данного требования Законодательства.
Правило №6. Выпадающих списков быть не должно
Если у вас форма представляет из себя калькулятор, то выпадающий список приемлем. Но если вы заставляете человека выбирать в какой отдел вашей компании он хочет обратиться, то это снизит конверсию, т.к пользователи хотят быстро оформить форму, не думая над лишней информацией.
Правило №7. Уберите каптчу с формы
Ввод каптчи может снижать конверсию до 40%. Это объясняется тем, что часто каптча вообще не читается, либо при вводе данных сообщает о некорректности ввода символов. Если раньше каптча была оправлена тем, что без нее могло приходить много спама, то теперь есть технологии, которые защищают форму от ввода данных спам-роботами и без ввода каптчи.
В студии artcell мы как раз используем такую технологию. Как можете заметить каптчи в наших формах нет и СПАМ мы не получаем.
Правило №8. Автоуведомление о том, что форма отправлена
После того как форма заполнена и отправлена обязательно должно появиться сообщение о том, что данные отправлены и менеджер перезвонит в ближайшее время. Если такого уведомления не будет, то пользователь не понимает отправились данные или нет, стоит ожидать звонка из компании или нет. Данное уведомление позволит избавить вас от дублирования заявок от одного и того же пользователя.
Правило №9. Уведомление по sms
Отправьте автоматическое уведомление на номер посетителя, если в вашей форме было поле для ввода телефона. Это позволит персонализировать ваше обращение, а пользователю лишний раз напомнит название вашей компании.
Так какая она — идеальная форма обратной связи?
Выделена в рамку или цветом, что позволяет ее сделать более заметной на фоне остальной информации на сайте
Минимум полей для заполнения
Одно или два обязательных поля
Отсутствие полей с выпадающими списками
Наличие чекбокса для согласия на обработку получаемых данных
Наличие ссылок и доп.условий сразу в форме без лишних переходов на другие страницы сайта
У вас идеальная форма заявки, но клиентов все равно мало? Прочитайте этот блог в нашем журнале и вы найдете ответ на свой вопрос. Если ваш сайт плохо продвигается в поисковых системах, то вам будет полезна данная информация.
Если у вас не получается сделать форму связи идеальной и вы хотите обратиться за помощью к профессионалам, то заполните заявку ниже и наш менеджер перезвонит в ближайшее время.
Правильное оформление форм на сайте
Правильно составленная форма оформления заказа поможет не спугнуть посетителя на завершающем этапе конверсии.
Слишком долгое, сложное или непонятное её оформление, как правило, приводит к отказу от покупки. В таком случае все затраты на привлечение посетителей становятся напрасными — именно поэтому форму оформления заказа очень важно сделать правильно. В этом вам поможет наш список правил.
Важно, чтобы оформление заказа не отпугивало посетителя. В первую очередь, не нужно делать его сложным или долгим. Постарайтесь собирать только самую необходимую информацию.
Во-первых, используйте подсказки. Банальное «Иванов Иван Иванович» в поле для ввода ФИО подсказывает пользователю о том, что необходимо прописывать инициалы полностью, избегая формулировок вроде «Иванов И.И.». Поля ввода номера телефона обязательно должны иметь маску.
Хорошим тоном является также подсветка ошибок при вводе. При отправлении форма должна проходить валидацию — если данные введены неверно, форма не отправляется на сервер, а пользователю показывается соответствующее сообщение. Ситуация, если форму можно отправить, заполнив её как угодно, является ошибкой.
Бывают ситуации, когда допущенная в начале формы ошибка тянется на протяжении всего оформления. И когда пользователь нажимает заветное «Подтвердить заказ» страница обновляется, данные сбрасываются, выводится сообщение об ошибке и необходимо заполнять всё заново.
Это натуральное издевательство над своими клиентами и, по совместительству, лучший способ их отпугнуть.
Лучшим решением будет сохранять не только информацию, введённую в правильном формате, а вообще всю. Поля с ошибками можно просто выделить каким-либо образом. Это поможет избежать повторения неверного ввода.
Посетитель должен всегда знать, сколько шагов до конца оформления ему предстоит пройти, в этом поможет визуализация. Оптимальным является значение в три-четыре этапа, сгруппированные по логическому принципу.
Например, первый этап — общая информация о заказчике (ФИО, номер телефона и так далее), второй — адрес доставки, третий — выбор способа оплаты и четвёртый — проверка информации и подтверждение сделки.
Оформление заказа должно быть доступно и для незарегистрированных пользователей, потому что регистрация — это ещё один дополнительный шаг в цепочке конверсии, а чем эта цепочка длиннее, тем меньше вероятность, что клиент дойдёт до финала.
Если вы всё же решились добавить этот шаг, то сделайте его максимально простым и быстрым. Хороший пример — регистрация в один клик, например, через социальные сети.
Самый популярный вариант — ввод капчи. С первого взгляда это хороший вариант, но исследования в области маркетинга показывают, что в реальности это отпугивает клиентов. На данный момент есть множество технологических решений, например «невидимые капчи», которые позволяют отсекать спам-ботов без непосредственных усилий пользователей.
Ссылки на Пользовательское соглашение и Правила обработки персональных данных на данный момент необходимы в соответствии с 152-ФЗ, а их отсутствие карается наложением штрафа на владельцев сайта.
Да и современный пользователь становится в этом плане всё более осторожным. Поэтому ссылки на соответствующие документы должны однозначно присутствовать при оформлении формы, в противном случае к вашему ресурсу может возникнуть недоверие.
Стоит подчеркнуть, что все описанные выше правила относятся и к формам обратной связи «Заказать звонок», «Купить в один клик», «Получить консультацию». Однако тут присутствует также своя специфика:
Создание формы заказа и форм обратной связи содержит в себе множество подводных камней, которых необходимо избегать. Для того, чтобы не препятствовать пользователю совершить конверсию, пользуйтесь описанными выше правилами.
Эффективная форма обратной связи на сайте — 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. Тщательно продумайте надписи
Используйте в кнопках формулировки наподобие «хочу так же». Согласно исследованиям, такие утверждения от первого лица, созвучные мыслям пользователя, повышают конвертабельность. 
По возможности задействуйте понятные, но интересные призывы к действию. Например, в одной из форм лендинга для фитнес-центра мы использовали призыв «обновись с нами». С одной стороны, это созвучно названию «НОВА фитнес». С другой, созвучно идее омоложения — одному из главных мотиваторов в ЗОЖ.
Мы желаем вам множества заполненных форм — пусть покупатели обретают свое потребительское счастье именно с вами!
Форма обратной связи пример текста
HTML-формы это набор элементов управления который позволяет сделать документ интерактивным. Как правило, формы используются для отправки на сервер какой-либо информации, например форма обратной связи на сайте.
Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.
Форма обратной связи в HTML
Давайте для примера создадим наиболее полную форму обратной связи в которой будут кнопки, текстовое поле, возможность загрузки файла и не только, итак обо всем по порядку.
Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.
Для вставки пояснительного текста используется атрибут placeholder тега
Сделаем 100% ширину с помощью CSS.
Получим следующую форму.
Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.
Ввод текста в input
Элемент является универсальным, в отличии от элемента
. С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.
Изменим нашу форму.
Уже лучше, давайте добавим поле с адресом электронной почты.
Все хорошо, но не хватает нормальной группировки элементов.
Группировка элементов управления в HTML-форме
Давайте немного изменим форму, а именно:
Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.
Ну что же, уже лучше. Не хватает кнопок.
Кнопки в HTML-форме
Добавим две кнопки:
Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).
Кнопка «Очистить» будет очищать все введенные в форму данные.
Кнопка отправки формы
Кнопка очистки формы
Давайте дополним нашу форму.
Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?
Проверка заполнения формы
Валидация форм, или проверка заполнения — довольно важный момент при работе с сервером. Давайте разбираться как сделать простую проверку полей формы на заполнение.
Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.
Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».
Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:
Иные проверки (валидации) выполняются с помощью PHP или JS кода.
Другие популярные элементы
Продолжим дополнять нашу форму. Добавим несколько элементов.
Форма загрузки файлов
Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:
input type= «file» value=»Выберите файл»>
Дополним нашу форму. Создадим отдельную группу элементов.
Выбор даты
Добавим в нашу форму возможность выбора даты.
Выпадающий список
Выпадающий список создается с помощью тега select >, а элемент списка с помощью option >. Давайте создадим в нашей форме возможность указать адресата.
Переключатели
Переключатели бывают зависимые — можно выбрать только один вариант и независимые.
Зависимый переключатель
Зависимый переключатель создается с помощью тега input и его атрибута type= «radio». Соответственно в зависимом переключателе можно выбрать только один варинат.
Независимый переключатель
Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.
Добавим эти элементы на нашу форму.
На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.
Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.