Универсальный скрипт формы обратной связи для сайта на jQuery AJAX ~ Страницы Интернета

воскресенье, 5 февраля 2017 г.

Универсальный скрипт формы обратной связи для сайта на jQuery AJAX

03:01 By Guest Rooms "Varnaflats.eu" Joomla, jQuery, php, site No comments

Форма обратной связи для сайта на jQuery AJAX

Привет друзья! Наконец-то, после десятка писем на почту с просьбой поделиться скриптом, решил рассказать вам про свой универсальный скрипт формы обратной связи, который работает на AJAX, имеет встроенную проверку полей формы на валидность и подойдет для любого сайта на любом движке, или даже на чистом html.

Сразу стоит сказать, что это не полностью моя разработка, изначально этот скрипт был найден на просторах буржунета, но впоследствии основательно мной переделанный. Так что часть авторства все же принадлежит мне ;)

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

Итак, речь идет вот об этой штуковине --->

В работе вы можете увидеть эту форму на любой странице моего блога. Может быть, кто-то из вас ей даже пользовался.

Приступаем к делу. Чтобы получить такую же форму, вам потребуется выполнить два пункта — установка и настройка — они описаны ниже.

Архивы contactable UTF-8 и Windows-1251

Для сайта с кодировкой UTF-8: contactable.zip
Для сайта с кодировкой windows-1251: contactable_cp1251.zip

Как узнать кодировку своего сайта? Открываем сайт в браузере, нажимаем Ctrl+U (Просмотр исходного кода) и в самом начале находим строку:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
или
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Отсюда сразу понятно, какая у вас кодировка и, следовательно, какой архив необходимо скачать.

Как установить форму обратной связи?

В следующем разделе отдельно представлена установка для CMS WordPress.

Установка проходит в 7 шагов:

Скачиваем архив в нужной кодировке и распаковываем.
Вносим изменения в файлы mail.php и jquery.contactable.js (см. раздел настройка ниже).
Папку contactable и все ее содержимое закидываем на сервер в удобное для вас место.
В шаблоне своего сайта между тегами <head> и </head> вставляем следующий код:
<link rel="stylesheet" href="http://site.ru/your/path/contactable/contactable.css" type="text/css" />
где, http://site.ru/your/path/ надо заменить на путь к директории /contactable/ на вашем сервере.
В шаблоне своего сайта ПОСЛЕ открывающего тега <body> вставляем следующий код:
<div id="contactable"></div>

В шаблоне своего сайта ПЕРЕД закрывающим тегом </body> вставляем следующий код:

<!--start contactable js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1"></script>
<script type="text/javascript" src="http://site.ru/your/path/contactable/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://site.ru/your/path/contactable/jquery.contactable.js"></script>
<script type="text/javascript">$(function(){$('#contactable').contactable();});</script>
<!--end contactable js -->

где, http://site.ru/your/path/ надо заменить на путь к директории contactable/ на вашем сервере.

Очень важный момент! Если у вас на сайте уже подключена библиотека jQuery (а в большинстве случаев это так), то второй раз подключать ее нельзя. В таком случае в коде выше надо убрать строку:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1"></script>

Иначе могут возникнуть конфликты — или форма не заработает, или сайт может «развалиться».

Сохраняем файл шаблона. Обновляем любую страницу сайта и начинаем тестировать форму обратной связи!

Все готово!

Установка формы обратной связи для сайта на WordPress

Решил отдельно написать о том, как более удобно и правильно подключить данный скрипт для блога на движке WordPress.

Скачиваем архив. WordPress по умолчанию представлен в кодировке UTF-8, по этому не ошибитесь с архивом ;)
Редактируем файлы mail.php и jquery.contactable.js (см. раздел настройка ниже).
Папку contactable вместе с содержимым заливаем в папку на сервере /wp-content/plugins/. То есть должно получиться так /wp-content/plugins/contactable/
Идем в админке во «Внешний вид» -> «Редактор», выбираем файл header.php, находим там </head> и ВЫШЕ вставляем:
<script type="text/javascript">$(document).ready(function(){$('#contactable').contactable();});</script>
Жмем «Обновить файл»;

Там же в редакторе открываем файл functions.php и в самый конец, перед ?> вставляем:

/*** Добавляем в wp_head свои css ***/
 function my_css() {
  echo '<link rel="stylesheet" type="text/css" href="http://site.ru/wp-content/plugins/contactable/contactable.css" media="screen" />'."\n";
 }
 add_action('wp_head', 'my_css', 5);

где, http://site.ru/ надо заменить на адрес своего сайта.

Данной функцией мы добавим в <head> </head> css файл стилей формы.

Далее, опять же перед ?> вставляем:

/*** Добавляем в wp_head свои js скрипты ***/
 if( !is_admin()){
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1');
  wp_enqueue_script('jquery');
  wp_enqueue_script('validate', '/wp-content/plugins/contactable/jquery.validate.min.js', 'jquery', '1.8.0');
  wp_enqueue_script('contactable', '/wp-content/plugins/contactable/jquery.contactable.js', 'jquery', '1.2.1');
 }

