Здрастуйте, шановні читачі блогу . Сьогодні я хочу поговорити про способи створення форм зворотного зв’язку, замовлення, контактних та інших типів, які можуть знадобитися вебмайстру для організації зручної комунікації зі своїми відвідувачами або клієнтами.
Зрозуміло, що при використанні Joomla та WordPress питання зворотного зв’язку або замовлення можна вирішити використанням різних розширень або плагінів, але є способи, які підійдуть абсолютно для будь-якого проекту, побудованого як на чистому Html, так і використовує движок Cms (скрипти, cms, конструктори і генератори форм зворотного зв’язку).
Для роботи класичної форми в Html потрібно скрипт обробника, який найчастіше пишеться на мові Php, тому бажано, щоб ваш хостинг мав його підтримку (правда, зараз навіть хостинги надаються безкоштовно підтримують Php).
Хоча, існують рішення і не потребують підтримки Php, і про них теж буде згадано в цій статті. Ніяких особливо докладних описів по установці і настройці в цій статті не буде, бо це лише огляд наявних варіантів, які зараз можна знайти у мережі.
Буду вам надзвичайно вдячний, якщо ви в коментарях приведете свій приклад створення систем зворотного зв’язку (бажано оригінальний, красивий і функціональний) з посиланням на опис і сторінку з прикладом (я поки перебуваю в процесі пошуку ідеального рішення).
Форми зворотного зв’язку для Joomla та WordPress
Давайте подивимося, як можна організувати зворотний зв’язок у Joomla та WordPress стандартними засобами або за допомогою розширень.
В Джумла вже за замовчуванням є безкоштовний компонент «Контакти», який реалізує даний функціонал, налаштування якого ви можете прочитати за наведеним посиланням. Як правило, в дистрибутив цього движка за замовчуванням включають найстабільніші розширення, але не завжди самі функціональні. Та й розробники розширень для Joomla не сплять і періодично з’являються нові більш функціональні рішення.
Так ви можете завантажити окремий модуль зворотного зв’язку для Джумлы під назвою Rapid Contact, який може дати вам нові можливості і функціонал (див. демо). Про налаштування і можливості цього модуля зможете прочитати тут. До того ж, стандартний компонент Joomla для реалізації зворотного зв’язку не володіє достатньою гнучкістю і не дозволяє використовувати захист від спаму (капчу), а також не дозволяє створювати кілька різних контактних форм на сайті.
Ці проблеми вирішуються за допомогою альтернативного компонента для цього движка під назвою aiContactSafev, який дозволяє створювати на сайті будь-яку кількість форм зворотного зв’язку (можна прив’язати їх до різних E-mail адресами) і має можливість додавати поле для завантаження файлів, так само як і будь-які інші типи полів.
У ньому здійснюється перевірка на правильність заповнення полів з видачею повідомлень про помилки, а також aiContactSafev зберігає архів всіх відправлених даних і дозволяє переглянути з адмінки Джумлы.
Цей компонент у своєму складі має дуже гнучко настроюється капчу (введення коду при надсиланні даних для захисту від спаму). Його можна безкоштовно скачати для різних версій Джумла, а прочитати про його налаштування ви зможете тут.
Тепер давайте поговоримо за WordPress. Особисто я поки ще не визначився з цим і у мене на сторінці контактів красується звичайний E-mail, що в загальному-то не дуже добре, бо він уже давно потрапив у спам-базу, і якщо б я не зумів прив’язати пошту для домену через Google Apps до звичайного скриньки в Гмайле, то потік спаму мене б вже давно накрила з головою.
Але спаморезка Гугловський пошти працює добре і навіть занадто добре, бо і ваші листи, шановні читачі, іноді потрапляють під гарячу руку, за що, користуючись моментом, приношу свої вибачення.
Взагалі-то в цьому і полягає основна перевага форми зворотного зв’язку — вона дозволяє зберегти інкогніто вашої поштової адреси для спамерів. Ну і ще вона зазвичай оформлена досить приємну оболонку, що може додати плюсик у відношенні до вашого проекту користувачів, особливо це актуально для комерційних ресурсів, коли зручна форма замовлення або зворотного зв’язку може підвищити конверсію (дохід).
Власне, з приводу WordPress. Є один дуже популярний і дуже потужний плагін, який зветься Contact Form 7. Популярність його просто зашкалює, а це значить, що щось в ньому таке є. Правда для реалізації функції капчі вам доведеться поставити ще додатковий плагін Really Simple CAPTCHA.
Форму зворотного зв’язку можна буде вставити на будь-яку сторінку або в будь-який пост вашого блогу на WordPress, а також в віджет. Фактично це своєрідний конструктор для WordPress, що дозволяє оновлювати інформацію у формі без оновлення сторінки (на технології ajax). Особисто я відчував цей плагін на приблизно пару років тому, і тоді він мені видався дуже важким і недоречно громіздким для реалізації поставлених переді мною цілей (зворотний зв’язок).
Зрозуміло, що за цей час Contact Form 7 міг стати вже набагато більш підходящим для реалізації поставлених перед нами завдань і тому пропоную вам випробувати його в роботі самостійно, спираючись на досить докладний опис. Якщо ви користуєтеся яким-небудь іншим хорошим і легким плагіном, то чиркните, будь ласка, про це пару слів в коментарях.
Так, це ми говорили про реалізацію зворотного зв’язку в Joomla та WordPress за допомогою відповідних розширень.
Але існує ще кілька способів:
Створення форми самостійно. Для цього потрібно буде написати її код і оформити зовнішній вигляд за допомогою Css стилів, а ще написати на Php для неї обробник (в принципі, знань, отриманих з відеокурсу Попова по Php, буде достатньо) і потім додати CAPTCHA, перевірку правильність заповнення полів і щось ще. Відразу скажу, що зробити це буде не просто.
Все у того ж Євгена Попова є серія безкоштовних уроків на його блозі, присвячених самостійного створення зворотного зв’язку для сайту:
Як ви можете бачити, знань і часу буде потрібно досить багато. Тому можна буде для прискорення скористатися вже готовими сценаріями або ж онлайн конструкторами і генераторами форм.
В інтернеті можна знайти досить багато скриптів різних форм — від найпростіших (проте, вимагають від вашого хостингу підтримку Php) до дуже крутих, які встановлюються на сайт подібно повноцінної CMS і вимагають для своєї роботи не тільки підтримку PHP, але і бази даних.
Дані скрипти можна буде встановити і використовувати практично для будь-якого проекту — як статичного (Html), так і динамічного (на Cms). Загалом-то, досить-таки зручний і універсальний інструмент, але вам доведеться, швидше за все, перебрати багато варіантів, щоб знайти щось підходяще саме вам.
Php скрипти форм зворотного зв’язку для сайту
Отже, давайте розглянемо спочатку декілька скриптів, які можна безкоштовно скачати і встановити на свій сайт. Простенький, але досить наочний варіант (використовує капчу для захисту від спаму) можна буде безкоштовно завантажити звідси. Є варіант зворотного зв’язку:
Там і форма замовлення для сайту:
Він являє собою архів, що містить в собі папку, яку потрібно буде скопіювати в кореневу директорію свого сайт (або будь-яку іншу). Далі на сторінці з контактами ви вказуєте посилання з прописаних у ній шляхом до файлу «index.php» з папки «sendmail». Для мого блогу це було б приблизно так:_https:///sendmail/index.php (якщо б я скопіював каталог зі скриптом у кореневу папку).
Налаштування здійснюються за допомогою редагування вмісту файлу «config.php» з директорії «sendmail»:
У першому рядку ви вказуєте адресу поштової скриньки, на яку будуть приходити листи, відправлені за допомогою цієї форми, а в другій сходинці вказуєте бажану кодування тексту (utf 8, windows 1251). У ряді останніх рядків Php коду ви зможете поміняти підписи до полям форми зворотного зв’язку або замовлення. От і все.
Дана форма добре налагоджена і працює стабільно, але її зовнішній вигляд, можливо, здасться комусь занадто спартанським. Особисто мені дуже подобаються варіанти, де з допомогою ajax виводяться повідомлення про помилки заповнення полів і про успішне надсилання повідомлення. Такі форми не вимагають для цього перезавантаження сторінки і виробляють дуже приємне враження на відвідувачів.
Існує досить привабливий скрипт під назвою Super AJAX Contact Form (можна використовувати його і для замовлення), побудований на основі PHP і jQuery з використанням Ajax:
Завантажити його можна з сайту розробника. Правда всі написи в полях будуть англомовними, але ви потім завжди зможете поміняти їх на російські, вносячи зміни у відповідний файл скрипта і використовуючи Google translate при необхідності.
Установка його на сайт нічим не відрізняється від описаної раніше і полягає в копіюванні папки зі скриптом у корінь, а на сторінці контактів залишиться тільки прописати посилання до файлу «index.php» (для мого блога:_https:///code/index.php).
Налаштування форми зворотного зв’язку виробляються в файлі «\code\assets\xml\config.php», де можна прописати як окремий E-mail для різних тем, так і один для всіх (див. про це докладніше в відеоуроці).
В Super AJAX Contact Form здійснюється перевірка правильності заповнення всіх полів і відразу ж (без перезавантаження сторінки — ajax у всій красі) видаються підказки над відповідними полями, що сильно підвищує юзабіліті зворотного зв’язку:
При успішну відправку даних також видається відповідне повідомлення. Це допомагає користувачеві зрозуміти, що саме зараз відбувається:
У мене виникли тільки зауваження по роботі капчі і бажання інтегрувати дану зворотний зв’язок у свою сторінку з контактами, бо відкривати форму в окремому вікні без впровадження в дизайн блогу мені здається не зовсім оптимальним рішенням. Загалом на сторінці автора відеоуроку в коментарях наводиться вирішення цих проблем і ви можете з ними ознайомитися.
Ну і на затравочку хочу навести приклад скрипта зворотного зв’язку, який можна порівняти з міні Cms, бо у нього є своя адмінка, майстер установки, і для його роботи потрібно створити базу даних (або використовувати вже наявну). Натомість ви отримуєте дуже функціональний конструктор, що дозволяє реалізувати практично все, що завгодно.
Даний скрипт називається Генератор форм зворотного зв’язку, завантажити його можна абсолютно безкоштовно за наведеним посиланням. Зверніть увагу, що для скачування доступні три версії скрипта, які відрізняються тільки використовуваної в них капчі:
Скрипт здійснює перевірку на заповненість всіх полів форми, на правильність вводу адреси E-mail, захищає від спаму за допомогою капчі і дозволяє додавати в практично будь-які додаткові поля (завантаження файлу, чекбокси, радіокнопки, поля з множинним вибором і т. д.).
Особливістю встановлення цього скрипта зворотного зв’язку є використання ним бази даних, яку вам потрібно буде попередньо створити або ж використовувати вже наявну (його таблиці будуть помічені в ній своїм префіксом, що допоможе їх потім легко видалити при необхідності). Я вже писав про те, як створити базу даних у cPanel або завантажити, встановити і налаштувати phpMyAdmin.
Для опису процесу встановлення та налаштування даного скрипта потрібно написання окремої статті, тому пропоную вам завантажити і подивитися докладний відеоурок з цього приводу, де також буде наведено опис процесу інтеграції скрипта в дизайн вашого сайту.
Конструктори і генератори форм зворотного зв’язку
Є досить багато онлайн конструкторів і генераторів форм зворотного зв’язку. Наприклад, цей сервіс пропонує вам досить зручний і функціональний інтерфейс для створення конструкцій практично будь-якої складності. На першому кроці вам запропонують вибрати колірну схему:
Після чого вам потрібно вибрати з лівої частини вікна потрібні поля для майбутньої форми і потім, натискаючи на них, зробити їх більш тонку настройку (поставити підписи полів російською мовою, вибрати ширину поля, змінити тип і ввести попередній текст):
Додані поля можна міняти місцями простим перетягуванням миші, видаляти і повторно редагувати:
Загалом, інтерфейс цього онлайн конструктора дуже і дуже сучасний і зручний. Після того, як ви розташуєте всі потрібні поля в потрібному порядку і приведете всі необхідні налаштування, можете натиснути на кнопку зберегти (розташована внизу). На наступній сторінці вам запропонують перейти до перегляду та скачування скрипта зворотного зв’язку або ж повернутися до редагування:
Те, що кнопка «Submit» залишилась не перекладеною, не є велика проблема, бо це можна буде зробити безпосередньо в отриманому коді. Більш докладно про роботу з цим конструктором зворотного зв’язку, його налаштування і встановлення на сайт, ви зможете дізнатися, скачавши цей відеоурок.
Є одне «але» — за допомогою цієї онлайн конструктора ви отримаєте тільки Html код, а от Php обробник даних вам доведеться використовувати свій. Про те, де взяти обробник, можете дізнатися з цього відеоуроку.
Зворотній зв’язок для Html сайтів (без Php)
Є онлайн сервіси, що надають безкоштовно свої власні Php обробники, які будуть розташовані на їх серверах. До такого типу відноситься конструктор на ip-whois:
Не фонтан, звичайно ж, в плані вишуканості дизайну, але зате таку форму можна створити за п’ять секунд і ще за хвилину поставити абсолютно на будь-який сайт, навіть розташований на хостингу без підтримки Php.
Після налаштування зовнішнього вигляду і додавання потрібних полів натисніть на кнопку «Перегляд», а потім на кнопку «Настроїв» та скопіюйте код. Вставте його на сторінку контактів і натисніть на розташовану під кодом кнопку «Вставив».
Після цього введіть адресу сторінки вашого сайту, куди вставили код і E-mail адресу, на який повинні приходити повідомлення, відправлені через цю саму форму.
Є ще один дуже схожий по функціоналу генератор форм зворотного зв’язку. Створені з допомогою нього конструкції теж можна буде розміщувати на хостингах без підтримки Php (достатньо вказати адресу сторінки і E-mail, на який будуть відправлятися повідомлення). Розповідати про нього багато я не буду, бо він по своїй суті дуже схожий на описаний трохи вище конструктор.
Удачі вам! До зустрічей на сторінках блогу
