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

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

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

Если рассматривать только предложения и замечания от посетителей, то наличие формы «отправить сообщение» скажется более эффективно на взаимодействии с пользователем, чем простое указание адреса электронной почты. Ведь выделять и копировать этот адрес захотят единицы. однако вы можете сказать, что указывая конструкцию вида «mail:pochta@pochta.ru» на стороне посетителя, нажавшего на подобную ссылку, автоматически будет запущен почтовый клиент. Хорошо! Но если такой обработчик почты не установлен и не настроен? В общем, лучше ставить форму обратной связи.

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

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

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

Итак, для начала распишем ход работы:

  1. Определяемся с типом самой контактной формы
  2. Определяем место на сайте, где она будет устанавливаться
  3. Указываем необходимые теги и предаём им соответствующие стили — создаём общую конструкцию (можно сказать квадрат в выбранной области сайта, имеющий свою размерность)
  4. Определяем нужные поля для ввода, которые будут отображаться в форме
  5. Задаём стили и прописываем их в специальном файле стилей для каждой отдельной формы ввода имени, адреса, сообщения и тому подобного.
  6. Задаём стили для кнопки отправки данных
  7. Задаём обработчик для формы.
  8. Готово!

План работы указан, переходим к реализации.

Всплывающая форма обратной связи

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

Код всплывающей адаптивной формы

Рассмотрим сразу весь код:

<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»> Скачать файл

Обратите внимание на директории, в которых расположены эти файлы.

Соединяя всё вместе и размещая на сайте, мы получим отличную всплывающую контактную форму, или обратную связь для сайта. Пример: Кнопки и ссылка в меню на странице «Заказать сайт«.

комментариев 7

  1. Павел:

    Здравствуйте! У меня такой вопрос, есть форма обратной связи с кнопкой «очистить форму», если заполнить все поля и нажать эту кнопку-всё отлично, кнопка работает и всё удаляет. А вот если, например, ввести не все данные или неправильно заполнить какое-либо поле (в форме будет оповещение, что поле не заполнено,при этом страница обновляется) то кнопка «очистить форму» уже не срабатывает. Не удаляет данные, а если удалить их вручную, то наоборот заполняет все поля. Подскажите пожалуйста, как сделать, чтобы эта кнопка всегда удаляла информацию?

  2. Сергей:

    Как сделать вызов формы кнопкой? Дайте, пожалуйста, код.

  3. drtvader:

    А как к примеру такую форму сделать не всплывающей а стационарной? Что бы она всегда находилась в одном месте страницы?

  4. Артём:

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

    • Добрый ADMIN:

      Проверьте ещё раз весь код. Вы скопировали весь код? Правили его? В статье указан пример — всё отлично работает. Письма приходят. Иногда бывает пустые приходят — видимо с сервером проблемы

  5. Алексей:

    Интересно, а такие всплывающие окна не блокируются?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *