Бесплатное в сети!
» » Обратная связь 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

Ссылка на файл: obratnaya-svyaz-ajax.zip

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

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

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

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

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

Ссылка на файл: obratnaya-svyaz-ajax-2.zip

Комментарии 9
Александр
3 августа 2018 13:52
Александр

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

Читать полностью
3 августа 2018 15:11
Admin

Александр,
Добрый день!
Вспоминаю об этой проблеме, - тоже немного помучился. При не правильном удалении полей форма обратной связи на ajax перестаёт функционировать сразу. Там всё взаимосвязано и поэтому просто удалить любое поле из формы приводит к краху.
Необходимые изменения в файлах:

Доступ закрыт

Стоимость доступа ко всей странице 20.00 RUR.
После оплаты доступ будет открыт в течение 3 дн.
Для оплаты Вам необходимо зарегистрироваться либо войти на сайт.

Читать полностью
Александр
3 августа 2018 17:41
Александр

Admin,
Спасибо, по первому примеру всё заработало, всё настроил!
Одно не могу сделать в обратной связи ajax это, что надо указать в файле xml/config.php, какие настройки делать для: E-mail, Тема и SMTP сервера.
И как сделать, чтобы было всё на Русском языке, а то приходит всё латиницей - Тема Other.

Читать полностью
3 августа 2018 18:29
Admin

Александр,
Для <Addresses> в первой строке указываете свой E-mail адрес.
Далее идут три строки для Темы, здесь вы можете дополнить их количество, или наоборот уменьшить - это ваши потребности, и они должны быть такими же ( поля ) как и в самой форме обратной связи, как по количеству, так и по названию.
Ну не ужели вы сами не догодались, что здесь нужно заменить: Support, Sales и Other на русские слова, идентичные в форме.
Поэтому к вам и приходит на латинице.

Читать полностью
Александр
3 августа 2018 23:03
Александр

Admin,
Вот так вот, шаг за шагом решил все проблемы с обратной связью на ajax!
спасибо большое! smirk

Читать полностью
Андрей Подлепин
4 августа 2018 10:07
Андрей Подлепин

Спасибо за форму обратной связи на ajax.
Это уже второй скрипт с этого сайта, который реально работает. Спасибо автору.
Вопрос: как можно добавить прикрепления файла к форме?
Спасибо.

Читать полностью
4 августа 2018 10:28
Admin

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

Читать полностью
Артём
4 августа 2018 17:40
Артём

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

Читать полностью
4 августа 2018 18:24
Admin

Артём,
Привет!
Для вашего примера удалять ничего не нужно. Необходимо к существующему class добавить ещё один класс и для него прописать стилевые значения.
Где в итоге пользователь не увидит поля Сообщение, форма с ajax будет исправно работать, и вы получите в письме прописанную вами в этом поле информацию.
Я так понимаю, в этом тексте будет скрытая информация о самом пользователе ( IP, браузер и т.д. ) или что-то подобное, иначе смысла просто нет.

Необходимые изменения:

<style type="text/css">
 .avd{display:none;}
</style>

<span class="input avd">
 <label for="message"><b>Message:</b></label>
 <textarea id="message" name="message">Ваша некая информация</textarea>
 <div class="warning" id="messageError">This field cant stay empty</div>
</span>

Читать полностью
Добавить комментарий