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

Відразу варто сказати, що це не повністю моя розробка, спочатку цей скрипт був знайдений на просторах буржунете, але згодом ґрунтовно перероблений мною. Так що частина авторства належить мені 😉

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

Отже, мова йде ось про цієї штуковини —>

У роботі ви можете побачити цю форму на будь-якій сторінці мого блогу. Може бути, хтось із вас їй навіть користувався.

Приступаємо до справи. Щоб отримати таку ж форму, вам буде потрібно виконати два пункти — установка і настройка — вони описані нижче.

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

Для сайту з кодуванням UTF-8: contactable.zip
Для сайту з кодуванням windows-1251: contactable_cp1251.zip

Як дізнатися кодування свого сайту? Відкриваємо сайт в браузері, натискаємо Ctrl+U (Перегляд вихідного коду) і на самому початку знаходимо рядок:

або

Звідси відразу зрозуміло, яка у вас кодування і, отже, який необхідно завантажити архів.

Як встановити форму зворотного зв’язку?

У наступному розділі окремо представлена установка для CMS WordPress.

Установка проходить в 7 кроків:

  • Викачуємо архів в потрібній кодуванні і розпаковуємо.
  • Вносимо зміни в файли mail.php і jquery.contactable.js (див. розділ налаштування нижче).
  • Папку contactable і весь її вміст закидаємо на сервер в зручне для вас місце.
  • В шаблоні свого сайту між тегами і вставляємо наступний код:
    <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.

  • Викачуємо архів. WordPress за замовчуванням представлений в кодуванні UTF-8, з цього не помиліться з архівом 😉
  • Редагуємо файли mail.php і jquery.contactable.js (див. розділ налаштування нижче).
  • Папку contactable разом з вмістом заливаємо в папку на сервері /wp-content/plugins/. Тобто повинно вийти так /wp-content/plugins/contactable/
  • Йдемо в адмінці в «Зовнішній вигляд» -> «Редактор», вибираємо файл header.php, знаходимо там і ВИЩЕ вставляємо:
    <script type=“text/javascript”>$(document).ready(function(){$(‘#contactable’).contactable();});</script>

    $(document).ready(function(){$(‘#contactable’).contactable();});

    Тиснемо «Оновити файл»;

  • Там же в редакторові відкриваємо файл functions.php і в самий кінець, перед ?> вставляємо:
    /*** Додаємо в 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 перед скриптами форми, то форма не заробить).

    Тиснемо «Оновити файл».

  • Очищаємо кеш, якщо у вас встановлений плагін 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
    };

    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(‘[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 адресу. Все це можете редагувати як вам захочеться.

  • За бажанням можете змінювати зовнішній вигляд форми, її кольору і т. д., всі css-стилі зберігаються в файлі contactable.css
  • На цьому встановлення завершено.

    • Всякі додаткові фішки

  • Якщо ви хочете, щоб після надсилання повідомлення показувалося не тільки «Спасибі за лист», але і відбувалося переміщення користувача на задану сторінку, необхідно виконати наступне:
    Відкриваємо файл 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
    • Ця форма не працює на локальному сервері, тільки на сайтах в мережі.
    • Поки все, але я буду додавати сюди цікаві питання з ваших коментарів, щоб інші їх більше не задавали 😉

    От і все, сподіваюся, для вашого сайту ця форма нагоді, користуйтеся на здоров’я!

    У вас щось не працює? Форма не відображається або відображається криво? Не виїздить і не заїжджає назад? Не влаштовує стиль і зовнішній вигляд?
    Доведеться розбиратися самостійно і уважно читати коментарі нижче.
    На подібні питання в коментарях автор посту (тобто Я) не відповідає.
    З повагою, Олександр Алаєв

    СТАТТІ ПО ТЕМІБІЛЬШЕ ВІД АВТОРА