Содержание страницы
домикГлавная / Скрипты java и php / Обратная связь ajax
Обратная связь ajaxВ ваших комментариях часто встречается вопрос: а как можно реализовать вывод сообщений об ошибках в форме обратной связи?

И в этой статье мы разберём пример обратной связи на ajax, с помощью которого ошибки связанные с неправильным вводом данных и различного вида сообщения будут выводиться без перезагрузки страницы в самой форме обратной связи.

Здесь есть "подводные камни", которые мы подробно разберём.

Первый пример формы обратной связи на ajax с выводом ошибок.

Данный скрипт формы обратной связи на ajax я успешно использую на своём сайте, как в качестве добавления комментариев, так и в обратной связи.

Вот такого вида мне приходит на почту письмо, после успешной отправки с сайта:

письмо с сайта

Настройки в файлах скрипта

  • xml/config.php - настройки: E-mail, полей "Тема" и SMTP сервера;
  • xml/fields.php - настройка выводимых сообщений;
  • php/email.class.php - настройка заголовка в приходящем сообщение: "Сообщение с сайта...";
  • php/phpmailer/class.phpmailer.php - глобальные настройки по отправке E-mail сообщений в обратной связи ajax;
  • php/phpmailer/language/phpmailer.lang-br.php - выводимые ошибки при соединение с SMTP сервером.
Для безупречного получения писем с сайта, я в скрипте обратной связи всегда указываю обработку писем через SMTP сервер. Прописываю там настройки полученные от хостера и проблем с доставкой писем не имел никогда.
ОСОБОЕ ВНИМАНИЕ!!
Многие жалуются, что письма отосланные посетителем с указанием почты MAIL.RU не просто не доходят и расцениваются как СПАМ, а имеют статус ошибки, то есть администратор сайта такие письма не получает вовсе.

Это связано с фильтрами в сервисе MAIL.RU, и решается проблема очень просто, читайте дальше.
Для решения этой проблемы необходимо заменить в настройках обратной связи ajax, как показано на рисунке ниже, поле КОМУ (To) и поле От кого (From) на ваши. То есть подставить действующие свои e-mail адреса от указанного в настройках вашего SMTP сервера. К примеру такие адреса: pochta@ваш_домен.ru и adress@ваш_домен.ru соответственно для 2-ух полей, и проблема с доставкой писем исчезнет раз и навсегда.
в письме от кого
Проверить, правильно ли заполнили вы данные поля, можно в пришедшем сообщение в его свойствах, либо как у меня (из рисунка) на хостинге в WEBMAIL.
И последнее:
Для отображения формы обратной связи на ajax с выводом ошибок, достаточно из скачанного архива залить единственную папку на свой сервер, на странице прописать html код формы и подключить css файл и java скрипт, как это сделано в файле index.php из того же архива.

стрелка вниз Скачать первый пример обратной связи ajax

Ссылка на файл: скачать архив

Второй пример формы обратной связи на ajax.

Во втором примере формы обратной связи ajax функционал практически одинаковый, с разницей в том, что здесь нужно заполнять поле ТЕМА и другая каптча против спама.

Java скрипты и обработчик php в последнем примере используются совершенно другие, где с одной стороны здесь намного легче с настройками и проще сделать одни изменения, а с другой стороны некоторое внедрение что-то нового - требует навыков программирования.

А в остальном всё одинаково: в обработчике меняете почту на свою и делаете оформление формы обратной связи под свой дизайн.

стрелка вниз Скачать второй пример обратной связи ajax

Ссылка на файл: скачать архив
Дата публикации: 27.07.2018
Комментарии
Александр
3 августа 2018 13:52
Александр
Здравствуйте, подскажите пожалуйста, у вас на страничке в первом примере обратной связи на ajax отсутствует поле для телефона, а в архиве эта графа есть, так вот, я графу телефона убираю и скрипт обратной связи перестает работать корректно.
А именно нет всплывающих окон об ошибках.
скажите, что ещё надо сделать чтобы скрипт заработал как надо!
Admin
3 августа 2018 15:11
Admin
Добрый день!
Вспоминаю об этой проблеме, - тоже немного помучился. При не правильном удалении полей форма обратной связи на ajax перестаёт функционировать сразу. Там всё взаимосвязано и поэтому просто удалить любое поле из формы приводит к краху.

