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

Универсальный скрипт формы обратной связи для сайта на 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 шагов:

  1. Скачиваем архив в нужной кодировке и распаковываем.
  2. Вносим изменения в файлы mail.php и jquery.contactable.js (см. раздел настройка ниже).
  3. Папку contactable и все ее содержимое закидываем на сервер в удобное для вас место.
  4. В шаблоне своего сайта между тегами <head> и </head> вставляем следующий код:

<link rel="stylesheet" href="http://site.ru/your/path/contactable/contactable.css" type="text/css" />

<div contactable html placeholder --></div>

<!--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());</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.

  1. Скачиваем архив. WordPress по умолчанию представлен в кодировке UTF-8, по этому не ошибитесь с архивом ;)
  2. Редактируем файлы mail.php и jquery.contactable.js (см. раздел настройка ниже).
  3. Папку contactable вместе с содержимым заливаем в папку на сервере /wp-content/plugins/. То есть должно получиться так /wp-content/plugins/contactable/
  4. Идем в админке во «Внешний вид» -> «Редактор», выбираем файл header.php, находим там </head> и ВЫШЕ вставляем:

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

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

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

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

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

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

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

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

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

Всякие дополнительные фишки
  1. Если вы хотите, чтобы после отправки сообщения показывалось не только «Спасибо за письмо», но и происходило перемещение пользователя на заданную страницу, необходимо проделать следующее: Открываем файл jquery.contactable.js и находим:

и НИЖЕ добавляем:

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

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

Вот уже 18 лет я профессионально занимаюсь созданием и продвижением сайтов и 13 лет с удовольствием пишу в любимый блог. Создал заслужившие доверие в seo-сообществе программы FastTrust и ComparseR и известный сервис для проверки траста сайтов CheckTrust.ru.

В 2014 основал веб-студию «АлаичЪ и Ко» в Краснодаре: 1 место в рейтинге агентств интернет-маркетинга (Рейтинг Рунета), 2 место в рейтинге SEO-компаний (CMSmagazine), 12 место в рейтинге известность бренда SEO-компаний в России (SeoNews).

Выступаю на профильных конференциях (All In Top, SEO Conference, SEMPRO, Baltic Digital Days). Веду канал в telegram про seo и бизнес. SEO-специалист года 2019 и 2020 (Sape).

📎📎📎📎📎📎📎📎📎📎