Удобная форма обратной связи без перезагрузки страницы

Удобная форма обратной связи без перезагрузки страницы
PHP скрипты 0    8682 0

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

Для этой тривиальной задачи, я заранее нашел и модифицировал скрипт, который работает на AJAX технологии. Также я подготовил красивое оформление полей, используя фреймворк Bootstrap 3. Достаточно скопировать мои CSS-стили и форма примет готовый для использования вид.

1 - подключаем Jquery библиотеку:

    

2 - устанавливаем HTML форму с использованием Bootstrap разметки:

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


3 - размещаем JS скрипт

Этот скрипт размещается непосредственно под HTML формой и после объявления jQuery.

         $(document).ready(function(){
            $('#button_contacts').click(function(){
                var form_name   = $('#form_name').val();
                var form_email   = $('#form_email').val();
                var form_message = $('#form_message').val();
                $.ajax({
                    url: "post.php", 
                    type: "post", 
                    dataType: "json", 
                    data: { 
                        "form_name":   form_name,
                        "form_email":   form_email,
                        "form_message": form_message
                    },
                    success: function(data){
                        $('.messages').html(data.result); 
                    }
                });
            });
        });

4 - рассмотрим код обработчика, который нужно разместить в файл post.php

В обработчике достаточно поменять значение переменной $mail_to, вписав туда свою почту.

 $msg_box = ""; // в этой переменной будем хранить сообщения формы
    $errors = array(); // контейнер для ошибок
    // проверяем корректность полей
	if($_POST['form_email'] == "")   $errors[] = "Поле Ваш e-mail не заполнено";
    if($_POST['form_name'] == "")    $errors[] = "Поле Ваше имя не заполнено";
    if($_POST['form_message'] == "") $errors[] = "Поле Текст сообщения не заполнено";
 
    // если форма без ошибок
    if(empty($errors)){     
        // собираем данные из формы
        $message  = "Имя пользователя: " . $_POST['form_name'] . "
"; $message .= "E-mail пользователя: " . $_POST['form_email'] . "

"; $message .= "Текст письма: " . $_POST['form_message']; send_mail($message); // отправим письмо // выведем сообщение об успехе $msg_box = "Спасибо за обращение, сообщение успешно отправлено!
В течении 24 часов я Вам отвечу!

"; }else{ // если были ошибки, то выводим их $msg_box = ""; foreach($errors as $one_error){ $msg_box .= "$one_error
"; } } // делаем ответ на клиентскую часть в формате JSON echo json_encode(array( 'result' => $msg_box )); // функция отправки письма function send_mail($message){ // почта, на которую придет письмо $mail_to = "test@yandex.ru"; // тема письма $subject = "Письмо с обратной связи"; // заголовок письма $headers= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма $headers .= "From: Название сайта \r\n"; // от кого письмо // отправляем письмо mail($mail_to, $subject, $message, $headers); }

4 - копируем стили оформления

Для корректного отображения формы должен быть подключен Bootstrap 3.

#message
{
	padding-top:50px;
	padding-bottom:70px;
	background-color:#f8f8f8;
	border-top:1px solid #e5e5e5
}

#message h2
{
	margin-bottom:30px
}

#message h2 span
{
	border-bottom:5px solid #ed1d25
}

#message label
{
	color:#666;
	margin-bottom:10px;
	font-size:1.2em
}

#message #form_email,#message #form_message,#message #form_name
{
	box-sizing:border-box;
	border:1px solid #fff;
	box-shadow:none
}

#message #form_email,#message #form_name
{
	padding:25px;
	border:1px solid #ccc;
	font-size:1.1em
}

#message #form_message
{
	height:249px;
	padding:25px;
	border:1px solid #ccc;
	font-size:1.2em
}

#message #button_contacts
{
	background:#666;
	padding:15px 0;
	width:100%;
	border:2px solid #666;
	color:#fff;
	cursor:pointer;
	font-size:1.3em;
	text-transform:uppercase;
	transition:background .6s,color .6s
}

#message #button_contacts:hover
{
	background:0 0;
	color:#666
}

Вот и все! Наша форма готова. Скачивайте и оставляйте свои комментарии.


Рекомендую отличный хостинг
Просят от 5 рублей в день
  • PHP 4/5/7, Perl 5, Python, Zend, phpMyAdmin;
  • SSH, sFTP/FTP доступ;
  • Возможность заказа дополнительных IP-адресов;
  • POP3, IMAP, SMTP для работы с почтой;
  • Неограниченное количество доменов и поддоменов;
  • Неограниченный трафик;
  • Автоматическая установка CMS;
  • Управление DNS-записями;
  • И еще много разных ништяков 😉
Протестировать (30 дней бесплатно)

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?


Похожие статьи:

Парсер на PHP с записью контента в БД
Разрабатываем exploit
Парсер курсов валют на PHP
Счетчик онлайн посетителей на сайте
Пишем на SQL без SQL: основы по RedBean PHP
Защищенная Авторизация и Регистрация на PHP + MySQL через PDO
Универсальный и очень простой PHP парсер

Комментарии ()

  1. Сергей Крава 12 августа 2018, 02:06 # 0
    Кому интересно. Универсальный плаг обратной связи github.com/WahaWaher/sendmail-js
    Любые поля форм + файлы, авто оформление в таблицу и отправка на почту. jq php phpmailer ajax
    1. Валерий Зайцев 07 декабря 2018, 12:42 # 0
      Хорошая форма. Отлично работает в шаблонах Bootstrap, но как сделать чтобы после отправки сообщения автоматически очищались бы поля формы? и куда вписать эту функцию (для чайников).
      1. Алексей Власов 07 декабря 2018, 16:09 # 0
        Здравствуйте! Я не тестировал, но должно сработать вот так:

        После этой строчки
        $('.messages').html(data.result);

        // очищаем поля
        $('#form_name').val('');
        $(#form_email).val('');
        $(#form_message).val('');
        1. Валерий Зайцев 12 декабря 2018, 11:06 # 0
          К сожалению не работает! Поля очищаются только если обновить страницу. Правда если этой форме дать имя, то поля очищаются но не выводятся сообщения об успешной передаче. А так форма ОТЛИЧНАЯ! Письма на ящик приходят мгновенно. Может можно доработать форму для «Чайников»?
          С уважением — Валерий.
        2. Никита Бухарин 04 октября 2019, 10:54 # 0
          Куда лучше работает скрытие формы нафиг. На её месте можно оставить сообщение об успешной отправке или полезную инфу. Посмотрите как здесь реализовано qform24.com/blog/forma-bez-perezagruzki-ajax
        3. Александр Антонов 29 января 2019, 22:20 # 0
          Не знаю что со мной не так но форма вообще не работает, написал в php файле свой адрес, но после поздравительного сообщения так ничего и не приходит, кто знает с чем это связанно?
          1. Сергей Чекоев 07 февраля 2019, 00:57 # 0
            Здравствуйте!!! форма простая и рабочая, но понадобилось добавить дополнительное поле с выпадающим списком. Добавил везде все переменные со своим значение form_str но не работает вообще не вставляет нужное значение в поле. С input работает а с select нет.
            в html добавил так и в css #message #form_str и в php добавил form_str и в js
            Короче все сделал правильно но не работает с select. Если знаете то подправьте как-то.
            <div class="col-md-6"> <div class="form-group"> <label for="form_str">Тип списков:*</label> <select id="form_str" type="text" class=" form-control"> <option value="1 список">1 список</option> <option value="2 список">2 список</option> <option value="3 список">3 список</option> </select> <div class="help-block with-errors"></div> </div> </div>

            1. Алексей Власов 07 февраля 2019, 11:52 # 0
              Здравствуйте

              Нужно добавить в select атрибут name, вот так:
              <select id="form_str" name="form_str" type="text" class=" form-control">
              1. Алексей Власов 07 февраля 2019, 11:52 # 0
                В js:
                var form_str = $('select[name="form_str"]').val();
              2. Сергей Чекоев 08 февраля 2019, 02:53 # 0
                Здравствуйте Алексей. Все сделал как вы сказали но что то не работает. Не отправляет форма. Показывает что поле select не заполнено.
                в файл PHP дополнительно добавил следующее ниже скрипт. Вроде скрипт php делает проверку поля select но само поле в html остается чистым незаполненным возможно что то с не стыковка с bootstrap.CSS или надо дописать CSS к форме. Если не трудно посмотрите приложил архив form_select.rar

                В файл PHP дополнительно добавил следующее.
                // проверяем корректность полей if($_POST['select[name="form_str"]'] == "") $errors[] = "Поле <span style='color: #666;'>Тип списков</span> не заполнено"; // собираем данные из формы $message .= "Тип списков: " . $_POST['select[name="form_str"]'] . " ";
                1. Алексей Власов 08 февраля 2019, 21:50 # 0
                  Я сделал, протестировал, у меня работает. Можете скачивать. Скачать архив с SELECT
                2. Андрей Лендов 19 августа 2019, 09:57 # 0
                  Приветствую! Подскажите как с помощью этой формы чекбоксы отправлять? Спасибо!
                  1. Никита Бухарин 04 октября 2019, 10:56 # 0
                    Очень чёткий материал, жаль что так поздно наткнулся на него — разрабатывали шаблон готовый формы, который можно впоследствии на любой сайт вставлять, но слишком много мороки было с оформлением. бросили, зато нашли хороший конструктор форм в альтернативу шаблону.
                    1. Алексей Власов 04 октября 2019, 11:07 # +1
                      Здравствуйте! Спасибо за комментарий. Самое главное, что у вас получилось решить проблему.

                    Вы должны авторизоваться, чтобы оставлять комментарии.

                    Вы можете авторизоваться на сайте через:
                    YandexVkontakte