1. Удаляете в форме поле для телефона.
2. Открываете файл: assets/xml/fields.php и удаляете эту строку полностью:
xmlCOPY
<field><alias>phone</alias><name>Phone</name><message>Only ... accepted!</message><func>numeric</func><is>custom</is></field>
3. Открываете файл: assets/php/protector.class.php находите и удаляете этот код:
phpCOPY
elseif($field["func"] == "numeric"){ $return = (bool)!preg_match("/^\b[0-9]+\b$/" , $this->data[$key]); }

Читать полностью

Александр
3 августа 2018 17:41
Александр
Спасибо, по первому примеру всё заработало, всё настроил!
Одно не могу сделать в обратной связи ajax это, что надо указать в файле xml/config.php, какие настройки делать для: E-mail, Тема и SMTP сервера.
И как сделать, чтобы было всё на Русском языке, а то приходит всё латиницей - Тема Other.
Admin
3 августа 2018 18:29
Admin
Для <Addresses> в первой строке указываете свой E-mail адрес.
Далее идут три строки для Темы, здесь вы можете дополнить их количество, или наоборот уменьшить - это ваши потребности, и они должны быть такими же ( поля ) как и в самой форме обратной связи, как по количеству, так и по названию.

Ну не ужели вы сами не догодались, что здесь нужно заменить: Support, Sales и Other на русские слова, идентичные в форме. Поэтому к вам и приходит на латинице.

Далее в этом же файле настройки для <smtp>:
Здесь каждый экспериментирует под себя, как у него лучше будет работать отправка писем.
По умолчанию SMTP отключён <use>no</use>, для включения пропишите <use>yes</use>, если оставить выключенным, то будет работать через Mail, и дальше прописывать ничего не нужно.

Изготовитель предлагает прописывать свои данные от бесплатной почты ( нужно иметь аккаунт ) Gmail.com, где нужно заполнить данные от этой почты.
Я например, использую данные от своего хостинга и прописываю свои SMTP, которые предоставил хостинг.

Читать полностью

Александр
3 августа 2018 23:03
Александр
Вот так вот, шаг за шагом решил все проблемы с обратной связью на ajax!
спасибо большое!
Андрей Подлепин
24 июня 2018 16:05
Андрей Подлепин
Спасибо за форму обратной связи на ajax.
Это уже второй скрипт с этого сайта, который реально работает. Спасибо автору.
Вопрос: как можно добавить прикрепления файла к форме?
Спасибо.
Admin
4 августа 2018 10:28
Admin
Ради интереса можно было поковыряться, но нет времени сейчас.
Поищите в инете отдельный фрагмент для добавления в форму обратной связи прикрепление файла, и попробуйте прикрутить его к данному скрипту не забывая про безопасность.
Надежда
19 марта 2019 22:17
Надежда
Здравствуйте
Я посмотрела ваш исходный код добавления комментариев, где вы используете форму обратной связь на ajax 1 варианта, и увидела следующую картину:

1. это 2 скрытых поля: мой IP адрес и адрес текущей страницы ( я так понимаю, вы получаете эти данные ).
2. вы сделали раскрывающийся список всех полей при клике.

У меня к вам 2 вопроса:
1. Поделитесь пожалуйста, какой код вы использовали для скрытых полей ( вывод IP и адреса ) - мне тоже это очень-очень нужно.
2. Какую функцию выполняют раскрывающиеся поля формы при клике, только для красоты?
Admin
20 марта 2019 10:04
Admin
Доброе утро!
1. абсолютно точно, я получаю эти данные. А код для этих целей можно легко найти в интернете. Я использую такие:
для вывода IP пользователя:
<?php echo $_SERVER['REMOTE_ADDR'];?>
для вывода текущей страницы:
<?php echo "http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];?>
Не забывайте, добавляя в форму обратной связи на ajax ( первый вариант ) дополнительные поля, нужно добавлять анологичные записи и в файл assets/xml/fields.php

2. Раскрывающиеся пункты при клике в форме добавления комментариев, - это в первую очередь для борьбы со Спамом, а уже потом красота. Первые поля на CSS, последние на JS. То есть, многие программы для автоматической рассылки писем используют такую функцию, как отключение на странице CSS и JS, и вся ваша форма для них в "голом виде", и ваш любой скрытый блок display: none; становится для них видимым и они легко заполняют все данные и отправляют сообщение.

Я же специально использовал для каптчи и кнопки JS скрипт, где нужно обязательно кликнуть ( что программы не делают ), и при отключённом JS, - они эти поля вовсе не увидят ( потому как их без JS нет ) и не смогут ничего отправить.

Читать полностью

Надежда
20 марта 2019 14:32
Надежда
Благодарю вас за отзывчивость))) что запланировала,- все работает.
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!