З цієї статті ви дізнаєтесь, як зробити форму зворотного зв'язку PHP для свого сайту. Скрипт оброблятиме дані, введені користувачем, і надсилатиме результат на потрібну вам пошту. Ми передбачимо варіант PHP, коли форма зворотного зв'язку відпрацює, але при відправці листа виникне помилка. І тут - всю введену інформацію запишемо у файл.
Отже, давайте приступимо, насамперед ми розмітимо сторінку і пропишемо для неї стилі. Розмітка буде включати в себе звичайну формузворотного зв'язку з двома input (телефон, пошта) та однією текстовою областю, куди, за нашим задумом, користувач буде вводити своє повідомлення. Обробник форми розмістимо на окремій сторінці.
Форма зворотнього зв'язку
Введіть телефон:
Ваша пошта:
Ваше запитання:
Пропишемо стилі:
Html, body( height: 100%; margin: 0; ) html( background-color: #fff; color: #333; font: 12px/14px ( background-color: #ececec; margin: 50px auto 0; text-align: center; width: 430px; padding: 15px; ) #feedback-form h2( margin-bottom: 25px; ) #feedback-form input, #feedback -form textarea( background-color: #fff; border: 1px solid #A9A9A9; padding: 1px 5px; width: 90%; ) #feedback-form input( height: 26px; ) #feedback-form textarea( height: 75px; padding-top: 5px; ) #feedback-form input( margin-top: 15px; background-color: #0B7BB5; border: 1px solid #CCCCCC; color: #FFFFFF; font-weight: bold; height: 40px; line- height: 40px;
В результаті всіх цих дій вийде така форма:
Тепер настав час зайнятися сервером. Наш скрипт буде включати кілька частин:
- Налаштування;
- Допоміжні функції;
- Обробка даних, що прийшли;
- Виведення повідомлень.
Всі ці частини, звичайно, умовні, тому що нам ніхто не заважає зробити з коду кашу або винести ключові частини в інші файли. Але я думаю, обробник краще робити одним файлом, щоб було зручно його підключати до інших проектів.
НалаштуванняНа цьому етапі ми створимо три змінні: $my_email ( поштова скринькана який надсилаються дані), $ path_log (шлях до файлу логів) і $ time_back (час повернення користувача назад на сайт).
// Вказуємо свою поштову скриньку $my_email = " [email protected]// Вказуємо де зберігатимуться логи $path_log = "log.txt"; // Час повернення користувача на сайт (сек) $time_back = 3;
Допоміжні функціїТут опишемо п'ять функцій, які спростять обробку даних.
Шаблони виведення повідомлень:
Function error_msg($message)( $message = "".$message.""; return $message; ) function success_msg($message)( $message = "".$message.""; return $message; )
Очищення даних, що прийшли з форми:
Function clear_data($var)( return trim(strip_tags($var)); )
Надсилання листа:
Function send_mail($email, $subj, $text, $from)( $headers = "From: ".$from." \r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers); false; ) return true;
І остання функція, яка перевірятиме телефон і пошту на правильність запису їх формату.
Function check_format($data, $type)( switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data))( return true; ) break; case "phone": $pattern = "/^(\+?\d+)?\s*(\(\d+\))? *([\d-]*)$/"; if(preg_match($pattern, $data))( return true; ) break; ) return false; )
Як бачите всі написані нами функції невеликого розміру. Можна було їх не виносити за межі обробки даних, але коли вам потрібно щось змінити або розширити, наприклад check_format(), це буде набагато простіше і зручніше.
Обробка даних, що прийшлиНасамперед ми дізнаємося, з якої сторінки прийшов користувач. Потім визначаємо змінні, в яких зберігатимуться наші повідомлення та статус відправлення листа.
// Дізнаємося попередню сторінку $prev_page = $_SERVER["HTTP_REFERER"]; // Наші повідомлення $msg = ""; // Статус листа $status_email = "";
Тепер, щоб не виникло проблем із кодуванням, вказуємо її за допомогою заголовка.
Header("Content-Type: text/html; charset=utf-8");
If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["number"], $_POST["email"], $_POST["question"]))( $number = clear_data ($_POST["number"]); $email = clear_data($_POST["email"]); check_format($email, "email") && !empty($question))( // Формуємо лист $e_title = "Нове повідомлення";
$e_body = "";
$e_body .= "";
$e_body .= "Телефон: ".$number;
$e_body .= "!}
$e_body .= "Пошта: ".$email; $e_body .= "
$e_body .= "Питання: ".$question; $e_body .= ""; $e_body .= ""; // END Формуємо лист if(send_mail($my_email, $e_title, $e_body, $prev_page)) ( $status_email = "success"; $msg = success_msg("Дякую за ваше запитання.
Ми відповімо вам найближчим часом."); )else( $status_email = "error"; $msg = error_msg("При відправці листа сталася помилка."); ) // Записуємо у файл $str = "Час: ".date ("d-m-Y G:i:s")."\n\r"; $str .= "Телефон: ".$number."\n\r"; $str .= "Пошта: ".$email." \n\r"; $str .= "Питання: ".$question."\n\r"; $str .= "Лист: ".$status_email."\n\r"; $str .= "= =========================\n\r"; file_put_contents($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "Заповніть форму правильно!"); ) )else( $msg = error_msg("Відбулася помилка!"); ) )else( exit; )
У написаному коді ми визначаємо, чи була відправлена форма, інакше закриваємо цей файл за допомогою функції exit. Далі перевіряємо наявність у масиві POST осередків із нашими даними, якщо вони прийшли, чистимо їх від можливого сміття. Після очищення перевіряємо формати пошти та телефону, а також наявність тексту у змінній питання. Далі формуємо листа, відправляємо та пишемо логії, де, крім даних, зберігаємо статус відправлення листа. Так ми зможемо відстежити роботу функції mail() і одночасно не втратити дані.
Виведення повідомленьНам залишилося тільки сповістити користувача про успішну або «не дуже» виконану операцію і повернути його назад на сайт із формою. Для цього ми використовуємо розмітку із включеннями PHP скрипта.
Для перенаправлення користувача назад на сайт ми скористаємося метатегом refresh, де робимо вставки PHP коду вже зі створеними змінними. Ще нам потрібно трохи використовувати JavaScript, щоб зробити сторінку трохи динамічнішою. Пишемо функцію timeBack(), яка у зворотному порядку рахуватиме секунди до перенаправлення.
Таким чином, дані з масиву $_POST будуть передані відповідним змінним і відправлені на пошту за допомогою функції mail. Давайте заповнимо нашу форму та натиснемо кнопку відправити. Не забудьте вказати ваш е-майл. Лист прийшов миттєво.
Форму зв'язку можна помістити на . Її просто зробити. Якщо прийняти запропонований CSS стиль, то форма буде "гумова":
Нижче наведено два варіанти скрипту відправки пошти: з Javascript і без
1. Форма зв'язку без перезавантаженняПривіт Друзі! Хочу представити вашій увазі універсальний скрипт відправлення даних із форм на email. Скрипт ідеально підійде для сайтів типу Landing Page, сайтів візиток тощо. Наш скрипт Форми зворотного зв'язку виділяється серед інших скриптів в інтернеті тим, що має можливість підключення необмеженої кількості форм з різними полями на одній сторінці і здатний відправляти листи кільком одержувачам.
Отже. Давайте приступимо. Почнемо мабуть із можливостей скрипту.
Скрипт працює на основі бібліотеки, тому перше, що нам необхідно зробити, це підключити її. Для цього рекомендую користуватися Google Hosted Libraries.
Про інші файли давайте докладніше:
feedback.js - основний файл скрипта, що відповідає за AJAX відправлення форми .
jquery.arcticmodal.js,
jquery.arcticmodal. - Забезпечують можливість виведення форм у модальному вікні.
jquery.jgrowl.js,
jquery.jgrowl.css – дозволяють виводити повідомлення на сторінці (блоки у верхньому кутку сторінки).
Обов'язковим атрибутом всіх елементів форми є атрибут name="" - необхідний наступного налаштування форми.
Для кнопки (type=«button») обов'язково потрібно вказати class=«feedback». Так само хочу звернути вашу увагу на те, що в якості кнопки може виступати будь-який html тег з класом «feedback».
Виклик форми в модальному вікні $(document).ready(function() ( $(document).on("click", ".modal_btn", function()( $("#small-modal").arcticmodal()); )); ));
Так як форма повинна бути видна тільки в модальному вікні, її потрібно приховати, помістивши в div з атрибутом style=«display: none;», а також для стилізації модального вікна обернути в парочку стандартних дивів.
x
Ось ми і розібралися з основними налаштуваннями підключення нашого скрипту надсилання форм на e-mail. Давайте тепер заглянемо всередину і розберемося з налаштуванням полів, повідомлень та й усього іншого, що там є.
Приклад налаштувань для однієї формиНалаштування всіх форм зберігаються у файлі feedback\index.php$form["form-1"] = array("fields" => array("name" => array("title" => "Ім'я", "validate" => array("preg" => "%%) ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Поле [ %1$s ] можливо містить помилку", "minlength" => "Мінімальна довжина поля [ %1$s ] менша за допустиму - %2$s", "maxlength" => "Максимальна довжина поля [ %1$s ] перевищує допустиму - %2$s",)), "tell " => array("title" => "Телефон", "validate" => array("preg" => "/^((8|\+)[\- ]?))(\(?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5",), "messages" => array("preg" => "Поле [ %1$s ] можливо містить помилку", "minlength" => "Мінімальна довжина поля [ %1$s ] менша за допустиму - %2$s",)),), "cfg" => array(" charset" => "utf-8", "subject" => "Тема листа", "title" => "Заголовок у тілі листа", "ajax" => true, "validate" => true, "from_email" = > " [email protected]", "from_name" => "noreply", "to_email" => " [email protected], [email protected]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77 ", "antispamjs" => "address77", "okay" => "Повідомлення надіслано - OK", "fuck" => "Повідомлення надіслано - ERROR", "spam" => "Спам робот", "notify" => "color-modal-textbox", "usepresuf" => false)); // Наступна форма $form["form-2"] = array("fields" => array(.....
Для додавання налаштувань нової форми потрібно за прикладом масиву $form["form-1"] створити новий масив $form[""]
Пам'ятаєте я говорив про обов'язковий атрибут name=""?
Так ось настав час розповісти для чого він все ж таки потрібен.
name="" - це буквено-цифровий ключ для масиву, має бути унікальним для масиву $form[""]
Приклад html коду для наочності
Тепер розберемося з масивами і для чого вони потрібні.
$form["form-1"] = array();
$form["form-2"] = array(); і т.д.
Це основні масиви кожної нової форми, містять у собі:
- "name" => array(); - Масив налаштувань елемента форми (наприклад input name=«name» type=«text») який має низку налаштувань.
- "title" => "Ваше ім'я" - назва елемента форми, що буде виводиться при помилках або в шаблоні
- "validate" => array(); - масив, що містить правила валідації елемента форми
- "preg" => "%%" - регулярне вираження
- "minlength" => "3" - мінімальний розмір поля
- "maxlength" => "35" - максимальний розмір поля
- "substr" => "35" - завжди обрізати до N символів
- "messages" => array(); - масив, що містить повідомлення валідації, а саме:
- "preg" => "Елемент форми не відповідає регулярному виразу"
- "minlength" => "Мінімальна довжина поля [ %1$s ] менша за допустиму - %2$s" - помилка валідації, ключ(preg) не відповідність ключу валідації
- "maxlength" => "Максимальна довжина поля [ %1$s ] перевищує допустиму - %2$s" - помилка валідації, ключ (preg) не відповідає ключу валідації
- "charset" => "utf-8" - кодування
- "subject" => "Тема листа", - Тема листа
- "title" => "Заголовок у тілі листа", - Заголовок в тілі листа
- "ajax" => true, - це аякс форма TODO (якщо не потрібно, поставити - false)
- "validate" => true, - (true) якщо хочемо валідацію форми на сервері, замінює js валідацію при "ajax" => true. Коли викл(false) то можна не ставити параметри validate полів. TODO
- "from_email" => "myemail" - відправник, вказати ім'я поля(name=«myemail»), а якщо не потрібно email від користувача, тоді заглушку [email protected]
- "from_name" => "myname" - відправник, вказати ім'я поля(name=«myname»), а якщо не потрібно ім'я користувача, тоді заглушку No-reply
- "to_email" => " [email protected]", - email одержувача. Для відправки на кілька адрес перерахувати їх через кому. Приклад ("to_email" => " [email protected], [email protected], [email protected]",)
- "to_name" => "noreply1", - Ім'я одержувача. При надсиланні на кілька адрес через кому перерахувати імена одержувачів. Приклад ("to_name" => "noreply1, noreply2, noreply3",)
- "geoip" => true, - дізнатися місце розташування за типом TODO
- "referer" => false - додавати URL сторінки з якої була відправлена форма
- "type" => "plain", - тип листа - plain, html (якщо використовуються html теги)
- "tpl" => false - використовувати шаблон листа. Якщо true, то буде підключений файл шаблону, відповідно до імені форми (name=«form-1»), з папки та оброблений файл (feedback/tpl/form-1.tpl), в іншому випадку буде відправлено все як є, кожне поле з нового рядка
- "antispam" => "email77", - Анти спам, метод заснований на прихованому (display: none) полі, яке автоматично заповнює тільки робот, тим самим видає себе.
- "antispamjs" => "address77", - Анти спам, метод заснований на прихованому (display:none) полі, спочатку заповнене, яке автоматично очищає JavaScript під час завантаження сторінки, навіть розумний робот не може це передбачити, і тоді він блокується.
- "okay" => "Повідомлення користувача", - Повідомлення користувачеві, що виводиться за умови успішно відправленої форми, можна використовувати html теги.
- "fuck" => "Повідомлення користувача", - Повідомлення користувачеві, що виводиться при виникненні помилки відправки форми, можна використовувати html теги.
- "spam" => "Повідомлення користувача", - Повідомлення користувачеві, що виводиться при підозрі на спам робот, можна використовувати html теги.
- "notify" => "color-modal", - який тип повідомлень показувати, textbox - блоки у верхньому кутку сторінки, color - кольорове підсвічування у вигляді, modal - модальне вікно у центрі сторінки, none - вимкнути. Можна поєднувати приклад: color-modal - помилки заповнення підсвічуванням полів, а текстовий статус відправки в модальному вікні TODO
- "usepresuf" => false - Чи використовується кастомне додавання до теми або до заголовка листа, на випадок невеликої зміни можна вказати наприклад %%cfg.title.suffix%%, для цього у формі має бути приховане поле, докладніше див. ф -цю presuf()
По-перше, для того, щоб форма була відправлена в шаблоні, в налаштуваннях форми потрібно включити використання файлу шаблону - "tpl" => true ,
По-друге, потрібно створити файл шаблону з розширенням *.tpl у папці (feedback/tpl/ ), відповідно до імені форми (name=«form-1» ).
Приклад: (feedback/tpl/form-1.tpl)
| Заголовок в тілі листа | |
| %%name.title%% | %%name.value%% |
| %%tell.title%% | %%tell.value%% |
name, tell і т.д. - Це атрибути (name="") полів, які заповнює користувач.
title - Назва елемента форми, який задається в масиві налаштувань елементів форми.
value - значення елемента форми.
На сьогодні поки все, але скрипт звичайно ж не ідеальний, тому коментарі та описи багів вітаються і в наступних версіях будуть виправлені.
P.S. Скрипт розроблений командою