Привіт друзі! Нарешті, після десятка листів на пошту з проханням поділитися скриптом, вирішив розповісти вам про свій універсальний скрипт форми зворотного зв’язку, який працює на AJAX, має вбудовану перевірку полів форми на валідність і підійде для будь-якого сайту на будь-якому движку, або навіть на чистому html.
Відразу варто сказати, що це не повністю моя розробка, спочатку цей скрипт був знайдений на просторах буржунете, але згодом ґрунтовно перероблений мною. Так що частина авторства належить мені 😉
Реалізація форми зворотного зв’язку таким чином, коли посилання на неї на кожній сторінці сайту і завжди в зоні видимості, дуже зручна, а відвідувачам не доведеться довго її шукати. Так само в цю форму можна додати будь-які ваші контактні дані, наприклад, ICQ, телефон або skype, загалом, все що захочете.
Отже, мова йде ось про цієї штуковини —>
У роботі ви можете побачити цю форму на будь-якій сторінці мого блогу. Може бути, хтось із вас їй навіть користувався.
Приступаємо до справи. Щоб отримати таку ж форму, вам буде потрібно виконати два пункти — установка і настройка — вони описані нижче.
Архіви contactable UTF-8 і Windows-1251
Для сайту з кодуванням UTF-8: contactable.zip
Для сайту з кодуванням windows-1251: contactable_cp1251.zip
Як дізнатися кодування свого сайту? Відкриваємо сайт в браузері, натискаємо Ctrl+U (Перегляд вихідного коду) і на самому початку знаходимо рядок:
або
Звідси відразу зрозуміло, яка у вас кодування і, отже, який необхідно завантажити архів.
Як встановити форму зворотного зв’язку?
У наступному розділі окремо представлена установка для CMS WordPress.
Установка проходить в 7 кроків:
<link rel=“stylesheet” href=“http://site.ru/your/path/contactable/contactable.css” type=“text/css” /> |
де, http://site.ru/your/path/ треба замінити на шлях до директорії /contactable/ на вашому сервері.
<div id=“contactable”></div> |
<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> |
$(function(){$(‘#contactable’).contactable();});
де, 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.
<script type=“text/javascript”>$(document).ready(function(){$(‘#contactable’).contactable();});</script> |
$(document).ready(function(){$(‘#contactable’).contactable();});
Тиснемо «Оновити файл»;
/*** Додаємо в wp_head свої css ***/ function my_css() { echo “.“\n“; } add_action(‘wp_head’, ‘my_css’, 5); |
/*** Додаємо в wp_head свої css ***/
function my_css() {
echo “.”\n”;
}
add_action(‘wp_head’, ‘my_css’, 5);
де, http://site.ru/ треба замінити на адресу свого сайту.
Даною функцією ми додамо в 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’); } |
/*** Додаємо в 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 перед скриптами форми, то форма не заробить).
Тиснемо «Оновити файл».
Як бачите, нічого складного в установці немає.
Настройка форми
Перед тим як заливати файли з архіву до себе на сервер (третій крок установки), треба внести деякі правки.
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 }; |
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/ на вашому сервері. Ця процедура аналогічна четвертому пункту установки. Інші змінні можете змінювати на свій розсуд.
$contactMessage = “Ім’я відправника: $name <$emailAddr> $comment Лист відправлено зі сторінки: $page IP відправника: $_SERVER[REMOTE_ADDR]“; //send the email mail(‘[email protected]’, $subject, $contactMessage, $headers); |
$contactMessage =
“Ім’я відправника: $name
$comment
Лист відправлено зі сторінки: $page
IP відправника: $_SERVER[REMOTE_ADDR]”;
//send the email
mail(‘[email protected]’, $subject, $contactMessage, $headers);
Тут вам необхідно прописати свій контактний e-mail, на який будуть сипатися листи. Тобто замінюємо [email protected] на свій ящик.
Змінна $contactMessage містить шаблон листа, який ви буде отримувати. За умовчанням в шаблоні присутні ім’я і ящик відправника, само повідомлення, сторінка з якої було відправлено лист (мені здалося, що це цікава інформація для аналізу) і IP адресу. Все це можете редагувати як вам захочеться.
Всякі додаткові фішки
Відкриваємо файл jquery.contactable.js і знаходимо:
$(this_id_prefix+‘#callback’).show().append(options.recievedMsg); |
$(this_id_prefix+’#callback’).show().append(options.recievedMsg);
і НИЖЧЕ додаємо:
document.location.href=“http://alaev.info”; |
document.location.href=”http://alaev.info”;
де потрібно замість http://alaev.info прописати адресу вашої сторінки, куди ви бажаєте перемістити користувача.
Що ще варто сказати про цей скрипт?
- Форма зворотного зв’язку з капчею вже не рулить, тому що цей скрипт працює тільки при включеному javascript, а у ботів він вимкнений, відповідно користувачам ніяку вводити капчу не доведеться, а у вас не буде спаму.
- Після установки у вас може виникнути проблема з кодуванням, тому переконайтеся, що ви завантажили відповідний архів (я спеціально підготував дві версії для скачування). Зберігайте файли після редагування в правильному кодуванні (в більшості випадків примусово вказувати кодування не доведеться, але мало).
- На питання «А як зробити щоб це було праворуч, а не ліворуч?» відповідаю відразу — вихідні відкриті, колупайте на здоров’я!
- Так, ця форма зворотного зв’язку не підтримує аттачи. Але я вважаю, що цього і не треба.
- А як зробити, щоб після надсилання повідомлення форма не зникала і можна було відправити ще одне повідомлення без перезавантаження сторінки? Знайдіть рядок hideOnSubmit: true і замініть на hideOnSubmit: false
- Ця форма не працює на локальному сервері, тільки на сайтах в мережі.
- Поки все, але я буду додавати сюди цікаві питання з ваших коментарів, щоб інші їх більше не задавали 😉
От і все, сподіваюся, для вашого сайту ця форма нагоді, користуйтеся на здоров’я!
У вас щось не працює? Форма не відображається або відображається криво? Не виїздить і не заїжджає назад? Не влаштовує стиль і зовнішній вигляд?
Доведеться розбиратися самостійно і уважно читати коментарі нижче.
На подібні питання в коментарях автор посту (тобто Я) не відповідає.
З повагою, Олександр Алаєв