На заре русского сегмента интернета электронная коммерция не имела такого бурного роста как сейчас. Это обусловливалось тем что доступ к сети интернет имело ограниченное число лиц и это не начало 90-х, а уже в начале 00-х. Я помню те времена кода для выхода в интернет использовали dial up модемы, скорость загрузки страниц был очень медленной, а о скачивании файлов я вообще молчу. Далее на смену dial up пришли DSL технологии и интернет заиграл другими красками. Скорость доступа выросла в разы. В это время началась общая интернатизация общества России. Но и DSL продержался не долго, на смену ему пришел широкополосный интернет использующий Ethernet технологию.
За эти 16 лет интернет прочно вошел в нашу повседневную жизнь и является не отъемлемой частью бизнес-процессов. Соответственно и бизнес сайтов в сети стало очень много, а как вы понимаете бизнесу нужны клиенты. Исходя из потребностей рынка мы свами создадим форму обратной связи в модальном окне и будем использовать AJAX + PHP.
Все библиотеки будут установлены из CDN при желании вы можете их скачать с офф. сайтов.
www/ │ ├── js/ │ └── command.js │ ├── img/ │ └── 35.gif │ ├── index.html └── mail.php
Для быстрой верстки формы и создания модального окна воспользуемся Фреймворком Bootstrap 3. Данный Фреймворк очень сильно облегчает жизнь верстальщикам. Чтобы быть в тренде будем использовать технологию AJAX для отправки данных с формы без перезагрузки самой страницы.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <title>AJAX - отправка формы обратной связи в модальном окне</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>AJAX - отправка формы обратной связи в модальном окне</h3> </div> <div class="col-md-12"> <!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Напиши нам</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="gridSystemModalLabel">Форма обратной связи</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="hide" id="respons"></div> <form method="POST" action="mail.php" id="mailForm"> <div class="form-group"> <label for="labelEmail">Email адрес</label> <input type="email" class="form-control" name="email" id="email" placeholder="Email" required> </div> <div class="form-group"> <label for="labelPhone">Телефон</label> <input type="text" class="form-control" name="mobile" id="mobile" placeholder="7927XXXXXXX" required> </div> <div class="form-group"> <label for="labelText">Текст</label> <textarea name="text" id="text" cols="30" rows="10" class="form-control"></textarea> </div> <button type="submit" class="btn btn-default">Отправить</button> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- JQuery AJAX SCRIPT--> <script src="./js/command.js"></script> </html>
После создания формы нам необходим обработчик данной формы на стороне клиента. Для этого будем использовать библиотеку JQuery. С помощью ее мы подготовим наш AJAX запрос далее методом POST передадим данные серверу для дальнейшей обработки.
//Отправляем данные формы $('#mailForm').submit(function(e){ e.preventDefault(); //Получаем объект формы var form = $('#mailForm'); //Создаем прелоадер перед отправкой для красоты var preloader = '<img src="./img/35.gif" alt="preloader"> Отправляем письмо...'; $('#respons').removeClass('hide').addClass('alert alert-warning').html(preloader) //Устанавливаем задержку перед отправкой на 1,5 сек setTimeout(function(){ //Отправляем AJAX запрос на сервер $.ajax({ //Каким методом отправляем данные POST или GET type: form.attr('method'), //Адрес скрипта обработчика url: form.attr('action'), //Данные с полей формы data: form.serialize(), //Данный в формате JSON dataType: "JSON", success: function( data ) { //Получаем AJAX ответ от сервера //Проверяем на ошибки if(data.status == 0) { err = '<ul>' $.each(data.err, function(key, val){ err += '<li>'+ val +'</li>' }) err += '</ul>' //Выводим ошибки $('#respons').removeClass().addClass('alert alert-danger').html(err) } else { $('#respons').removeClass().addClass('alert alert-success').html(data.ok) //Очищаем форму и скрываем ее setTimeout(function(){ form.trigger('reset'); $('#respons').removeClass().addClass('hide').empty(); $('.bs-example-modal-lg').modal('hide'); }, 1500) } } }) }, 1500) }) })
Как видно из скрипта command.js мы отлавливаем событие формы submit, далее все данные с формы отправляем на сервер. На сервере данные проверяются и если форма валидна, то письмо отправляется адресату. Если форма не валидна, то выводим ошибки пользователю.
<?php /** * Форма обратной связи, отправка письма * Site: http://bezramok-tlt.ru * Регистрация пользователя письмом */ // Устанавливаем константы //Адрес почты кому отправляем define('BEZ_MAIL_TO','Office <yourmail@yandex.ru>'); //Адрес почты от кого отправляем define('BEZ_MAIL_AUTOR','Bezramok-tlt <no-reply@bezramok-tlt.ru>'); /**Отпровляем сообщение на почту * @param string $to - Кому * @param string $from - От кого * @param string $title - Заголовок письма * @param string $message - Тело письма */ function sendMail($to, $from, $title, $message) { //Формируем заголовок письма $subject = $title; $subject = '=?utf-8?b?'. base64_encode($subject) .'?='; /*Формируем заголовки для почтового сервера, Говорим серверу что используем HTML*/ $headers = "Content-type: text/html; charset=\"utf-8\"\r\n"; $headers .= "From: ". $from ."\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n"; //Отправляем данные на ящик if(!mail($to, $subject, $message, $headers)) return 'Ошибка отправки письма!'; else return true; } //Если отправили форму, проверяем данные if(isset($_POST['email'])) { //Определяем переменные $resp = array(); //Утюжим переменные if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { $resp['err'][] = 'Не верный Email'; } //Шаблон проверки мобильного телефона $pattern = '/(8|7|\+7)?9\d{9}/'; //Проверяем мобильный телефон if(!preg_match($pattern, $_POST['mobile'])){ $resp['err'][] = 'Не верный мобильный телефон'; } //Формируем заголовок письма $title = 'Ура нам письмо пришло!'; //Формируем HTML верстку письма для отправки $msg = 'Мобильный телефон <strong>'. $_POST['mobile'].'</strong><br />'; $msg .= nl2br($_POST['text']); //Проверяем ошибки if(!empty($resp['err'])) { //Выводим ошибки $resp['status'] = 0; echo json_encode($resp); } else { //Вызываем функцию отправки письма if(sendMail(BEZ_MAIL_TO, BEZ_MAIL_AUTOR, $title, $msg)) { //Отправляем сообщение пользователю $resp['ok'] = 'Письмо отправленно...'; $resp['status'] = 1; echo json_encode($resp); } } } ?>
Чтобы не было проблем с кодировкой, рекомендую создать в корневой директории файл .htaccess с вот таким содержимым: AddDefaultCharset utf-8
Скачать: Создание формы обратной связи в модальном окне на PHP + AJAX
По поводу совместимости версий Jquery вам лучше на Хабре статью почитать https://habrahabr.ru/post/303034/
Возможно она поможет решить Вашу проблему
По поводу формы, упустил момент с отправкой email, чуть позже поправлю скрипт и перезалью. Спасибо что заметили )
Не за что. Приходите еще ))
Тут сложно сказать. Однозначно проблема с версткой. Надеюсь в своем шаблоне вы используете bootstrap
{"ok":"\u041f\u0438\u0441\u044c\u043c\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e...","status":1}Либо, если в поле телефона ошибка то такая:
{"err":["\u041d\u0435 \u0432\u0435\u0440\u043d\u044b\u0439 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d"],"status":0}А если неверен адрес, то:
{"err":["\u041d\u0435 \u0432\u0435\u0440\u043d\u044b\u0439 Email"],"status":0}Подскажете, где ошибку искать?
Доброго времени суток Павел. Проблема в таков выводе заключается в кодировке. Нужно использовать UTF-8 и тогда тест у вас корректно отразится. Вам нужно проверить заголовки сервера на предмет кодировки, если с ним все в порядке то нужно проверить сам файл command.js возможно что при редактировании его вы сменили кодировку сами того не подозревая.
Все правильно, свой адрес почты пишет конкретный человек, а при отправки мы используем свой "транспортный" почтовый адрес для отправки самому себе.