Блог АлаичЪ'а
Только лучшее из мира создания, оптимизации и продвижения сайтов.
Блог
Форум
Услуги
Реклама
Кто Я?
Оптимизация сайтов
SEO Блог
CMS & Кодинг
Универсальный скрипт формы обратной связи для сайта на 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"
<!-- contactable html placeholder -->
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
type
"text/javascript"
src
"http://site.ru/your/path/contactable/jquery.validate.min.js"
><
script
type
"text/javascript"
src
"http://site.ru/your/path/contactable/jquery.contactable.js"
><
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'
где, http://site.ru/ надо заменить на адрес своего сайта.
Данной функцией мы добавим в <head> </head> css файл стилей формы.
Далее, опять же перед ?> вставляем:
/*** Добавляем в wp_head свои js скрипты ***/
if
is_admin
wp_deregister_script
'jquery'
wp_register_script
'jquery'
Материал сокращён при переносе в новую базу знаний. Полная версия сохранена в архиве старого сайта.