Вітаю моїх читачів, набрався досвіду та розповім Вам про принципи роботи форми зворотного зв'язку 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 | З вами зв'яжуться |
З вами зв'яжуться body (background: #22BFF7 url(img/zakaz.jpg) top -70% no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Змінити поточну адресу сторінки через 3 секунди (3000 мілісекунд)*/
Перевірка працездатності формиВикликаємо вікно та вводимо дані для тестової перевірки нашої форми 
Ще раз нагадаю, ваш хостинг повинен підтримувати обробку php файлів, інакше наш обробник просто не виконається і жодного листа не відправиться на вказану email-адресу. Результат успішно відпрацьованої форми зворотного зв'язку 
У мене на цьому все, намагався донести сенс і роботу скрипта якнайкраще. Виникнуть питання, можете сміливо звертатися до коментарів або до мене у VK (дивіться контактні дані). Бажаю легкої та продуктивної роботи Вам.
Якщо ви хочете, щоб питання було обов'язковим для заповнення, не забувайте перемикати відповідний бігунок у нижній частині вікна редагування питання - для обов'язкового питання він повинен бути перемиканий праворуч і горіти зеленим кольором.
Хитрість друга: порядок питаньУ режимі редагування форми будь-яке питання можна перетягнути вгору-вниз, для цього треба потягнути за іконку із шести крапок у верхній частині питання. Зазвичай курсор мишки реагує на цю іконку, перетворюючись на чотиристоронню стрілку:
Але тут також є хитрість. У гуглівських формах так усе влаштовано, що у підсумковій таблиці з відповідями порядок питань відповідатиме історії їх створення, а не порядку, в якому ви їх розташували після.
Хоча перетягувати питання при створенні форми досить легко і зручно, не захоплюйтеся перетягуванням - розібратися потім у таблиці з відповідями буде складніше.
Google постійно вносить різні покращення в інтерфейс своїх сервісів, але ця особливість гугл форм поки що так жодного разу і не змінювалася.
Щоб переглянути відповіді, треба перейти на вкладку «Відповіді» на самому початку форми:
Коли ваші учасники заповнять кілька форм, то в цьому екрані з'являться дві опції: "Зведення" та "Особливий користувач". Там можна буде швидко пробігти очима з усіх відповідей.
Я рідко користуюся цим екраном, мені зручніше відразу перейти в таблицю, яка організована на кшталт MS Excel-файлу. Щоб відобразити заповнені анкети як зведеної таблиці, необхідно натиснути на зелену іконку і вибрати Створити таблицю >> Нова таблиця >> Створити. У новій вкладці браузера відкриється Google Таблиця, названа так само, як ваша форма, але з припискою в кінці: (Відповіді).
Ці два файли в Google драйві будуть відображатися як різні файли, але між ними завжди буде нерозривний зв'язок. Як тільки новий учасник заповнить анкету, дані миттєво з'являться у таблиці.
Крок 4. Наводимо красу: вибираємо шаблон зовнішнього виглядуГугловські форми мають стандартний фіолетовий вигляд, але колір можна легко замінити на будь-який інший зі стандартного набору. Для цього натисніть на іконку панелі у верхньому правому кутку:
Ви також можете вибрати один із кількох безкоштовних дизайнів. Деякі з них цілком симпатичні, є і тематичні для різних свят та типів подій. Щоб вибрати особливий шаблон, потрібно натиснути на іконку в правому нижньому кутку палітри, і відкриється окреме віконце з вибором категорій:
Перш ніж надсилати форму учасникам, переконайтеся, що ваша форма виглядає на п'ять із плюсом. Відкрийте її в окремому вікні та спробуйте заповнити самі. Щоб відкрити форму, потрібно знову піти у правий верхній кут, натиснути на іконку трьох вертикальних точок і вибрати «Відкрити форму».
Якщо все відображається коректно і ви нічого не забули, то настав час надсилати анкету учасникам.
Другий спосіб виглядає швидше, але мені особисто подобається перший. Розсилку по учасникам можна зробити і більш персоналізоване, додати до неї потрібне посилання на сайт, а вже на сайті зробити сторінку з формою. Зрештою, кожен перехід на ваш сайт - це вимірний результат, а на сайті, крім анкети, може бути ще багато всього корисного.
Щоб вбудувати форму на сторінку вашого сайту або блогу, потрібно піти у верхній правий кут і натиснути на іконку паперового літачка. У віконці є три варіанти, як відправити: лист, посилання і вбудувати в веб-сторінку. Вибираємо третю іконку:
Скопіюйте HTML-код, вставте його у вихідний код сторінки сайту і вуаля - .
Другий спосіб – відправити учасникам пряме посилання на анкету. Вибираємо у тому меню іконку з посиланням, складаємо текст листа, додаємо посилання в лист. Якщо ви користуєтеся такими сервісами розсилок як MailChimp або йому подібні, цей спосіб може бути найбільш зручним.
Якщо ви все-таки вирішили відправляти гугл форму на email учасникам вашої події прямо з інтерфейсу Google, не забувайте додавати повідомлення. Рекомендую поставити галочку «надіслати мені копію» і зробити пару тестових листів, перш ніж надсилати їх усім. Так ви хоча б побачите, як виглядав надісланий вами лист.
Пара слів про різні налаштування в Google ФормахЯ вірю в метод пізнання інтерфейсів «тикнув – спробував – зрозумів». Тому вважаю, що навіть якби мені пояснили, що робить кожна кнопка на панелі інструментів, я все одно не запам'ятала б.
Але у гуглівських форм є деякі налаштування, до яких рідко можна дістатися методом тику, і мені вони сильно допомагають щоразу, коли я створюю будь-які анкети.
Важливе налаштування форми: повідомлення про заповнену анкету для учасникаКоли гість вашої події заповнив усі питання і натиснув «надіслати», Google покаже йому сторінку з повідомленням про успішне відправлення. За замовчуванням у Google стоїть нелюдське «Відповідь записано». Жоден організатор події, який цінує своїх гостей та цінує їхню лояльність, не може собі дозволити залишити це без змін!
Тому не лінуємося і заходимо в меню через верхній правий кут, вибираємо «Налаштування» і знаходимо розділ «Сторінка підтвердження». У полі «Повідомлення для респондентів» пишемо щось особисте та унікальне, наприклад так:
Там же є різні параметри заповнення форми, на які варто звернути увагу: дозвіл заповнювати анкету кілька разів, дозвіл на перегляд зведення відповідей, індикатор прогресу заповнення (для довгих форм особливо важливо) і різні інші.
Ще одна корисна галочка – повідомлення про те, що прийшла заповнена анкета. Якщо ви ці повідомлення не налаштуєте, Google вас турбувати взагалі не буде, і ви дізнаєтеся, скільки людей заповнило анкету тільки якщо зайдете в таблицю з відповідями. Іноді це дуже незручно.
Я ось, наприклад, завжди в обов'язковому порядку ці повідомлялки для себе налаштовую, цей пункт навіть є в моєму .
Налаштувати такі повідомлення можна в інтерфейсі таблиці відповідей на форму: Інструменти >> Повідомлення >> вибираємо «Надсилання форми» та спосіб повідомлення - раз на день або миттєво, відразу після того, як учасник заповнив. Не забуваймо натиснути «Зберегти».
Усього є анкета і прив'язана до неї таблиця з відповідями. Вони мають ще мільйон цікавих налаштувань і лайфхаків, але найкраще їх відкривати для себе самостійно. Але якщо ви вирішили зробити першу в житті анкету зі збору зворотного зв'язку після події, описаних тут п'яти кроків, буде більш ніж достатньо для старту.
Сподіваюся, ця невелика інструкція допоможе організаторам-початківцям спростити збір зворотного зв'язку і зберегти деяку кількість дерев, виключивши необхідність збору паперових анкет!
(Visited 6 040 times, 1 visits today)
На цьому уроці ми познайомимося з функцією mail(), на прикладі створення форми зворотного зв'язку на PHP з подальшим надсиланням отриманих даних на пошту.
Для цього створимо два файли - forma.php і mail.php. У першому файлі буде лише форма з полями для введення користувачем даних. Всередині тега form - кнопка "Надіслати"і атрибут action, який посилається на обробник-mail.php, саме до нього звертаються дані з форми при натисканні кнопки "Надіслати". У нашому прикладі дані форми надсилаються на веб-сторінку під назвою «/mail.php». На цій сторінці прописано скрипт на PHP, який обробляє дані форми:
Дані форми надсилаються методом POST (обробляється як $_POST). $_POST - це масив змінних, переданих поточному скрипту через метод POST.
Нижче ви бачите вміст файлу forma.php, поля якого заповнює сам користувач на якомусь веб-сайті. Усі поля для введення даних обов'язково повинні мати атрибут name, значення ми прописуємо самі, виходячи з логіки.
Форма зворотнього зв'язку на PHP з відправкою на пошту
Форма зворотнього зв'язку на PHP
Залишіть повідомлення:
Ваше ім'я:
E-mail:
Номер телефону:
Повідомлення:
Текстова область може містити необмежену кількість символів ->
Так форма візуально виглядає у браузері.
Далі пишемо код для файлу mail.php. Вигадуємо самі імена для змінних. У PHP змінна починається зі знака $, а потім ім'я змінної. Текстове значення змінної полягає у лапки. За допомогою змінних на емайл адміністратора передається вміст форми, просто підставивши квадратні дужки ім'я елемента форми - значення name .
Таким чином, дані з масиву $_POST будуть передані відповідним змінним і відправлені на пошту за допомогою функції mail. Давайте заповнимо нашу форму та натиснемо кнопку відправити. Не забудьте вказати ваш е-майл. Лист прийшов миттєво.
Однією з найпоширеніших завдань для веб-майстра є створення поштових форм або форм зворотного зв'язку для оправки листів (повідомлень) з сайту. У Joomla це можна реалізувати кількома способами, у тому числі стандартно, за допомогою компонента «Контакти». Але в цій статті я розповім про те, як можна створити форми для надсилання повідомлень, форми зворотного зв'язку та про те, як їх вставити в будь-яке місце сайту за допомогою стороннього компонента. Цей компонент називається aiContactSafe. Він абсолютно безкоштовний, але ви можете допомогти розвитку такого корисного проекту, пожертвувавши невелику суму. Завантажити його можна через JED або з сайту розробника заздалегідь зареєструвавшись. Або можна завантажити з сайту. На момент написання статті актуальною була стабільна версія aiContactSafe 2.0.21с, сумісна з Joomla 1.5, так і з Joomla 2.5.
До складу компонента форм зворотного зв'язку aiContactSafe входять:
Компонент aiContactSafe має такі можливості:
- Має вбудований захисний код (CAPTCHA). Вбудована CAPTCHA може задавати кодові слова різних мов, виводити замість слів випадковий набір символів заданої довжини. Захисний код легко інтегрується в дизайн сайту завдяки налаштуванням кольору символів та кольору фону.
- Підтримка профілів. За допомогою профілів, на сайті можна створити різні види форм, з різним набором полів користувача. Наприклад, в одному профілі можна налаштувати форму зворотного зв'язку для відправки резюме, а в іншому профілі форму заявки на підбір персоналу, а в третьому профілі налаштувати форму для надсилання повідомлення адміністратору сайту і т.д.
- Необмежену кількість користувачів полів різного типу: текстове поле, прапорець, перемикач, список, список, що випадає, роздільник, вкладення файлу, контакт Joomla, адреса електронної пошти, приховане поле, багаторядкове текстове поле.
- Додавання префіксів (заголовків) та суфіксів полів.
- Перенаправлення на вказану сторінку у разі успішного надсилання повідомлення (листа).
- Додавання будь-якої кількості вкладень, що працюють як з AJAX, так і без нього.
- Підтримка SEF. Можна використовувати як SEF Joomla, так і ARTIO JoomSEF або sh404SEF.
- Підтримка багатомовності.
- Мовні файли для більш як двадцяти мов.
- Вказує додаткову (контактну) інформацію за допомогою редактора WYSIWYG.
- Детальні інструкції з налаштування та адміністрування (англійською).
- Блокування користувача за адресою IP.
- Блокування повідомлень за певними словами (стоп-словами).
- Автоматичне блокування IP-адрес, яке спрацьовує через заданий час, якщо відвідувач сайту з певної IP-адреси відправляє повідомлення, що містять стоп-слова.
Отже, завантажуємо компонент і робимо стандартну установку, використовуючи «Менеджер розширень». Після успішного встановлення переходимо в меню «Компоненти» та вибираємо пункт «Форма зворотного зв'язку». За промовчанням компонент буде відкрито на вкладці «Повідомлення». Повідомлень у нас поки немає, тому займемося налаштуванням. Перейдемо на вкладку «Статуси повідомлення» та перейменуємо їх. Компонент має невеликі проблеми з локалізацією, тому для зручності доводиться їх виправляти вручну.
Клікаємо за назвою статусу та перейменовуємо: New у Нове, Read у Прочитане, Replied у Відправлене, Archived у Архівне.
Переходимо на вкладку "Панель управління". Тут знаходяться загальні параметри компонента. Більшість налаштувань можна залишити зі значеннями за замовчуванням. Варто звернути увагу на блок антиспам-налаштувань.
Зараз ми не налаштовуватимемо цей блок – кожен налаштовує його сам, відповідно до своїх потреб. Розглянемо коротко налаштування.
Активувати контроль SPAM"а. Вмикає/вимикає контроль спаму за стоп-словами. Якщо в повідомленні будуть знайдені стоп-слова, то воно не буде відправлено. Працює в парі з наступною опцією.
Блокувати листи, що містять. У цьому полі вписуються стоп-слова, через «;».
Записувати заблоковані повідомлення. Включає запис повідомлення, позначеного як СПАМ БД. Залишаємо включеним – для контролю.
Активувати заборону за адресою IP. Якщо активувати цю опцію, то відвідувачі з зазначених нижче IP адрес не зможуть отримати доступ до форми зворотного зв'язку (контактної форми).
IP-адреси для блокування. Це поле містить список ip адрес, що блокуються. Відвідувачі, які прийшли на сайт із однієї із зазначених адрес, не зможуть отримати доступ до контактної форми. Для блокування великих сегментів мережі можна використовувати символи встановлення, наприклад «*». Якщо записати так: 123.*.*.*, то будуть заборонені всі IP-адреси, що починаються зі 123.
Перенаправляти заблоковані IP-адреси на. У цьому полі можна ввести адресу сторінки, на яку буде перенаправлений відвідувач сайту, якщо він прийшов із заблокованої IP-адреси. Якщо нічого не вказати, перенаправлення буде виконано на головну сторінку сайту.
Забороняти IP-адреси, які надсилають повідомлення із заблокованими словами. Вмикає/вимикає автоматичне блокування IP-адрес відвідувачі, з яких надсилають повідомлення зі стоп-словами. Блокування спрацьовуватиме, якщо будуть виконані умови двох, нижченаведених опцій.
Максимальна кількість заблокованих повідомлень перед забороною IP. Гранична кількість повідомлень зі стоп-словами, після якої IP-адреса буде заблокована.
Хвилини для підрахунку заблокованих повідомлень. Період часу, коли здійснюється підрахунок повідомлень зі стоп-словами.
Надсилати email із повідомленням про заборону IP. Адреса електронної пошти, на яку надсилається повідомлення про спрацювання автоматичного блокування IP-адреси.
Крім блоку антиспам-налаштувань, слід звернути увагу на налаштування, які знаходяться в нижній частині вікна.
Наступні чотири опції відносяться до налаштування вкладень, що надсилаються з листом.
Максимальний розмір вкладення (байтах). Якщо у формі зворотного зв'язку буде поле вкладення файла, то корисно обмежити його максимальний розмір. Типово 5 Мб.
Дозволені типи вкладень. У цьому полі кому можна вказати дозволені типи вкладень.
Приєднати до повідомлення. Визначає надсилання вкладення. Можна приєднати вкладення до повідомлення, а можна з повідомленням надіслати посилання на файл, який буде надіслано на сервері.
Видалити файли після надсилання повідомлення. Якщо вкладення надсилається прикріпленим до повідомлення, файл вкладення можна видаляти з сервера. Наприклад, задля економії дискового простору.
Перевірити мовні файли. Натискання цієї кнопки запускає процедуру перевірки мовних файлів для відповідної мови.
Наступні три опції доступні, якщо встановлені відповідні компоненти: ARTIO JoomSEF, Joom!Fish і FaLang. Якщо на сайті встановлені ці компоненти, то є сенс включити їх інтеграцію з aiContactSafe.
За цими налаштуваннями слідують три кнопки включення вищеописаних компонентів. За замовчуванням вони вимкнені. Кнопки супроводжує жахливе попередження. Нам із вами потрібно знати, як це працює, тому включаємо всі три.
Далі слідує налаштування прав доступу до компонента. Тут можна встановити групу користувачів сайту, яка може читати повідомлення з лицьової частини сайту. За замовчуванням "Супер-користувачі". Так і залишимо.
Назва кнопки «Видалити таблиці з бази даних» говорить сама за себе. Вона може знадобитися у виняткових випадках, коли потрібно повністю видалити або повністю інсталювати компонент. Натискання цієї кнопки видалить у базі даних сайту всі таблиці, створені компонентом aiContactSafe. Без резервної копії відновити їх не вдасться!
Наступну частину налаштувань розглянемо простому практичному прикладі. Допустимо, що на сайті кадрового агентства потрібно розмістити дві форми зворотного зв'язку: перша – загальна, для контактів із загальних питань, а друга – для відправки резюме. Для першої форми буде створено сторінку та пункт меню «Контакти», а друга форма розміщуватиметься на сторінках з вакансіями. У першій формі зворотного зв'язку нам потрібна наступна інформація: ім'я відправника, адреса електронної пошти, тема повідомлення, текст повідомлення та можливість надсилання копії повідомлення відправнику. У другій контактній формі нам знадобляться такі поля: ім'я відправника, електронна адреса, назва вакансії і можливість прикріплення файлу з резюме.
У компоненті aiContactSafe переходимо на вкладку Поля.
Як бачимо, у компоненті вже є кілька полів. Нам потрібно трохи відредагувати існуючі та додати необхідні поля. Клацаючи мишею за назвою першого поля, відкриємо його для редагування і розглянемо налаштування поля докладно.
Назва. Це внутрішня змінна компонента. Завжди пишеться латинськими літерами без прогалин. Залишаємо як є.
Field label (мітка поля). Це заголовок у поля у формі зворотного зв'язку. Змінюємо на Відправник.
Label parameters (параметри мітки). Тут можна задати додаткові стилі, якби ми задали стилі в тегах< style >. Тільки лапки мають бути одинарними. Наприклад, ми хочемо, щоб під час наведення покажчика миші спливала підказка. Тоді в цьому полі можна написати: title="Ваше ім'я, наприклад Сергєєв Микола Миколайович". !}
Field label in message (мітка поля у листі). Це заголовок у листі одержувача. Адже ми отримаємо листа! Змінюємо на Відправник.
Label in message parameters (параметри мітки поля у листі) . Те саме, що й Label parameters, лише для письма.
Мітка після поля. Якщо треба, щоб заголовок був перед полем введення, а після.
Field type (тип поля). Тип поля. Важливий параметр. Можна вибрати один із сімнадцяти типів. Нам потрібний текстовий рядок, тому нічого не чіпаємо.
Надіслати повідомлення. Цей параметр недоступний для текстових полів. Він є актуальним для типів полів, що містять адресу електронної пошти.
Field values (значення поля). Також недоступний для текстових полів. Потрібен для полів списків, списків, груп прапорців і перемикачів.
Ліміт поля. Параметр, який обмежує кількість символів у текстовому полі. Більше символів, ніж зазначено в цьому параметрі, не можна ввести. Обмежимо це поле 60 (шістдесятьма) символами.
Field parameters (параметри поля). Таке ж налаштування, що й для мітки поля. Але те, що відноситься вже до самого поля введення. За промовчанням вже містить значення. Додамо до нього свої п'ять копійок, щоб вийшло class="textbox" title="Ваше ім'я, наприклад Сергєєв Микола Миколайович". Пусть тоже будет всплывающая подсказка. !}
Автозаповнення. У нашому випадку Ні.
Значення за промовчанням. Можна відразу задати значення поля за замовчуванням, але це не потрібно.
Префікс поля. Інформація, яка буде додана перед полем введення.
Суфікс поля. Інформація, яка буде додана після поля введення.
Field required (необхідне поле). Поле обов'язкове для заповнення.
Включати в тіло листи. Чи відображати значення поля в листі одержувача.
Зберігаємо налаштування. Тепер ви можете самостійно поправити текстові поля «Phone» та «Subject». Надайте мітки Телефон та Тема відповідно.
Поле "Email" практично нічим не відрізняється від текстового поля. Відмінність полягає в тому, що для цього типу полів передбачено перевірку на введення коректної адреси електронної пошти. Виправимо тільки мітки поля – нехай будуть Ел. пошта.
Для поля Message задамо значення для позначок Повідомлення. Можемо встановити ліміт у 1000 символів (на власний розсуд). Тип цього поля – «Розширене текстове поле», отже, і настройки ідентичні.
У налаштуваннях поля "Send a copy of this message to yourself" також змінимо мітки на Надіслати копію повідомлення собі. Це поле є прапорець (галочку). Якщо опцію встановлено, відправник отримає копію свого повідомлення на адресу електронної пошти, яку він вказав вище.
Все, що існують поля поправили! Тепер створимо два потрібні нам поля: текстове поле «Вакансія» та поле для прикріплення файлу резюме до повідомлення. Для цього все в тій же вкладці "Поле" натискаємо на кнопку "Додати". У вікні задаємо значення поля Назва: aics_vacancy. За замовчуванням тип поля «Текстовий рядок», що створюється, - це те, що нам потрібно для створення поля «Вакансія». З текстовими полями ви вже вмієте працювати, тож налаштуєте самі. Про всяк випадок нижче наводжу скрін своїх налаштувань.
Тепер створимо поле для прикріплення файлу до повідомлення. Немає нічого простішого! Натискаємо кнопку «Додати», назва поля – aics_file, мітка поля – Прикріпити файл з резюме до 5 Мб (zip, rar, doc), мітка поля у листі – Прикріпити файл, тип поля – Файл.
Тепер, коли є всі необхідні поля, можна налаштувати профілі. У компоненті aiContactSafe переходимо на вкладку "Профайли". Профайли або профілі – це набори налаштувань для певної форми зворотного зв'язку. Ми бачимо, що тут про нас також подбали і зробили два профілі. Клацаємо на назві першого профілю (його ID - 1) і відкриваємо його для редагування. Налаштувань досить багато, але вони інтуїтивно зрозумілі. Робимо таке:
- Змінюємо назву профілю, щоб було зрозуміліше
- Включаємо опцію «Використовувати AJAX для надсилання форми»
- Якщо потрібно, то настроюємо відображення CAPTCHA
Тут варто звернути увагу на що. Якщо ми змінюємо максимальну довжину слова для CAPTCHA, потрібно не забувати про «Ширину CAPTCHA». Щоб не вийшло так, що при заданій ширині не всі символи відображаються. Іншими словами, щоб вони розмістилися.
- Якщо хочемо, щоб повідомлення надходили на адресу електронної пошти відмінну від вказаного в загальних налаштуваннях сайту, то заповнюємо поле Електронна адреса. Слід пам'ятати, що в цьому полі вводиться адреса електронної пошти, яка буде працювати з наведеними вище настройками. Тобто якщо це поле ввести адресу скриньки з іншого домену, наприклад з yandex.ru, то потрібно буде відповідним чином редагувати параметри відправки пошти в загальних налаштуваннях сайту.
- Заповнюємо префікс теми листа.
- Якщо потрібно, змінюємо формат листа з HTML на "Простий текст".
- Змінюємо значення поля Позначити потрібні поля символом (ами) .
- Змінюємо Повідомлення про обов'язкові поля.
- Пишемо своє Повідомлення подяки.
- Сортуємо та відзначаємо потрібні для цього профілю поля.
Клацаємо на кнопці «Застосувати» і піднімаємось у верхню частину вікна. Тут нас цікавлять кнопки: Edit Contact, Edit CSS, та Edit Email. Цими кнопками можна скористатися не лише у цьому вікні. Вони є в панелі керування вкладки «Профайли». Потрібно лише виділити потрібний профіль та натиснути відповідну кнопку.
Отже, натискаємо кнопку Edit Contact. У вікні ми можемо відредагувати контактну інформацію форми зворотного зв'язку або взагалі прибрати її. Інформація коригується стандартним редактором, встановленим для поточного користувача. Заповнюємо так, як нам потрібне.
Зберігаємо зміни. Тепер, якщо потрібно, то змінюємо оформлення (стилі). Для цього виділяємо профіль "Common" і натискаємо кнопку "Edit CSS". Детально налаштування CSS описувати не буду - по-перше, у кожного вони свої, а по-друге, це виходить за межі статті. Торкнуся лише побіжно. Кожен файл CSS для профілю містить приклади того, як можна змінити стиль елемента форми зворотного зв'язку. Для існуючих полів запису вже зроблено. Для нових елементів, якщо потрібно, потрібно скопіювати рядок для відповідного типу, змінити ідентифікатор field_name на ім'я нового поля та додати властивості.
Після налаштувань CSS можна налаштувати вигляд надісланого листа. Для цього треба виділити профіль та натиснути кнопку Edit Email. Редагування виду повідомлення – це завдання не для новачків. Спочатку, залишайте як є - головне, що в ньому міститься необхідна інформація.
Один профіль налаштували. Тепер ми можемо помістити контактну інформацію та форму зворотного зв'язку на сайті. Для цього до потрібного меню додаємо пункт «Контакти», а тип пункту меню призначаємо «Contact Form».
Заголовок меню задаємо, наприклад Контакти. В обов'язкових параметрах вже вибрано профіль «Common», оскільки він є профілем за замовчуванням.
Зберігаємо зміни та переходимо на фронтальну частину сайту. Клацаємо по пункту меню "Контакти" і бачимо, що у нас вийшло.
Заповнюємо поля та надсилаємо повідомлення. Якщо все налаштовано правильно, електронний лист з'явиться у вкладці «Повідомлення».
Тепер налаштуємо другий профіль (Module form) та розглянемо роботу модуля та плагінів aiContactSafe. А саме, як вставити модуль із формою зворотного зв'язку, як вставити форму зворотного зв'язку в статтю та як зробити посилання на таку форму.
Основні налаштування другого профілю:
- Назва профайлу: resume
- Поле для використання як тема: aics_vacancy Вакансія
- Поле для використання як надіслати відправнику: ні
- Вибираємо потрібні нам поля та сортуємо їх
Якщо потрібно, змінюємо «Префікс теми електронного листа» та перекладаємо повідомлення. Інші налаштування редагуємо на свій розсуд. Зберігаємо. Видаляємо всю контактну інформацію для цього профілю.
У налаштуваннях панелі керування aiContactSafe ми увімкнули модуль Mod_aiContactSafe. Тепер за допомогою цього модуля вставимо форму для відправки резюме у довільну позицію шаблону. Для цього переходимо в Менеджер модулів, знаходимо там модуль aiContactSafe module, відкриваємо його і відповідним чином редагуємо.
Головне, на що потрібно звернути увагу під час редагування модуля – це правильно обраний профіль. У полі «Profile"s CSS» можна вибрати, чи використовувати CSS компонент або шаблон сайту. А в полі «Fields values» для полів форми зворотного зв'язку можна ввести встановлені значення, наприклад "aics_vacancy=бухгалтер".
