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

HTML-формы это набор элементов управления который позволяет сделать документ интерактивным. Как правило, формы используются для отправки на сервер какой-либо информации, например форма обратной связи на сайте.

Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.

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

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

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

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

<form action="/" method="post">

</form>

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

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

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

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

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

<form action="/" method="post">
<textarea></textarea>
</form>

Результат.

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

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

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

textarea
{
  width:100%;
}

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

<form action="/" method="post">
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

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

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

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

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

<form action="/" method="post">
<input type="text" placeholder="Введите ваше имя"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

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

<form action="/" method="post">
<input type="text" placeholder="Введите ваше имя"></input>
<input type="email" placeholder="Введите ваш email"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

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

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

<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
</fieldset>
</form>

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

• Фон.
• Размер.
• Положение.

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

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
</fieldset>
</form>

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

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

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

• Отправить.
• Очистить.

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

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

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

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

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

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

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

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
</form>

Результат.

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

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

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

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

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение" required></textarea><label>
<label><button type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
</form>

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

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

<button formnovalidate type="submit">Отправить</button>.

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

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

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

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

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

<input  type="file" value="Выберите файл">

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

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
</fieldset>
</form>

Результат.

Выбор даты

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

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

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
<label>Укажите дату - <input type="date"><label>
</fieldset>
</form>

Результат.

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

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

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
<label>Укажите дату - <input type="date"><label>
<label>Кому отправить - 
<select>
  <option>Директору</option>
  <option>В отдел продаж</option>
</select></label>
</fieldset>
</form>

Результат.

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

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

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

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

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

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

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

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"></label> 
<label>Укажите дату - <input type="date"></label>
<label>Кому отправить - 
<select>
  <option>Директору</option>
  <option>В отдел продаж</option>
</select></label>
<label>Отправить копию письма себе на почту?<input type="radio" name="primer">Да <input type="radio" name="primer">Нет</label>
<label>Каким образом направить вам ответ
<input type="checkbox" name="a" value="1" checked>>По электронной почте
<input type="checkbox" name="a" value="2">По почте на бумажном носителе
<input type="checkbox" name="a" value="3">Перезвонить по телефону
<label>
</fieldset>
</form>

Результат.

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

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

Форма обратной связи: что это такое

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

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

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

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

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

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

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

Теперь к вопросу о том, где на сайте можно разместить такую форму. Если она содержит достаточное количество полей для заполнения, то для такой формы выделяется отдельная страница, или же на вкладке «Контакты». А вот размещать такую форму на главной странице сайта не стоит. Но если Ваш сайт представлен в формате Landing Page – это значит, что форма по умолчанию будет размещаться на главной странице. Так как лендинги представляют собой одностраничный веб-ресурс.

Как защитить форму обратной связи от спама

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

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

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

Время на прочтение
2 мин

Количество просмотров 107K

Привет, Хабр!

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

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

Рассмотрим вариант на примере формы обратной связи:

1. Идем в Google Drive и создаем форму с полями
   • Страница
   • Ваше имя (текстовое поле)
   • Ваш email (текстовое поле)
   • Сообщение (текстовое поле)

2. Сохраняем форму и открываем документ в Google Drive. Во-вкладке «Форма» переходим к активной форме.
3. Делаем view source странице и копируем html код с тегом form.
4. Теперь html код можно встроить на странице, причем можно поменять верстку, как угодно, главное, чтобы было валидно и остался атрибут name у полей формы, а так же поля формы с значением hidden.

Все поля имеют name c одинаковым значением, где меняется только одна цифра начиная с нуля.
name="entry.0.single" у первого поля
name="entry.1.single" у второго поля

Первое поле «Страница» я сделал неспроста, этому полю мы делаем display: none; и в value поля записываем текущий URL страницы.

Но теперь при отправке формы пользователь будет попадать на страницу Google с сообщением об успешной отправке формы, что немного не соответствует ожиданиям пользователя, который отправил форму на сайте. И здесь мне на помощь пришел другой инструмент Google Search, для тега form добавляем 2 атрибута target, onsubmit и js с iframe.

<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://%MY_PAGE%';}">
<form action="%ACTION_URL_GOOGLE_FORM%" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

Теперь мы можем открыть любую страницу пользователю после отправки формы.

Отправленные данные записываются в таблицу, при желании ее можно расшарить по постоянному url, как HTML, CVS, TXT, PDF, RSS, XLS, ODF.

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

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

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

