Як створити контактну форму HTML5 / CSS3 на основі Ajax
Контактна форма є смертельно важливою для будь-якого веб-сайту, оскільки вона виступає в якості посланника, який передає думку або запити відвідувачів веб-майстру. В Інтернеті було безліч контактних форм, але, на жаль, більшість з них не пояснюють вам внутрішні робочі частини, так що тут наводиться докладний підручник, який навчить вас створювати розширену контактну форму з нуля на основі технології Pop, HTML5 і CSS3.
Беручи до уваги характер веб-форми електронної пошти, ми також повинні зануритися в дві окремі поля застосування, тобто PHP-код для відправки електронної пошти та функцій jQuery для багатого користувальницького інтерфейсу. До кінця ми залишимо повністю динамічну і функціональну контактну форму, написану з подальшою адаптацією до уваги.
Почніть зараз, щоб створити власну розширену контактну форму!
Ярлик для:
- Демо - Отримати попередній перегляд того, що ви будуєте
- Завантажити - Завантажити всі файли (php + css)
Структурування програми
Для початку вам потрібен якийсь веб-сервер для роботи. Якщо ви працюєте з машиною Windows, WAMP - це, мабуть, ваш найкращий варіант. Користувачі Mac мають подібну програму під назвою MAMP, яку легко встановити.
Ці пакети встановлять локальний сервер на вашому комп'ютері з повним доступом до PHP. Крім того, якщо ви маєте простір сервера або маєте повний доступ до сервера у віддаленому місці, ви можете використовувати це місце. Ми не будемо потребувати будь-яких баз даних MySQL, які повинні трохи спростити речі.
Після налаштування сервера створити нову папку для розміщення програми. Ви можете назвати це все, що хочете, оскільки це не завдає шкоди або навіть не пов'язане з кінцевим продуктом. Структура папок буде використана під час доступу до файлів у веб-переглядачі. Простий приклад http: //localhost/ajaxcontact/contact.php
Створимо наші файли!
Ми працюватимемо лише у двох основних файлах. Насамперед нам знадобиться ядро .php Файл для розміщення не тільки логіки нашої програми, але й інтерфейсу HTML-розмітки. Нижче наведено зразок коду, взятого з нашого початкового файлу.
Форма контакту Ajax з HTML5 / CSS з jQuery
Для початку ми написали простий розділ до нашого документа. Це включає в себе загальний Декларація Doctype для HTML5 і деякі елементи документа HTML / XML. Це не зовсім потрібно, але полегшить процес візуалізації у старих (і нових) браузерах. Також ніколи не завадить запропонувати більше інформації.
Трохи нижче ми можемо побачити 2 рядки прямо перед нашим закриваючим тегом заголовка. Перший включає наш Скрипт jQuery з онлайн-сховища коду Google. Це потрібно для того, щоб наші динамічні помилки сторінки працювали. Прямо під цим ми маємо включення базового Документ CSS містить всі наші стилі сторінок.
Усередині нашого документа ми маємо декілька містить розділи утримання головної контактної форми. Тут розміщені 3 вхідних елемента для ім'я користувача, адреса електронної пошти, і особисте повідомлення. Розмітка HTML є досить стандартною і не повинна вражати будь-якого проміжного розробника.
Ваше повідомлення було надіслано. Huzzah!
Тут у нас є основний Умовний код PHP вкладені в декілька сторінок контейнерів. Це перевіряє встановлене значення імені змінної
$ emailSentі якщо він дорівнює true, він відображатиме повідомлення про успіх.Усередині нашого HTML формату
The інше твердження - це те, що буде виконуватися при завантаженні першої сторінки, оскільки спочатку не буде передано жодного вмісту. Всередині тут ми включимо a стислий набір елементів форми а кнопка надсилання.
Помилка надсилання форми
Ви, мабуть, помітили, що є інша умовний блок безпосередньо після стартової форми. Це перевіряє назву змінної $ hasError і з'явиться повідомлення про помилку після підтвердження. Цей запасний метод є використовуються лише, якщо JavaScript вимкнено в браузері і, таким чином, не може генерувати динамічні помилки.
Весь шлях вниз ми можемо знайти окремі змінні PHP перевіряється. Заяви регулюють, якщо форма вже подана з частковою кількістю заповнених даних. Це ще одна резервна система, яка відображає вміст вже заповнених полів - приємний трюк для правильного користування!
Безпосередньо після завершення нашої форми є декілька Функції jQuery ми написали. Ми поговоримо про них першими, оскільки вони є типовою реалізацією на навантаженні. Однак, якщо браузер не приймає JavaScript, то за замовчуванням ми можемо покладатися на наш код PHP.
Відкриття до jQuery
Найпростіший спосіб почати говорити на цю тему - це зануритися прямо. Я розбиваю окремі блоки рядок за рядком, щоб можна було побачити, для чого фактично перевіряється сценарій.
Однак, якщо ви просто загубитеся переглянути файли коду проекту. Всі повні блоки попередньо записані і добре задокументовані на веб-сайті jQuery. Для початку ми відкриваємо код, подібний до будь-якого іншого:
Якщо ви знайомі зворотних викликів Ви можете помітити публікація () Функція має вбудований набір параметрів. Зворотні виклики - це менші функції, які називаються після відповіді даних з іншої функції.
Так, наприклад, коли наші jQuery.post () Функція успішно стріляє по електронній пошті, вона викличе свою внутрішню функцію для відображення ковзної анімації. Весь цей код міг би бути записаний у власному блоці та переміщений в іншому місці. Однак заради цього підручника набагато простіше писати зворотний виклик як вбудовану функцію.
Порушення нашого PHP
Остаточна перешкода для згадування - це логіка за процесором PHP. Це бекенда система, яка буде насправді виклику функції пошти і відправити повідомлення. Весь код, який використовується в прикладах нижче, можна знайти безпосередньо у верхній частині нашого основного .php файлу, перед виходом HTML.
Є також кілька внутрішніх стилів, які освіжають сторінку. Тут немає нічого спеціально нового, щоб ми не входили в будь-яку деталь. Проте styles.css Документ включений до коду проекту і містить рудиментарні технології CSS3.
Для початку ми відкриваємо наш PHP пункт і перевіряємо якщо форма навіть була подана. The POST змінної “подано” насправді було приховане поле введення, додане в самому кінці нашої форми. Це корисний спосіб перевірте, чи користувач щось надіслав тим не менш, ми не витрачаємо ресурсів сервера.
Після цього ми маємо 3 окремих if / else перевірка заяви, щоб побачити якщо кожне поле вводу було заповнене. Тут я не буду включати в себе кожну частину логіки, оскільки всі вони дуже повторюються в природі. Проте, щоб навести короткий приклад, я включив нижче застереження про перевірку електронної пошти:
// потрібна дійсна електронна пошта, якщо (trim ($ _ POST ['email'])) === ") $ emailError = 'Забули ввести адресу електронної пошти.'; $ hasError = true; else if (! preg_match) ("/^ ([: alnum:.]. [- s0 - 9 -. _POST ['email']))) $ emailError = 'Ви ввели недійсну адресу електронної пошти.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP обрізає всі пробіли з значення та перевірить, чи залишилося щось. Якщо так, то ми маємо детальну інформацію Регулярний вираз (Regex) щоб переконатися, що вхідний рядок користувача відповідає шаблону електронної пошти.
Ви, звичайно, не повинні розуміти, як це зробити
preg_match ()працює для створення цього сценарію. Це корисна функція для визначити правила та вимоги до успішного типу даних, але команди розширеного знання програмування дійсно розуміють. У цьому сценарії ми гарантуємо, що користувач вводить лише кілька символів, включаючи @ символ 2-4 символи що представляє собою a Домен верхнього рівня.Після того, як всі наші логіки проходять, і ми не повертаємо ніяких помилок, настав час відправити наше повідомлення! Цей біт коду встановить окремі змінні, щоб налаштувати наше повідомлення електронної пошти та налаштувати деякі заголовки пошти для процесу.
// за відсутності помилок помилки давайте зараз електронною поштою! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Відправлене повідомлення з'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Ім'я: $ name \ _ nEmail: $ email \ t $ headers = 'From:'. ' <'.$emailTo.'>'. "\ t 'Відповідати на: ' . $ email; пошта ($ emailTo, $ subject, $ body, $ headers); // встановити значення булевого завершення до TRUE $ emailSent = true;Якщо вам було цікаво, яким чином код з'ясує вашу адресу електронної пошти, це частина, яку потрібно заповнити. Перша змінна в нашому наборі
$ emailToі повинна містити будь-яку адреса електронної пошти, на яку надходить повідомлення.Усередині нашого
$ тіломи використовуємо перевагуnроздільник для додавання нових рядків до повідомлення. Це додає невеликі місця розташування для ім'я відправника, адреса електронної пошти, після чого перерва для їх вміст повідомлення. Звичайно, ви могли б витрачати час на догляд за дисплеєм, але ця структура працює дуже добре.Висновок
Це закриває наш навчальний посібник для розширеної форми контакту. Якщо ви хочете створити свої елементи по відношенню до мого, ви можете перевірити мій приклад styles.css в коді проекту. Тим не менш, сторінка структурована досить добре, що ви можете створити свій власний вигляд і відчути себе дуже легко.
Не соромтеся завантажувати вихідний код і вивчати те, що я зробив трохи ближче. Добре дотримуватися підручника, але мати прямий доступ до джерела проекту може бути безцінним. Я також включив коротку таблицю стилів, щоб зробити налаштування бриз, спасибі за ваш погляд!