Этим кодом мы делаем следующее: на всех страницах (кроме админки) мы отключаем стандартную вордпрессовскую библиотеку jquery, а вместо нее подключаем самую новую с серверов Гугла (не переживайте на счет того, что js будет подгружаться с внешнего сервера, во-первых, сервера Гугла самые надежные в мире, во-вторых, мы даже немного снизим нагрузку на свой сервер); далее после подключения jquery, сразу подключаются два js-скрипта формы связи с условием их подключения строго после jquery (это тот случай, когда порядок подключения скриптов имеет больше значение, и если не подключить jquery перед скриптами формы, то форма не заработает).

Жмем «Обновить файл».

Очищаем кеш, если у вас установлен плагин WP Super Cache или подобный.
Обновляем любую страницу своего блога и видимо форму ;)

Как видите, ничего сложного в установке нет.

Настройка формы

Перед тем как заливать файлы из архива к себе на сервер (третий шаг установки), надо внести в них некоторые правки.

Открываем файл jquery.contactable.js и находим там следующий код:

  var defaults = {
   url: 'http://site.ru/your/path/contactable/mail.php',
   name: 'Ваше имя',
   email: 'Ваш E-mail',
   message : 'Сообщение',
   subject : 'Feedback from MySite',
              page : location.href,
   submit : 'Отправить письмо',
   recievedMsg : 'Благодарю вас за письмо',
   notRecievedMsg : 'Извините, но при отправке письма произошла ошибка, попробуйте позже',
   disclaimer: 'Пожалуйста, не стесняйтесь отправлять сообщения. Я буду очень признателен за все отзывы и с радостью отвечу на все ваши вопросы!',
   hideOnSubmit: true
 
  };

Как минимум нам надо изменить для переменной url путь к директории contactable/ на вашем сервере. Эта процедура аналогична четвертому пункту установки. Остальные переменные можете изменять по своему усмотрению.

Открываем файл mail.php и находим там следующий код:

 $contactMessage =
"Имя отправителя: $name <$emailAddr>
 
$comment
 
Письмо отправлено со страницы: $page
IP отправителя: $_SERVER[REMOTE_ADDR]";
 
  //send the email
  mail('admin@site.ru', $subject, $contactMessage, $headers);

Здесь вам необходимо прописать свой контактный e-mail, на который будут сыпаться письма. То есть заменяем admin@site.ru на свой ящик.
Переменная $contactMessage содержит шаблон письма, которое вы будет получать. По умолчанию в шаблоне присутствуют имя и ящик отправителя, само сообщение, страница с которой было отправлено письмо (мне показалось, что это интересная информация для анализа) и IP адрес. Все это можете отредактировать как вам захочется.

По желанию можете изменять внешний вид самой формы, ее цвета и т.д., все css-стили хранятся в файле contactable.css
На этом настройка завершена.

Всякие дополнительные фишки

Если вы хотите, чтобы после отправки сообщения показывалось не только «Спасибо за письмо», но и происходило перемещение пользователя на заданную страницу, необходимо проделать следующее:
Открываем файл jquery.contactable.js и находим:
$(this_id_prefix+'#callback').show().append(options.recievedMsg);
и НИЖЕ добавляем:
document.location.href="http://alaev.info";
где нужно вместо http://alaev.info прописать адрес вашей страницы, куда вы хотите переместить пользователя.

Что еще стоит сказать про этот скрипт?

Форма обратной связи с капчей уже не рулит, потому что данный скрипт работает только при включенном javascript, а у ботов он выключен, соответственно пользователям никакую капчу вводить не придется, а у вас не будет спама.
После установки у вас может возникнуть проблема с кодировкой, поэтому проследите, что вы скачали подходящий архив (я специально подготовил две версии для скачивания). Сохраняйте файлы после редактирования в правильной кодировке (в большинстве случаев принудительно указывать кодировку не придется, но мало ли).
На вопрос «А как сделать чтобы это было справа, а не слева?» отвечаю сразу — исходники открыты, колупайте на здоровье!
Да, эта форма обратной связи не поддерживает аттачи. Но я считаю, что этого и не надо.
А как сделать, чтобы после отправки сообщения форма не исчезала и можно было отправить еще одно сообщение без перезагрузки страницы? Найдите строку hideOnSubmit: true и замените на hideOnSubmit: false
Эта форма не работает на локальном сервере, только на сайтах в сети.
Пока все, но я буду добавлять сюда интересные вопросы из ваших комментариев, чтобы другие их больше не задавали ;)

Вот и все, надеюсь, для вашего сайта эта форма пригодится, пользуйтесь на здоровье!

У вас что-то не работает? Форма не отображается или отображается криво? Не выезжает и не заезжает обратно? Не устраивает стиль и внешний вид?
Придется разбираться самостоятельно и внимательно читать комментарии ниже.
На подобные вопросы в комментариях автор поста (то есть Я) не отвечает.

Страницы Интернета

воскресенье, 5 февраля 2017 г.