Уважаемые друзья, форма вопрос - ответ снова в строю!

Создание формы обратной связи в модальном окне на PHP + AJAX

Создание формы обратной связи в модальном окне на PHP + AJAX

На заре русского сегмента интернета электронная коммерция не имела такого бурного роста как сейчас. Это обусловливалось тем что доступ к сети интернет имело ограниченное число лиц и это не начало 90-х, а уже в начале 00-х. Я помню те времена кода для выхода в интернет использовали dial up модемы, скорость загрузки страниц был очень медленной, а о скачивании файлов я вообще молчу. Далее на смену dial up пришли DSL технологии и интернет заиграл другими красками. Скорость доступа выросла в разы. В это время началась общая интернатизация общества России. Но и DSL продержался не долго, на смену ему пришел широкополосный интернет использующий Ethernet технологию.

За эти 16 лет интернет прочно вошел в нашу повседневную жизнь и является не отъемлемой частью бизнес-процессов. Соответственно и бизнес сайтов в сети стало очень много, а как вы понимаете бизнесу нужны клиенты. Исходя из потребностей рынка мы свами создадим форму обратной связи в модальном окне и будем использовать AJAX + PHP.

Этапы создания формы обратной связи AJAX + PHP:

  • Верстка формы обратной связи (HTML + Bootstrap 3)
  • Написание кода отправки формы с помощью AJAX технологии (JQuery)
  • Написание обработчика формы обратной связи (PHP)
  • Все библиотеки будут установлены из CDN при желании вы можете их скачать с офф. сайтов.

Структура каталогов

www/
│ 
├── js/
│   └── command.js
│   
├── img/
│    └── 35.gif
│
├── index.html
└── mail.php

Для работы мы будем использовать:

Для быстрой верстки формы и создания модального окна воспользуемся Фреймворком Bootstrap 3. Данный Фреймворк очень сильно облегчает жизнь верстальщикам. Чтобы быть в тренде будем использовать технологию AJAX для отправки данных с формы без перезагрузки самой страницы.

Создаем файл index.html в нем создаем разметку нашей формы обратной связи.

Файл index.html

После создания формы нам необходим обработчик данной формы на стороне клиента. Для этого будем использовать библиотеку JQuery. С помощью ее мы подготовим наш AJAX запрос далее методом POST передадим данные серверу для дальнейшей обработки.

Создаем файл command.js в котором опишем отправку данных с помощью AJAX технологии.

Файл command.js

Как видно из скрипта command.js мы отлавливаем событие формы submit, далее все данные с формы отправляем на сервер. На сервере данные проверяются и если форма валидна, то письмо отправляется адресату. Если форма не валидна, то выводим ошибки пользователю.

Создадим файл mail.php обработчик формы с отправкой письма данных с формы.

Файл mail.php

Чтобы не было проблем с кодировкой, рекомендую создать в корневой директории файл .htaccess с вот таким содержимым: AddDefaultCharset utf-8

Внимание: Если вы используете данный скрипт на локальном сервере типа DENWER, XAMPP, то не стоит ждать писем на свой почтовый ящик. Письма лежат в заглушке sendmail. В Denwer вы их можете найти по пути Z:\tmp\!sendmail\ открыть данные файлы вы сможете в любом почтовом клиенте.
Kvarcus
06:41:42 16/11/2017г.
Спасибо то что надо и работает ) !!!

Есть правда пару вопросов.

Форма использует jquery-2.2.4.min.js а у меня уже подключен jquery-3.2.1.slim.min.js он нужен для работы в dootstrap 4

конфликтов правда не заметил но знаю что использовать 2 jquery разных версий не есть хорошо если отключить 

 jquery-2.2.4.min.js  прелойдер крутиться без остановки и форма не отправляется.

И второй вопрос зачем в форме первым пунктом идет email если информации по нему ни какой не приходит. 

Если не считать эти два пункта, в остальном все замечательно Спасибо.

По поводу совместимости версий Jquery вам лучше на Хабре статью почитать https://habrahabr.ru/post/303034/


Возможно она поможет решить Вашу проблему


По поводу формы, упустил момент с отправкой email, чуть позже поправлю скрипт и перезалью. Спасибо что заметили )  

- Администрация     - 22:52:29 16/11/2017г.

Pavel
07:27:16 11/11/2017г.
Использую шаблон bootstrap. В общем - не стал заморачиваться с темным сайтом и сделал перенаправление на страницу Спасибо сразу после заполнения формы. 

Спасибо за Форму..)

Не за что. Приходите еще ))

- Администрация     - 09:37:49 11/11/2017г.

Pavel
00:38:15 10/11/2017г.
Вроде разобрался.

Скрипт не вписал в html.

Сейчас все отрабатывает так, как нужно, но после отправки письма, форма уезжает, но сайт весь остается темным, словно форма еще активна, и не реагирует на клики.

Тут сложно сказать. Однозначно проблема с версткой. Надеюсь в своем шаблоне вы используете bootstrap

- Администрация     - 08:11:27 10/11/2017г.

Pavel
00:03:18 10/11/2017г.
Здравствуйте.

Пытаюсь встроить вашу форму в сайт. Все работает, письма приходят, за что - огромное спасибо.

Однако после отправки письма на экране, вместо подтверждения отправки открывается такая строчка:

{"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  возможно что при редактировании его вы сменили кодировку сами того не подозревая.

- Администрация     - 08:08:32 10/11/2017г.

Андрей
00:54:54 27/05/2017г.
Я имею в виду с какого мыла отправлялось, ввод мыла есть а приходит с того которое само запишешь

Все правильно, свой адрес почты пишет конкретный человек, а при отправки мы используем свой "транспортный" почтовый адрес для отправки самому себе.

- Администрация     - 17:28:15 28/05/2017г.

Андрей
17:18:08 26/05/2017г.
Привет. Есть вопрос, как сделать чтобы приходило от кого сообщение ? 

Если я правильно понял, то вы хотите получить на почту E-mail отправителя почты? Если так, то нужно в файле обработчике mail.php добавить строку, где формируем HTML верстку для письма перед отправкой.



<?php
//Формируем HTML верстку письма для отправки
$msg = 'Мобильный телефон <strong>'. $_POST['mobile'].'</strong><br />';
$msg .= nl2br($_POST['text']);
?>


<?php
//Формируем HTML верстку письма для отправки
$msg = 'Мобильный телефон <strong>'. $_POST['mobile'].'</strong><br />';
$msg .= 'E-mail отправителя <strong>'. $_POST['email'].'</strong><br />';
$msg .= nl2br($_POST['text']);
?>

- Администрация     - 17:22:31 28/05/2017г.

  • 1
  • 2

Получить уведомление на Email

Введите код с картинки