Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.
Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.
Итак, начинаем создание формы обратной связи:
HTML
В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом:
< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Имя: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Телефон: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E- mail : < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" > Сообщение: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Отправить" />
И визуально она выглядит сейчас следующим образом:
Согласен, пока все некрасиво и ничего не понятно, но мы только начали.
Рассмотрим приведенный выше код подробно:
< form method= "post" action= "mail.php" > …
для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).< input maxlength= "30" type= "text" name= "name" />
Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type="text" говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.< label for = "name" > Имя:
Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.< textarea rows= "7" cols= "50" name= "message" >
Также как и инпут предназначен для введения пользователем информации, только на этот раз поле заточено для длинных сообщений. Rows указывает размер поля в строках, cols в символах. В целом они задают высоту и ширину нашего поля.< input type= "submit" value= "Отправить" />
О том, что это кнопка для отправки формы нам сообщает type="submit", а value задает текст, который будет внутри этой кнопки.< div class = "right" >
использованы только для дальнейшего визуального оформления формы.
CSS
Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата:
Мы использовали данный код:
form { background: #f4f5f7; padding: 20px; } form . left, form . right { display: inline- block; vertical- align: top; width: 458px; } form . right { padding- left: 20px; } label { display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; } input, textarea { border: 1px solid #82858D; padding: 10px; font- size: 16px; width: 436px; } textarea { height: 98px; margin- bottom: 32px; } input[ type= "submit" ] { width: 200px; float: right; border: none; background: #595B5F; color: #fff; text- transform: uppercase; }
Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:
- Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
- Не используйте для переноса строк и создания отступов лишние теги по типу < br>, < p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться < br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен? .
- Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.
Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap . Урок по оформлению форм с его использованием можно посмотреть .
PHP
Ну вот и пришло время сделать нашу форму работоспособной.
Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.
В конечном итоге его код будет выглядеть следующим образом:
Его номер: " . $phone . "
Его почта: " . $mail . "
Его сообщение: " . $message , ) ; echo "Ваше сообщение успешно отправлено!
Вы получите ответ в ближайшее время
$back " ; exit ; } else { echo ; exit ; } ?>
Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:
$back = "
\" javascript: history.back()\" >Вернуться назад
" ;Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.
if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) { //внутрення часть обработчика } else { echo "Для отправки сообщения заполните все поля! $back " ; exit ; }
Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST["name"] в кавычках мы пишем значение атрибута name наших инпутов.
Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo "Для отправки сообщения заполните все поля! $back" и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.
Дале вставляем во внутреннюю часть обработчика формы:
$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ;
Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.
Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.
Полностью отказываться от защиты формы на серверной стороне в пользу JS не рекомендую, поскольку хоть и крайне редко, но встречаются уникумы с отключенным в браузере JS.
После чистки тегов добавляем отправку сообщения:
mail
("почта_для_получения_сообщений@gmail.com"
,
"Письмо с адрес_вашего_сайта"
,
"Вам написал: "
.
$name
.
"
Его номер: "
.
$phone
.
"
Его почта: "
.
$mail
.
"
Его сообщение: "
.
$message
,
"Content-type:text/html;charset=windows-1251"
)
;
Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:
- "почта_для_получения_сообщений@gmail.com" – сюда между кавычек вставляете свою почту
- "Письмо с адрес_вашего_сайта" – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
- "Вам написал: ".$name." < br /> Его номер: ".$phone." < br /> Его почта: ".$mail." < br /> Его сообщение: ".$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом < br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
- Content-type:text/html;charset=windows-1251 - в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.
ВАЖНО!
Кодировка указанная в «голове» документа ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».
Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.
Проверка формы на адекватность вводимых данных
Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.
Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.
Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:
< script> function checkForm(form) { var name = form. name. value; var n = name. match(/ ^[ A- Za- zА- Яа- я ] * [ A- Za- zА- Яа- я ] + $/ ) ; if (! n) { alert("Имя введено неверно, пожалуйста исправьте ошибку" ) ; return false ; } var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) { alert("Телефон введен неверно" ) ; return false ; } var mail = form. mail . value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; if (! m) { alert("E-mail введен неверно, пожалуйста исправьте ошибку" ) ; return false ; } return true ; }
Ну а теперь обычный разбор:
Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:
< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >
Теперь по пунктам забираем состав проверки:
Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.
RSContact – это бесплатная русскоязычная форма обратной связи для Joomla с возможностью настройки полей, писем и защитой от спама. Форма очень простая в плане настройки, адаптивная и вполне нормально интегрируется с разными шаблонами. Можно создать форму минимум с одним полем «E-mail» и кнопкой отправки. А можно включить ещё около 18 полей разного типа. Есть возможность отображения чекбокса согласия с обработкой персональных данных согласно GDPR и 152 ФЗ . Если у Вас уже сконфигурирована почта в общих настройках Joomla и активирован какой-то «общий» плагин капчи, то с отправкой писем и защитой от спама Вам не надо дополнительно возиться. Естественно, что такое расширение как RSForm не получится заменить при помощи RSContact. Но для быстрого создания формы обратной связи его будет более чем достаточно.
Общие сведения
Рассмотрим основные, на мой взгляд, возможности и особенности RSContact.
- Поддержка Joomla 3.2 и более новых версий.
- Адаптивный дизайн (Bootstrap).
- Возможность создания форм, состоящих из 1-18 предварительно настроенных полей (разных типов) (рисунок ниже). Есть три поля, которые можно настроить под себя. Например, создать спадающий список с нужными Вам вариантами для выбора.
- Подписи полей могут быть внутри или снаружи полей.
- Наличие поля для дачи согласия с обработкой персональных данных пользователя.
- Возможность делать поля обязательными или необязательными для заполнения. Вы сможете сменить символ обязательного для заполнения поля.
- Наличие опций для редактирования писем, приходящих администраторам. С возможностью вставки заполнителей и оформления писем (вёрстка текста).
- Возможность отправки писем одному или нескольким администраторам.
- Есть возможность вставки своего собственного CSS и Javascript кода для изменения внешнего вида формы и изменения её функциональности.
- Возможность вставки над или под формой дополнительной информации.
- Возможность создания горизонтальных и вертикальных форм.
- Возможность редактирования сообщения, которое будет показано пользователю после отправки формы.
- Защита от спама при помощи плагинов капчи Joomla.
- Простая настройка.
- Возможность отключения загрузки jQuery для формы. Это может улучшить совместимость с другими расширениями.
- Есть перевод на русский , английский, немецкий и другие языки.
- Наличие документации (на английском языке).
Настройки модуля обратной связи Joomla разделены на 7 вкладок. На вкладках Модуль, Привязка к пунктам меню и Права собраны «привычные» для всех модулей Джумла опции. На вкладке Дополнительные параметры всё, кроме опции Загружать jQuery , тоже схоже с другими модулями. Сама опция Загружать jQuery позволяет включить/отключить загрузку библиотеки jQuery, которая нужна для нормального функционирования модуля обратной связи. Если эта библиотека загружается другими расширениями или у Вас возник конфликт на сайте, то попробуйте отключить эту опцию.
Поля
Данная вкладка (рисунок ниже) содержит опции, позволяющие включать или отключать разные поля формы обратной связи. Все доступные поля показаны на форме на рисунке выше. Для большинства полей есть такие «варианты отображения»:
Обязательное. Поле будет показано во фронтальной части сайта. Для отправки формы пользователь обязан будет заполнить его. Возле подписи поля будет отображаться специальный маркер, заданный на вкладке в поле .
Да. Поле будет показано во фронтальной части сайта. Пользователю не обязательно нужно его заполнять.
Нет. Поле не будет показано во фронтальной части сайта.
Можно отключить все поля кроме поля E - mail . Оно является обязательным для заполнения.
В основном, все поля – это обычные текстовые поля или текстовые области. Рассмотрим только отличающиеся.
Вид Имя. Можно отображать поле имени пользователя в одну строку (Имя ) или в две (Фамилия и имя ).
Вид поля Тема. Данное поле может быть одним из таких типов: , то в поле Предварительно заданные темы можно ввести варианты, по одному в строку, которые пользователи смогут выбирать во фронтальной части сайта. На рисунке ниже показан пример поля темы тип Спадающий список . Задав темы, Вы сможете, например, настроить правила обработки писем (фильтры) на почте и получив письмо с той или иной темой перенаправить его нужному получателю автоматически. Подробнее о том, как это можно сделать для почты Яндекс , Mail.ru и Gmail можно прочесть в их справке. Плюс, это можно сделать и для других почтовых сервисов и почтовых клиентов, например, для Thunderbird .
Длина сообщения. Ограничение на количество символов в поле Сообщение .
Капча Joomla!. Возможность активации капчи для защиты от спама. Для этого нужно, чтобы у Вас был настроен и включён любой плагин тип «captcha» в менеджере плагинов. Также проверьте настройки опции CAPTCHA (по умолчанию) в Система – Общие настройки .
Отправить копию. Вы можете настроить возможность отправки копии письма пользователю на почту. Доступны такие варианты: Разрешить пользователю решать – в форме обратной связи Джумла будет отображаться специальный чекбокс (рисунок ниже), отметив который, пользователь получит копию письма себе на почту; Да – в форме обратной связи чекбокс не будет показан, но на почту пользователю будет оправлена копия письма; Нет – в форме обратной связи чекбокс не будет показан и на почту пользователю не будет оправлена копия письма.
Показать чекбокс согласия с обработкой персональных данных. Активирует вывод чекбокса (рисунок ниже) для получения согласия от пользователя на обработку его персональных данных согласно регламенту GDPR и 152 ФЗ.
В форма обратной связи на Joomla можно создать до 3-х настраиваемых полей разного типа: Текстовое поле, Текстовая область, Спадающий список, Радио кнопка, Чекбокс . Если Вы выбрали один из таких типов: Спадающий список, Радио кнопка, Чекбокс , то в поле Предварительно заданные темы можно ввести варианты, по одному в строку, которые пользователи смогут выбирать во фронтальной части сайта. Текстовое поле, Текстовая область и Спадающий список рассмотрены на рисунках выше в статье, а на рисунке ниже показан пример настраиваемого поля тип Радио кнопка (в верхней части рисунка) и Чекбокс (в нижней части рисунка).
Также отдельно стоит отметить поле Область . По умолчанию в нём заданы имена штатов США. Чтобы это изменить, откройте файл «modules/mod_rscontact/helper.php» и примерно с 33 строки, после «static $states = array», начинается список областей. Измените его так, как Вам нужно. Можно добавлять и удалять области.
Тут собраны настройки, позволяющие сконфигурировать саму форму обратной связи Joomla (рисунок ниже).
Верхний колонтитул формы. Нижний колонтитул формы. Вы можете добавить контент над и/или под формой при помощи визуального текстового редактора. В него можно вставить изображение, таблицу и так далее. К сожалению, плагины в нём не обрабатываются. Поэтому Вы не сможете вставить видео при помощи, например, AllVideos .
Настраиваемый CSS. Вы можете добавить CSS стиль для изменения внешнего вида формы. Но лучше это делать при помощи таблицы стилей. В моём примере добавлена строка:
#mod-rscontact-counter-231 {display: none;}
Она скрывает отображение поля со счётчиком оставшегося количества символов (рисунок ниже).
Настраиваемый JavaScript. Вы можете ввести Ваш собственный Javascript код, без тега «script», который будет загружен с формой.
Маркер поля обязательного для заполнения . Будет отображаться рядом с подписью поля в случае, когда для поля задано обязательное заполнение.
Позиция подписи . Можно располагать подписи полей внутри полей или над ними (рисунок ниже).
На рисунке ниже показана форма обратной связи с подписями над полями, скрытым счётчиком оставшихся символов и с подписями над и под самой формой.
Горизонтальная форма . Позволяет применить стили, более подходящие для создания горизонтальной формы. При этом для опции Позиция подписи нужно выбрать вариант Снаружи .
Автоматическая ширина полей . Эта опция влияет на настройку ширины полей.
Сообщение благодарности . Тут Вы сможете указать сообщение, которое будет показано после отправки формы. Можно применять форматирование и добавлять картинки.
В данной вкладке (рисунок ниже) собраны опции, которые позволят Вам настроить письма, приходящие администратору и пользователю. Настройки действуют одинаково и для админов, и для пользователей.
В опциях Получатель (e-mail администратора), Копия, Скрытая копия Вы сможете указать получателей писем. Как минимум, надо задать e-mail в поле Получатель (e-mail администратора) . Можно указать несколько адресов, разделяя их запятой или точкой с запятой.
В поле Тема Вы вписываете тему письма. Можно использовать заполнители. Заполнители – это специальные теги, вместо которых будут подставлены те или иные данные. Список доступных заполнителей указан под полем ввода содержимого письма. В поле Содержимое можно ввести текст письма с применением заполнителей. На рисунке выше видны настройки содержимого письма. А вот так выглядит само письмо (рисунок ниже). Как видите, все теги были заменены на данные из формы, которые указал пользователь, и данные, которые форма смогла подтянуть из других источников (дата, IP адрес, название сайта).
Опция Использовать Ответить отправителю сделает так, что по нажатию на кнопку Ответить в почтовом интерфейсе, при просмотре полученного администратором письма, e-mail адрес отправителя формы будет автоматически добавлен в адрес получателя письма. Адрес получателя можно переопределить, указав его в настройке Ответить .
Если письма не отправляются, то попробуйте такие варианты решения проблемы.
- Отключите кэш. Как Вариант, можете использовать сторонний компонент кэша типа JotCache , чтобы исключить модуль RSContact из кэширования.
- Проверьте настройки почты в Система – Общие настройки – Сервер – Настройки почты . Попробуйте разные способы отправки. Свяжитесь с Вашим хостинг-провайдером для уточнения конфигурации почты на Вашем сервере.
Как видите, данная форма обратной связи Joomla весьма функциональная и простая в плане настройке. Надеюсь, что данный обзор поможет Вам в выборе подходящего расширения и последующей настройке модуля RSContact. В следующей статье «Обзор DJ-EasyContact. Модуль формы обратной связи в Joomla » мы рассмотрим ещё одно аналогичное бесплатное расширение.
Проблема: избегание обратной связи. Большинство людей не слишком хорошо воспринимают критику и, соответственно, всеми силами стараются избежать негативной обратной связи. В результате они не получают поистине бесценных сведений о своих сильных и слабых сторонах и, как следствие, не имеют возможности извлекать максимальную выгоду из первых и предупреждать последствия вторых.
Решение: если вы активно стараетесь получить и учитесь на честной и справедливой обратной связи от людей, которые вас хорошо знают (с самых разных сторон), значит, вы используете один из самых эффективных и быстродействующих способов, позволяющих человеку взглянуть на себя с новых углов зрения и ускорить личный успех и темпы саморазвития.
Инструкции: введите следующий текст в поле для электронного письма (можете редактировать его и адаптировать к своей ситуации, чтобы было понятно, что его автор – вы). Разошлите его пяти – тридцати (чем больше, тем лучше) знакомым, которые знают вас достаточно хорошо, чтобы дать честную оценку вашим сильным и слабым сторонам. Это могут быть ваши друзья, родственники, коллеги, наставники, учителя, бывшие работодатели или менеджеры, клиенты и прочие важные и близкие для вас люди. А если вы достаточно смелы, то и люди, важные или близкие для вас в прошлом. (Я серьезно.)
Важно: не забудьте рассылать письма как «скрытые копии», чтобы получатели не могли видеть остальных адресатов. (А лучше вообще скопировать и вставить письмо и рассылать их потом каждому человеку отдельно.)
Поле «Тема»: Это очень важно… или Буду счастлив услышать ваше мнение…
Текст электронного письма:
Дорогие друзья, родные и коллеги!
Огромное спасибо за то, что читаете это письмо. Мне было очень непросто его отправить, но оно крайне важно для меня и я искренне благодарен вам за то, что вы не пожалели своего драгоценного времени на его чтение (и, надеюсь, на то, чтобы мне ответить).
Это письмо получит избранная группа людей. Каждый из вас хорошо меня знает, и, надеюсь, даст честную оценку моих сильных и, что еще важнее, слабых сторон (так называемых зон усовершенствования).
Я никогда не делал ничего подобного раньше, но чувствую, что для того, чтобы расти и развиваться как личность, мне просто необходимо получить более точную картину того, каким меня видят самые важные люди в моей жизни. Чтобы стать человеком, которым я должен быть, чтобы жить так, как я того хочу и заслуживаю, и вносить вклад в жизнь других людей на уровне, на котором мне хотелось бы это делать, мне очень нужно услышать объективное мнение.
В связи с этим прошу вас не пожалеть нескольких минут, чтобы отправить мне письмо, где вы честно напишете, в каких двух-трех важных областях я больше всего нуждаюсь в улучшении. Если вам так будет проще и приятнее, не стесняйтесь перечислить сначала мои наибольшие достоинства и явные преимущества (во всяком случае, мне так точно будет проще и приятнее). Вот и все. И пожалуйста, не старайтесь ничего приукрасить или скрыть. Я обещаю не обижаться ни на какую критику. Вообще-то чем откровеннее вы будете, тем больше мотивов у меня появится для того, чтобы внести позитивные изменения в свою жизнь.
Спасибо еще раз, и, если есть что-нибудь, что я мог бы сделать, чтобы повысить ценность вашей жизни, пожалуйста, непременно дайте мне знать. С искренней благодарностью,
Электронное письмо, которое изменит вашу жизнь: Мысли в заключение
Ну вот и все! Надеюсь, вы присоединитесь ко мне, Труди и сотням других моих VIP-клиентов, которым хватило смелости разослать письмо такого содержания. Перечислю лишь некоторые из судьбоносных, меняющих жизнь человека вознаграждений, на которые вы можете рассчитывать в этом случае: более точный самоанализ, более глубокое понимание самого себя и четкое и ясное видение того, какие изменения позволят вам быстро улучшить свой характер и свою жизнь.
На этом уроке мы познакомимся с функцией mail () , на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.
Для этого создадим два файла - forma.php и mail.php . В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form - кнопка "Отправить" и атрибут action , который ссылается на обработчик - mail.php , именно к нему обращаются данные из формы при нажатии кнопки "Отправить" . В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php» . На этой странице прописан скрипт на PHP , который обрабатывает данные формы:
Так форма визуально выглядет в браузере.
Далее пишем код для файла mail.php . Придумываем сами имена для переменных. В PHP переменная начинается со знака $ , а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы - значение name .
$to = "[email protected]"; // емайл получателя данных из формы
$tema = "Форма обратной связи на PHP"; // тема полученного емайла
$message = "Ваше имя: ".$_POST["name"]."
";//присвоить переменной значение, полученное из формы name=name
$message .= "E-mail: ".$_POST["email"]."
"; //полученное из формы name=email
$message .= "Номер телефона: ".$_POST["phone"]."
"; //полученное из формы name=phone
$message .= "Сообщение: ".$_POST["message"]."
"; //полученное из формы name=message
$headers = "MIME-Version: 1.0" . "\r\n"; // заголовок соответствует формату плюс символ перевода строки
$headers .= "Content-type: text/html; charset=utf-8" . "\r\n"; // указывает на тип посылаемого контента
mail($to, $tema, $message, $headers); //отправляет получателю на емайл значения переменных
?>
Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.
Если вы хотите, чтоб вопрос был обязательным для заполнения, не забывайте переключать соответствующий бегунок в нижней части окна редактирования вопроса - для обязательного вопроса он должен быть переключен вправо и гореть зеленым цветом.
Хитрость вторая: порядок вопросов
В режиме редактирования формы любой вопрос можно перетащить вверх-вниз, для этого надо потянуть за иконку из шести точечек в верхней части вопроса. Обычно курсор мышки реагирует на эту иконку, превращаясь в четырехстороннюю стрелку:
Но тут тоже есть хитрость. В гугловских формах так все устроено, что в итоговой таблице с ответами порядок вопросов будет соответствовать истории их создания, а не порядку, в котором вы их расположили после.
Хотя перетаскивать вопросы при создании формы довольно легко и удобно, не увлекайтесь перетаскиваниями - разобраться потом в таблице с ответами будет сложнее.
Google постоянно вносит разные улучшения в интерфейс своих сервисов, но вот эта особенность гугл форм пока что так ни разу и не менялась.
Чтобы посмотреть ответы, надо перейти на вкладку «Ответы» в самом начале формы:
Когда ваши участники заполнят несколько форм, то в этом экране появятся две опции: «Сводка» и «Отдельный пользователь». Там можно будет быстро пробежать глазами по всем ответам.
Я редко пользуюсь этим экраном, мне удобнее сразу перейти в таблицу, которая организована на манер MS Excel-файла. Для того, чтоб отобразить заполненные анкеты в виде сводной таблицы, нужно нажать на зеленую иконку и выбрать Создать таблицу >> Новая таблица >> Создать. В новой вкладке браузера откроется Google Таблица, названная так же, как и ваша форма, но с припиской в конце: (Ответы).
Эти два файла в гугл драйве будут отображаться как разные файлы, но между ними всегда будет неразрывная связь. Как только новый участник заполнит анкету, данные мгновенно появятся и в таблице.
Шаг 4. Наводим красоту: выбираем шаблон внешнего вида
У гугловских форм есть стандартный фиолетовый вид, но цвет можно легко заменить на любой другой из стандартного набора. Для этого нажмите на иконку палитры в верхнем правом углу:
Вы также можете выбрать один из нескольких бесплатных дизайнов. Некоторые из их вполне симпатичные, есть и тематические для разных праздников и типов событий. Чтобы выбрать особый шаблон, нужно кликнуть на иконку в правом нижнем углу палитры, и откроется отдельное окошко с выбором категорий:
Прежде чем отправлять форму участникам, убедитесь, что ваша форма выглядит на пять с плюсом. Откройте ее в отдельном окне и попробуйте заполнить сами. Чтобы открыть форму, нужно вновь пойти в правый верхний угол, нажать на иконку их трех вертикальных точек и выбрать «Открыть форму».
Если всё отображается корректно и вы ничего не забыли, то пора отправлять анкету участникам.
Шаг 5. Публикуем анкету для участников
Второй способ выглядит более быстрым, но мне лично нравится первый. Рассылку по участникам можно сделать и более персонализированную, добавить в нее нужную ссылку на сайт, а уж на сайте сделать страничку с формой. В конце концов, каждый переход на ваш сайт - это измеримый результат, а на сайте кроме анкеты может быть еще много всего полезного.
Чтобы встроить форму в страницу вашего сайта или блога, нужно пойти в верхний правый угол и нажать на иконку бумажного самолетика. В открывшемся окошке есть три варианта, как отправить: письмо, ссылка и встроить в веб-страницу. Выбираем третью иконку:
Скопируйте HTML-код, вставьте его в исходный код страницы сайта, и вуаля - .
Второй способ - отправить участникам прямую ссылку на анкету. Выбираем в том же меню иконку с ссылкой, сочиняем текст письма, добавляем ссылку в письмо. Если вы пользуетесь такими сервисами рассылок как MailChimp или ему подобные, то этот способ может быть наиболее удобным.
Если вы все-таки решили отправлять гугл форму на email участникам вашего события прямо из интерфейса Google, не забывайте добавлять там сообщение. Рекомендую поставить галочку «отправить мне копию» и сделать пару тестовых писем, прежде чем посылать их всем. Так вы хотя бы увидите, как выглядело отправленное вами письмо.
Пара слов о разных настройках в Google Формах
Я верю в метод познания интерфейсов «тыкнул - попробовал - понял». Поэтому считаю, что даже если бы мне объяснили, что делает каждая кнопка на панели инструментов, я бы все равно не запомнила.
Но у гугловских форм есть некоторые настройки, до которых редко можно добраться методом тыка, и мне они сильно помогают каждый раз, когда я создаю любого рода анкеты.
Важная настройка формы: сообщение о заполненной анкете для участника
Когда гость вашего события заполнил все вопросы и нажал «отправить», Google покажет ему страничку с сообщением об успешной отправке. По умолчанию у Google стоит бесчеловечное «Ответ записан». Ни один организатор события, который ценит своих гостей и дорожит их лояльностью, не может себе позволить оставить это без изменений!
Поэтому не ленимся и заходим в меню через правый верхний угол, выбираем «Настройки» и находим раздел «Страница подтверждения». В поле «Сообщение для респондентов» пишем что-нибудь личное и уникальное, например так:
Там же есть всякие разные настройки заполнения формы, на которые стоит обратить внимание: разрешение заполнять анкету несколько раз, разрешение на просмотр сводки ответов, индикатор прогресса заполнения (для длинных форм особенно важно) и разные другие.
Важная настройка таблицы: отслеживание ответов
Еще одна полезная галочка - уведомления о том, что пришла заполненная анкета. Если вы эти уведомления не настроите, то Google вас беспокоить вообще не будет, и вы узнаете, сколько человек заполнило анкету только если зайдете в таблицу с ответами. Иногда это жутко неудобно.
Я вот, например, всегда в обязательном порядке эти уведомлялки для себя настраиваю, этот пунктик даже есть в моем .
Настроить такие уведомления можно в интерфейсе таблицы ответов на форму: Инструменты >> Уведомления >> выбираем «Отправка формы» и способ уведомления - раз в день или мгновенно, сразу после того как участник заполнил. Не забываем нажать «Сохранить».
Итого: у нас есть анкета и привязанная к ней таблица с ответами. В них есть еще миллион интересных настроек и лайфхаков, но лучше всего их открывать для себя самостоятельно. Но если вы решили сделать первую в жизни анкету по сбору обратной связи после события, описанных здесь пяти шагов будет более чем достаточно для старта.
Надеюсь, эта небольшая инструкция поможет начинающим организаторам упростить сбор обратной связи и сохранить некоторое количество деревьев, исключив необходимость сбора бумажных анкет!
(Visited 6 040 times, 1 visits today)
