Привіт друзі! Хочу представити вашій увазі універсальний скрипт відправки даних з форм на email. Скрипт ідеально підійде для сайтів типу Landing Page. сайтів візиток і т.д. Наш скрипт Форми зворотнього зв'язку виділяється серед маси інших скриптів в інтернеті тим, що має можливість підключення необмеженої кількості форм з різними полями на одній сторінці і здатний відправляти листи декільком одержувачам.
Початкове налаштування.
Скрипт працює на основі бібліотеки jQuery. тому перше що нам необхідно зробити це підключити її. Для цього рекомендую скористатися Google Hosted Libraries.
Про інших файлах давайте докладніше:
feedback.js - основний файл скрипта, відповідає за AJAX надсилання форми.
jquery.arcticmodal.js,
jquery.arcticmodal.css - забезпечують можливість виведення форм в модальному вікні.
jquery.jgrowl.js,
jquery.jgrowl.css - дозволяють виводити повідомлення на сторінці (блоки в верхньому кутку сторінки).
HTML і обов'язкові атрибути.
Обов'язковим атрибутом для всіх елементів форми є атрибут name = "" - необхідний для подальшої настройки форми.
Для кнопки (type = «button») обов'язково потрібно вказати class = "feedback». Так само хочу звернути вашу увагу на те, що в якості кнопки може виступати будь-який html тег з класом «feedback».
Виклик форми в модальному вікні
Для виклику форми в модальному вікні спершу потрібно визначити дію після натискання на будь-якої тег, наприклад div з класом modal_btn
Так як форма повинна бути видна тільки в модальному вікні її потрібно приховати, помістивши в div з атрибутом style = "display: none;", а також для стилізації модального вікна обернути в парочку стандартних Дивов.
Приклад налаштувань для однієї форми
Налаштування всіх форм зберігаються в файлі feedback \ index.php
Для додавання налаштувань нової форми, потрібно за прикладом масиву $ form [ 'form-1'] створити новий масив $ form [ '']
Пам'ятайте я говорив про обов'язковому атрибуті name = ""?
Обов'язковим атрибутом для всіх елементів форми є атрибут name = "" - необхідний для подальшої настройки форми.
Так ось прийшов час розповісти для чого ж він все таки потрібен.
name = "" - це буквено-цифровий ключ для масиву, повинен бути унікальним для масиву $ form [ '']
Приклад html коду для наочності
Тепер давайте розберемося з масивами і для чого вони потрібні.
Налаштування шаблонів листів
Отже. давайте тепер розберемося з темізаціі наших повідомлень.
По-перше, для того, що-б форма була відправлена в шаблоні, в настройках форми потрібно включити використання файлу шаблону - 'tpl' => true,
По-друге, потрібно створити файл шаблону з розширенням * .tpl в папці (feedback / tpl /), згідно з ім'ям форми (name = "form-1»).
name. tell і т.д. - Це атрибути (name = "") полів які заповнює користувач.
title - Назва елемента форми, яке задається в масиві налаштувань елементів форми.
value - Значення елемента форми.
P.S. Скрипт розроблений командою Airvix