Сразу стоит сказать, что это не полностью моя разработка, изначально этот скрипт был найден на просторах буржунета, но впоследствии основательно мной переделанный. Так что часть авторства все же принадлежит мне ;)
Реализация формы обратной связи таким образом, когда ссылка на нее присутствует на каждой странице сайта и всегда в зоне видимости, очень удобна, а посетителям не придется долго её искать. Так же в эту форму можно добавить любые ваши контактные данные, например, ICQ, телефон или skype, в общем, все что захотите.
Итак, речь идет вот об этой штуковине --->
В работе вы можете увидеть эту форму на любой странице моего блога. Может быть, кто-то из вас ей даже пользовался.
Приступаем к делу. Чтобы получить такую же форму, вам потребуется выполнить два пункта — установка и настройка — они описаны ниже.
Архивы contactable UTF-8 и Windows-1251
Для сайта с кодировкой UTF-8: contactable.zip
Для сайта с кодировкой windows-1251: contactable_cp1251.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> вставляем следующий код: где, http://site.ru/your/path/ надо заменить на путь к директории /contactable/ на вашем сервере.
- В шаблоне своего сайта ПОСЛЕ открывающего тега <body> вставляем следующий код:
- В шаблоне своего сайта ПЕРЕД закрывающим тегом </body> вставляем следующий код:где, http://site.ru/your/path/ надо заменить на путь к директории contactable/ на вашем сервере.Очень важный момент! Если у вас на сайте уже подключена библиотека jQuery (а в большинстве случаев это так), то второй раз подключать ее нельзя. В таком случае в коде выше надо убрать строку:Иначе могут возникнуть конфликты — или форма не заработает, или сайт может «развалиться».
- Сохраняем файл шаблона. Обновляем любую страницу сайта и начинаем тестировать форму обратной связи!
Все готово!
Установка формы обратной связи для сайта на WordPress
Решил отдельно написать о том, как более удобно и правильно подключить данный скрипт для блога на движке WordPress.
- Скачиваем архив. WordPress по умолчанию представлен в кодировке UTF-8, по этому не ошибитесь с архивом ;)
- Редактируем файлы mail.php и jquery.contactable.js (см. раздел настройка ниже).
- Папку contactable вместе с содержимым заливаем в папку на сервере /wp-content/plugins/. То есть должно получиться так /wp-content/plugins/contactable/
- Идем в админке во «Внешний вид» -> «Редактор», выбираем файл header.php, находим там </head> и ВЫШЕ вставляем: Жмем «Обновить файл»;
- Там же в редакторе открываем файл functions.php и в самый конец, перед ?> вставляем:где, http://site.ru/ надо заменить на адрес своего сайта.Данной функцией мы добавим в <head> </head> css файл стилей формы.Далее, опять же перед ?> вставляем:Этим кодом мы делаем следующее: на всех страницах (кроме админки) мы отключаем стандартную вордпрессовскую библиотеку jquery, а вместо нее подключаем самую новую с серверов Гугла (не переживайте на счет того, что js будет подгружаться с внешнего сервера, во-первых, сервера Гугла самые надежные в мире, во-вторых, мы даже немного снизим нагрузку на свой сервер); далее после подключения jquery, сразу подключаются два js-скрипта формы связи с условием их подключения строго после jquery (это тот случай, когда порядок подключения скриптов имеет больше значение, и если не подключить jquery перед скриптами формы, то форма не заработает).Жмем «Обновить файл».
- Очищаем кеш, если у вас установлен плагин WP Super Cache или подобный.
- Обновляем любую страницу своего блога и видимо форму ;)
Как видите, ничего сложного в установке нет.
Настройка формы
Перед тем как заливать файлы из архива к себе на сервер (третий шаг установки), надо внести в них некоторые правки.
- Открываем файл jquery.contactable.js и находим там следующий код: Как минимум нам надо изменить для переменной url путь к директории contactable/ на вашем сервере. Эта процедура аналогична четвертому пункту установки. Остальные переменные можете изменять по своему усмотрению.
- Открываем файл mail.php и находим там следующий код:
Переменная $contactMessage содержит шаблон письма, которое вы будет получать. По умолчанию в шаблоне присутствуют имя и ящик отправителя, само сообщение, страница с которой было отправлено письмо (мне показалось, что это интересная информация для анализа) и IP адрес. Все это можете отредактировать как вам захочется.
Здесь вам необходимо прописать свой контактный e-mail, на который будут сыпаться письма. То есть заменяем admin@site.ru на свой ящик. - По желанию можете изменять внешний вид самой формы, ее цвета и т.д., все css-стили хранятся в файле contactable.css
- На этом настройка завершена.
Всякие дополнительные фишки
- Если вы хотите, чтобы после отправки сообщения показывалось не только «Спасибо за письмо», но и происходило перемещение пользователя на заданную страницу, необходимо проделать следующее:
Открываем файл jquery.contactable.js и находим:и НИЖЕ добавляем:где нужно вместо http://alaev.info прописать адрес вашей страницы, куда вы хотите переместить пользователя.
Что еще стоит сказать про этот скрипт?
- Форма обратной связи с капчей уже не рулит, потому что данный скрипт работает только при включенном javascript, а у ботов он выключен, соответственно пользователям никакую капчу вводить не придется, а у вас не будет спама.
- После установки у вас может возникнуть проблема с кодировкой, поэтому проследите, что вы скачали подходящий архив (я специально подготовил две версии для скачивания). Сохраняйте файлы после редактирования в правильной кодировке (в большинстве случаев принудительно указывать кодировку не придется, но мало ли).
- На вопрос «А как сделать чтобы это было справа, а не слева?» отвечаю сразу — исходники открыты, колупайте на здоровье!
- Да, эта форма обратной связи не поддерживает аттачи. Но я считаю, что этого и не надо.
- А как сделать, чтобы после отправки сообщения форма не исчезала и можно было отправить еще одно сообщение без перезагрузки страницы? Найдите строку
hideOnSubmit: true
и замените наhideOnSubmit: false
- Эта форма не работает на локальном сервере, только на сайтах в сети.
- Пока все, но я буду добавлять сюда интересные вопросы из ваших комментариев, чтобы другие их больше не задавали ;)
Вот и все, надеюсь, для вашего сайта эта форма пригодится, пользуйтесь на здоровье!
У вас что-то не работает? Форма не отображается или отображается криво? Не выезжает и не заезжает обратно? Не устраивает стиль и внешний вид?
Придется разбираться самостоятельно и внимательно читать комментарии ниже.
На подобные вопросы в комментариях автор поста (то есть Я) не отвечает.
Придется разбираться самостоятельно и внимательно читать комментарии ниже.
На подобные вопросы в комментариях автор поста (то есть Я) не отвечает.
0 коммент.:
Отправить комментарий