Содержание
Форма обратной связи — это не заменимая вещь для сайта, особенное если сайт коммерческий или вообще является интернет-магазином. Для обычных, так называемых, информационных ресурсов наличие формы обратной связи также необходимо. Предназначаются формы обратной связи для того, что посетители могли прямо с сайта отправить сообщение администратору сайта, сделать заказ обратного звонка, сделать заказ какой-либо услуги и так далее.
Если рассматривать только предложения и замечания от посетителей, то наличие формы «отправить сообщение» скажется более эффективно на взаимодействии с пользователем, чем простое указание адреса электронной почты. Ведь выделять и копировать этот адрес захотят единицы. однако вы можете сказать, что указывая конструкцию вида «mail:pochta@pochta.ru» на стороне посетителя, нажавшего на подобную ссылку, автоматически будет запущен почтовый клиент. Хорошо! Но если такой обработчик почты не установлен и не настроен? В общем, лучше ставить форму обратной связи.
Как сделать форму обратной связи?
Существует множество сервисов, предлагающих создание контактных форм в режиме онлайн и зачастую эта услуга «бесплатна». Однако «бесплатность» здесь только снится — обработчики находятся на том сайте, на котором находится конструктор. Возможна даже передача ссылочного веса. Поэтому не нужно использоваться никакие сервисы, а учится создавать подобные формы самим.
Информации в сети по формам обратной связи предостаточно, но она весьма расплывчатая и плохо структурирована, поэтому давайте рассмотрим процесс создания форм более подробно и с необходимыми объяснениями, на сколько это возможно.
Итак, для начала распишем ход работы:
- Определяемся с типом самой контактной формы
- Определяем место на сайте, где она будет устанавливаться
- Указываем необходимые теги и предаём им соответствующие стили — создаём общую конструкцию (можно сказать квадрат в выбранной области сайта, имеющий свою размерность)
- Определяем нужные поля для ввода, которые будут отображаться в форме
- Задаём стили и прописываем их в специальном файле стилей для каждой отдельной формы ввода имени, адреса, сообщения и тому подобного.
- Задаём стили для кнопки отправки данных
- Задаём обработчик для формы.
- Готово!
План работы указан, переходим к реализации.
Всплывающая форма обратной связи
Начнём сразу с самого сложного — создание всплывающей формы. Допустим, на странице сайта размещается какая-либо информация, а под ней — специальная кнопка — «Оставить отзыв и так далее». При нажатии на кнопку появляется всплывающее окно, где можно заполнить некоторые данные и отправить их администратору. Такой вариант однозначно удобней и практичней обычных форм — гораздо легче вписать в дизайн сайта одну кнопку, чем целую форму с отдельными пунктами.
Код всплывающей адаптивной формы
Рассмотрим сразу весь код:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h3 id="myModalLabel">Оставить отзыв</h3> </div> <div class="modal-body"> <form id="form" class="form_online" action="mail.php" method="post"> <label class="no">Имя</label> <input type="text" placeholder="Как к Вам обращаться?" name="name"> <label class="no">Email</label> <input type="email" placeholder="Введите Email" name="email" required=""> <label class="no">Телефон</label> <input type="tel" placeholder="Введите номер" name="tel"> <label class="no">Сообщение</label> <textarea placeholder="Укажите номер телефона и другие контакты для связи с Вами " name="message" required=""></textarea> <input type="submit" name="Submit" value="Отправить!" class="send"> </form> </div> <div class="modal-footer"></div> </div>
<div id=»myModal» class=»modal hide fade» tabindex=»-1″ role=»dialog» aria-labelledby=»myModalLabel» aria-hidden=»true»> — это основной контейнер, где самое важное — это ID. По этому идентификатору мы будем вызывать всплывающую форму. Остальные классы, такие как «modal hide fade» — это классы из фреймворка Bootstrap, на котором и реализуется адаптивность нашей будущей всплывающей формы.
<div class=»modal-header»>, <div class=»modal-body»> и <div class=»modal-footer»> — разбиваем саму форму на заголовок, тело и футер (нижнюю часть). В секции «заголовок» мы размещаем кнопку закрыть и название формы обратной связи:
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h3 id="myModalLabel">Оставить отзыв</h3>
Секция «Футер» у нас пустая, но там можно разместить любую информацию, стоить только захотеть. Теперь самая главная и основная секция «тело». Здесь указывается количество вводимых данных и их тип — сначала метки (label), затем инпуты (input). Обратите внимание, что идёт указание required=»» — оно указывает, что поле необходимо для заполнения.
Обработчик формы обратной связи
Чтобы данные, которые вводит пользователь в форме, были переданы получателю, необходим специальный файл, который называется обработчик. В приведённом выше примере, код с вызовом обработчика находится в секции <div class=»modal-body»>. Выглядит вызов обработчика следующим образом:
form id="form" class="form_online" action="mail.php" method="post"
Здесь указаны методы отправки и ссылка на файл с обработчиком. Почему именно POST а не GET — POST позволяет отправлять неограниченные данные и использовать его легче.
action=»mail.php» — указывает, что при некотором действии (нажатии на кнопку «отправить») данные будут преданы в файл mail.php, причём он лежит в той же директории, что и сама страница.
Файл sendmail.php или mail.php
Не важно как вы назовёте этот файл, главное правильно указать его и написать правильный код обработчика.
Из нашего примера следует такой код:
<?php $name = $_POST['name']; $email = $_POST['email']; $telef = $_POST['tel']; $mess = $_POST['message']; $REMOTE_ADDR = $_POST['REMOTE_ADDR']; $to = "gannforex@yandex.ru"; $subject = "Новый отзыв"; $message = "Имя пославшего письмо: $name.\n Электронный адрес: $email \n Номер телефона: $telef \n Сообщение: $mess .\n IP-адрес: $_SERVER[REMOTE_ADDR]"; mail ($to,$subject,$message,"Content-type:text/plain; charset = utf-8") or print "Не могу отправить письмо !!!"; echo ""; ?> <!doctype html> <html lang="ru-RU"> <head> <link rel="icon" type="image/ico" href="ico/favicon.ico"/><link rel="shortcut icon" type="image/x-icon" href="ico/favicon.ico"/> <meta charset="utf-8"> <title>Получение письма и продолжение заказа</title> <style> body { background: none repeat scroll 0 0 #000000; font-family: segoeui,arial,verdana,tahoma; } a { color: #ffffff; } h1 { color: #FFD700; font-family: Prosto; font-size: 200%; } div { color: #FFFFFF; margin-top: 15%; text-align: center; } .small { font-size: 18px; } </style> </head> <body> <div class="main"> <?php if(!$res): ?> <h1>Ваша отзыв был успешно отправлен</h1> <p class="small">Спасибо за обращение!</p> <?php else: ?> <h1>Сообщение не может быть отправлено</h1> <p class="small">Ошибка отправки: <?php echo $mail->ErrorInfo; ?></p> <?php endif; ?> <a href="/"><h1>Вернуться к сайту</h1></a> </div> </body> </html>
Чем примечателен код:
- Отправляются все данные, которые вводит посетитель, воспользовавшийся контактной формой.
- После успешной отправки, посетитель видит сообщение об успешной отправке и ссылку для возврата обратно к сайту.
- Предыдущий вариант отображается на странице. имеющий некоторый дизайн, а не просто на белом листе.
- У этой же страницы есть своя иконка, которая отображается в самом верху браузера, во вкладке рядом с заголовком страницы.
Дополнительные файлы
Кроме файла страницы и обработчика, ещё необходимо несколько файлов со скриптами и стилями. Нужно подключить скрипт для корректной работы всплывающей формы, а также стили для адаптивности bootstrap.
Делается это так — указываем такие строки в коде страницы:
<script src=»js/bootstrap.min.js» type=»text/javascript»></script> Скачать файл
<link rel=»stylesheet» href=»css/bootstrap.min.css»> Скачать файл
Обратите внимание на директории, в которых расположены эти файлы.
Соединяя всё вместе и размещая на сайте, мы получим отличную всплывающую контактную форму, или обратную связь для сайта. Пример: Кнопки и ссылка в меню на странице «Заказать сайт«.
Здравствуйте! У меня такой вопрос, есть форма обратной связи с кнопкой "очистить форму", если заполнить все поля и нажать эту кнопку-всё отлично, кнопка работает и всё удаляет. А вот если, например, ввести не все данные или неправильно заполнить какое-либо поле (в форме будет оповещение, что поле не заполнено,при этом страница обновляется) то кнопка "очистить форму" уже не срабатывает. Не удаляет данные, а если удалить их вручную, то наоборот заполняет все поля. Подскажите пожалуйста, как сделать, чтобы эта кнопка всегда удаляла информацию?
Как сделать вызов формы кнопкой? Дайте, пожалуйста, код.
А как к примеру такую форму сделать не всплывающей а стационарной? Что бы она всегда находилась в одном месте страницы?
Здравствуйте! Поставил на сайт формы из вашего примера,форма работает,но вот только на майл приходят пустые письма,только заголовки пишет! Подскажите пожалуйста в чем может быть причина Заранее благодарю
Проверьте ещё раз весь код. Вы скопировали весь код? Правили его? В статье указан пример - всё отлично работает. Письма приходят. Иногда бывает пустые приходят - видимо с сервером проблемы
Интересно, а такие всплывающие окна не блокируются?
Нет, а вообще - чем они могут блокироваться? Антивирусом? Яндексом? )))