Материалы
www.morningcopy.com.au/tutorials/how-to-style-google-forms
Там же ссылка на платный сервис formexperts.com реализующий похожую функциональность.
Если вдруг стало интересно про получение данных из Google Drive в JSONP. Dynamic FAQ Section w/ jQuery, YQL & Google Docs

Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.

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

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

Чтобы сделать у себя на сайте такое, нам понадобится:

Сервер для PHP

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

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

Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:

Готовим страницу с формой

Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.

<!DOCTYPE html>
<html>
<!-- Служебная часть -->

<head>
  <!-- Заголовок страницы -->
  <title>Заголовок</title>
  <!-- Настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    /* Тут будут стили */
  </style>
  <!-- Закрываем служебную часть страницы -->
</head>

<body>
  <!-- Тут будет наша страница -->
</body>
<!-- Конец всей страницы -->

</html>

Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea:

/*Задаём общие параметры для всей страницы: шрифт и отступы*/
body {
  /*text-align: center;*/
  margin: 10;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
/* Настраиваем внешний вид полей ввода*/
input {
  display: inline-block;
  margin: 10px auto;
  border: 2px solid #eee;
  padding: 10px 20px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
textarea {
  display: inline-block;
  margin: 10px auto;
  border: 2px solid #eee;
  padding: 10px 20px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}

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

<input> — для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.

<textarea> — здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.

Ещё мы воспользуемся тегом <form> — он мысленно собирает наши поля в одну форму и помогает управлять ими из одного места. У каждой формы есть свой метод, по которому она работает с данными. Форма может или отправлять данные (post), или получать их (get). Так как нам надо отправить сообщение в PHP-скрипт, будем использовать метод post. Сразу пропишем путь к скрипту на сервере — по этому адресу мы зальём нужный файл на следующем этапе. Этот скрипт, который мы позже напишем, и есть обработчик формы.

Оформим всё в виде кода:

<!-- Создаём форму и указываем её обработчик и метод -->
<form action="http://mihailmaximov.ru/projects/mail/post.php" method="post" name="form">
  <!-- Поле ввода имени -->
  <input name="name" type="text" placeholder="Ваше имя" />
  <br>
  <!-- Поле ввода почты  -->
  <input name="email" type="text" placeholder="Ваша почта" />
  <br>
  <!-- Поле ввода для темы сообщения -->
  <input size="30" name="header" type="text" placeholder="Тема" />
  <br>
  <!-- Текстовое поле для самого сообщения -->
  <textarea cols="32" name="message" rows="5"> Текст сообщения
  </textarea>
  <br>
  <!-- Кнопка с надписью «Отправить», которая запускает обработчик формы -->
  <input type="submit" value="Отправить" />
</form>

Пишем обработчик формы на PHP

Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:

Логика работы PHP-программы будет такая:

Мы специально делаем так, чтобы форма отсылала письма на тот же адрес, который одновременно и адрес отправителя. Это сделано для того, чтобы вы получали эти письма, когда будете тестировать сервис. В рабочем проекте замените переменную $email в функции send() на свой настоящий адрес, чтобы самим получать письма из формы.

<!-- Через 10 секунд после появления сообщения об отправке или ошибке — отправляемся на сайт Кода 🙂 -->
<meta http-equiv='refresh' content='10; url=http://thecode.local/'>
<meta charset="UTF-8" />
<!-- Начался блок PHP -->
<?php
// Получаем значения переменных из пришедших данных
$name = $_POST['name'];
$email = $_POST['email'];
$header = $_POST['header'];
$message = $_POST['message'];
// Формируем сообщение для отправки, в нём мы соберём всё, что ввели в форме
$mes = "Имя: $name nE-mail: $email nТема: $header nТекст: $message";
// Пытаемся отправить письмо по заданному адресу
// Если нужно, чтобы письма всё время уходили на ваш адрес — замените первую переменную $email на свой адрес электронной почты
$send = mail($email, $header, $mes, "Content-type:text/plain; charset = UTF-8rnFrom:$email");
// Если отправка прошла успешно — так и пишем
if ($send == 'true') {echo "Сообщение отправлено";}
// Если письмо не ушло — выводим сообщение об ошибке
else {echo "Ой, что-то пошло не так";}
?>

Отправляем PHP-скрипт на сервер

Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.

Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:

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

Что дальше

Дальше как обычно — улучшаем.