Якість веб-сайту та його юзабіліті багато в чому залежать від того, чи зможуть його майбутні відвідувачі легко зв'язатися з адміністрацією або менеджерами.
Безперечно, можна скористатися можливістю надсилання листа на електронну пошту, вказану в контактах. Але цей спосіб занадто довгий і незручний, особливо якщо йдеться про невелике питання, рекомендації чи зауваження.
У цьому є логічним використання форми зворотний зв'язок.
Сутність та значення форми зворотного зв'язку для Joomla
Форма зворотнього зв'язку є зручним інструментом для відправлення повідомлень адміністрації сайту.
Ця невелика, але дуже значуща деталь сучасних сайтів не призводить до створення зайвої ваги сторінки і не пов'язана з написанням значної кількості громіздких скриптів.
Система управління контентом (CMS) Joomla 3 дозволяє створити форму зворотного зв'язку, яка має такі переваги:
- Просте налаштування;
- Гарний та зручний інтерфейс;
- Можливість оперативного надсилання повідомлень;
- Наявність контактної форми на всіх сторінках сайту;
- Можливість обійтись без перезавантаження сторінки;
- Захист від спаму.
Коли користувач надсилає адміністрації листа через даний компонент він автоматично приходить на електронну скриньку власників сайту.
По суті, весь процес роботи форми зворотного зв'язку можна у вигляді двох етапів:
- Заповнення відвідувачем необхідних полів;
- Відправка повідомлення.
Важливо відзначити, що подібна форма може складатися із довільної кількості полів різного призначення. При цьому такі поля, як "E-mail", "Ім'я", "Тема" та "Повідомлення" є обов'язковими.
Процес створення форми зворотного зв'язку в Joomla 3: покрокова інструкція
Стандартний функціонал CMS Joomla 3 дозволяє створити форму зворотнього зв'язку без встановлення додаткових розширень. Це значно полегшує завдання формування цього важливого модуля на будь-якому сайті.
У зв'язку з цим наведена нижче інструкція може бути корисною навіть для любителів, які не повною мірою знайомі з тонкощами програмування.
Доцільно детально розглянути кожен із етапів створення форми зворотного зв'язку на Joomla 3 .
Крок 1.
В адмін-панелі Joomla 3 слід відкрити меню «Компоненти» та перейти на вкладку «Контакти»:
Крок 2
У вікні слід натиснути кнопку «Створити», після чого з'явиться форма з порожніми полями. Тут необхідно вказати всі необхідні дані.
Зокрема, поля «Ім'я», «Категорія» та « Пов'язаний користувач» є обов'язковими для заповнення. Крім того, можна вказати такі контактні дані: «Посада», «Поштова скринька», «Місто», «Сайт», «Телефон» тощо.
Після завершення заповнення встановлюється стан "Опубліковано". Якщо форма зворотнього зв'язку налаштовується для мультимовного сайту, то також важливо вибрати мову, для якої вона відображатиметься:
Крок 3
На вкладці « додаткова інформація» можна розмістити додаткові контактні дані, наприклад, схему проїзду, або графік роботи, які можуть мати важливе значення для користувачів форми зворотного зв'язку:
Крок 4
На вкладці « Параметри публікації» є можливим вказати дату початку та кінця публікації, а також прописати мета-описи та мета-тег « дозволити/заборонити» індексацію сторінки:
Крок 5.
На наступній вкладці – « Налаштування відображення» можна вибрати, які контактні дані потрібно публікувати на сторінці, оскільки за замовчуванням опубліковані всі дані.
Тут слід встановити формат відображення форми зворотного зв'язку Joomla 3 .
Слід підкреслити, що всього є три варіанти відображення:
- « Згортання списків» - на сторінці будуть два або три пункти: контакт, форма зворотнього зв'язку та додаткова інформація, розташовані вертикально;
- «Вкладки» - відображатимуться ті самі вкладки, тільки горизонтально;
- «Звичайний» — на сторінці буде видно всі вказані контактні дані.
Крок 6.
На останній вкладці «» можна настроїти блоковані теми та поштові скриньки, а також активувати пункт « Надіслати копію листа на пошту відправника»:
Крок 7
Після того, як вказані всі необхідні дані, потрібно зберегти контакт:
Крок 8.
Після збереження необхідно сформувати пункт меню створеного контакту. Для цього потрібно перейти до розділу «Меню» та вибрати в ньому «Головне меню», потім вкладку « Створити пункт меню»:
Крок 9
У вікні потрібно прив'язати окремий пункт меню до головного або вертикального меню, яке зазвичай розташовується в лівому або правому блоці адмін-панелі Joomla 3 :
Крок 10
Як тип пункту меню необхідно вибрати розділ «Контакти»:
Крок 11.
Після встановлення типу пункту меню з'явиться поле «Вибір контакту». У ньому потрібно вибрати створений на попередніх етапах контакт (у разі – Адміністратор).
Важливо підкреслити, що вкладки « Параметри відображення контактів» та «Параметри пошти», копіюють налаштування вкладок « Налаштування відображення» та « Установки відображення контактів» відповідно:
Крок 12
На вкладці « Параметри відображення посилання» прописується поле « Заголовок, як посилання», який є описом користувача пункту меню. Згодом цей опис буде відображатися при наведенні курсору на пункт меню.
Також можна додати пункту меню свій клас CSS, якщо потрібне його унікальне оформлення. Цей пункт не є обов'язковим:
Крок 13
Після завершення описаних вище операцій можна налаштувати параметри відображення сторінки, а саме теги title та h1 цієї сторінки.
Цю вкладку також можна пропустити, у цьому випадку заголовок відображатиме назву сторінки, в даному випадку – «Зворотній зв'язок»:
Крок 14
На вкладці "Метадані" вказуються мета теги Description та Keywords веб-сторінки. По суті, ця вкладка повторює налаштування розділу « Параметри публікації», який відкривається у вікні створення контактів.
Вітаю моїх читачів, набрався досвіду та розповім Вам про принципи роботи форми зворотного зв'язку php. Покажу на наочних прикладах, щоб ви розуміли, як усе влаштовано і як відбувається взаємодія між самою формою введення (її полями input) і файлом-обробником, написаний мовою php. До того ж безкоштовно зможете завантажити вихідні дані разом з .
Звичайно здорово буде, якщо ви хоч трохи знаєтеся на HTML / CSS т.к. Вам доведеться за аналогією перетягувати код на свою сторінку. PHP мову зачіпати не будемо, всі необхідні редагування, які потрібно буде зробити під себе я покажу.
UPDATE:За відгуками читачів, я зрозумів, що потрібно щось красивіше і функціональне, зустрічайте, ознайомтеся і подивіться. Самі вибирайте яка більше сподобається)
UPDATE2: Version 3.0 Адаптивний Лендінг + форма ajax з передачею UTM-міток, ознайомтеся та подивіться. Вам сподобається
Згадав себе, коли вперше намагався робити самостійно форму зворотний зв'язок на php, і чесно зізнатися було трудомістко, т.к. не розумів, що і як відбувається. Терпіння та завзятість друзі і у вас все вийде.
Форма зворотнього зв'язку php - структура
Розбір самої форми зворотний зв'язок будемо вивчати з прикладу посадкової сторінки (Landing Page), до речі є окрема стаття з . Подивитися як це працює в дії можете за кнопками розташованими нижче, прикладаю вихідники цього односторінника та головного файлу обробника-php (цей файл і оброблятиме і надсилатиме лист на email)
Після того як завантажуєте вихідні дані та розпакуєте архів, ви побачите наступну структуру за файлами:
- image - всі зображення, які використовуються для самого Landing Page, кнопки і т.д.
- js — javascript скрипти, які забезпечують, наприклад, спливаюче модальне вікно на сторінці та інші візуальні ефекти
- index.html - індексний файл нашого односторінника
- index1.php — файл обробник, в який передаються значення форми, далі формується лист з отриманих змінних і відправляється на вказану email адресу. Також index1.php трапиться в ролі проміжної сторінки повідомлення про успішну відправку даних з автоматичним перенаправленням назад на index.html (тобто наш односторінок)
Важливо, щоб ваш хостинг, на якому розташовуються файли сайту, підтримував обробку php, інакше файл index1.php не виконається і працювати не буде. Щоб уточнити цей нюанс, зверніться в кампанію, де зареєстрований ваш хостинг або просто протестуйте — працює, то є підтримка. Якщо ні, то увімкніть опцію підтримки мови php
Погляньте на схему роботи взаємодії всіх елементів (сторінка, форма, обробник)
Вихідний код виклику форми та обробника
Поглянемо на роботу однієї з кнопок, що викликає модне спливаюче вікно, в якому знаходиться форма зворотного зв'язку. Даний наведений вихідний код - це не раз, два вставив на сторінку і запрацює, Вам доведеться самим підганяти під свій дизайн та потреби.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Замовити зворотній дзвінок
Замовте зворотній дзвінок
|
Замовити зворотній дзвінок
Нижче повний вихідний код обробника index1.php, для того щоб налаштувати відправку на свою поштову скриньку, поміняйте « [email protected]» на свій, інше в принципі можна залишити без змін
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | "; // від кого $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email"); ini_set("short_open_tag", "On"); header("Refresh: 3; URL=index.html"); ?>
 |