Форма зворотного зв’язку у модальному вікні
Крок 1. Загальний опис та робота форми зворотного зв'язку:
Спочатку я вам розповім, які нам файли будуть потрібні і, власне, навіщо вони потрібні:
- images - папка, де зберігаються усі зображення нашої форми;
- index.html - головний, "індексний" файл, в якому розташовуватиметься кнопка для виклику форми зворотного зв'язку;
- contact.html - файл, у якому знаходиться сама форма. Саме цей файл підключатиметься в модальне віконце;
- send.php - файл-обробник, що займається надсиланням листа;
- jquery.js - основний фреймворк jQuery;
- style.css - файл із каскадними таблицями стилів для нашої форми.
Отже, йдемо далі та по порядку. Робота форми буде полягати наступним чином: Користувач заходить на сторінку, на якій знаходиться кнопка для виклику модального вікна, натисне її, потім з'являється форма, в ній відвідувач вводить усі дані та текст повідомлення та відправляє, потім його перекидає на сторінку з повідомленням про вдалу або невдалого надсилання листа. Ось і все, а тепер почнемо верстати нашу форму.
Крок 2. Кнопка для виклику форми.
Так, щоб наше модальне вікно з формою з'являлося, потрібно його якось змусити робити це. Для цього нам лише потрібно розмістити на сторінці звичайну кнопку. Код такої кнопки наведено нижче, разом із застосованими до неї стилями:
HTML:
Крок 3. Сама форма + налаштування до неї
Тепер давайте розберемося, де все-таки буде знаходитися наша форма зворотного зв'язку. А перебуватиме вона у файліcontact.html, який вже розташований у вихідниках уроку. Ця форма зовсім невелика, тому її код я розташую нижче:
Як Ви можете спостерігати, йдучи за кодом навіть неозброєним окомвидно, що для якіснішого відображення форми я використовував табличну верстку. Це мені дуже стало в нагоді, щоб зрівняти всі поля форми.
Крок 4. Обробник, який відповідає за відправку листів
Крок 5. "Прикрутка" основного фреймворку jQuery
Тепер, як і в будь-якому уроці з jQuery, ми повинні "прикрутити" основний фреймворк jQuery. Для цього повернемося трохи назад, туди , де знаходиться наша кнопка, і між тегами і вставимо наступний код:
Крок 6. Стилізація форми
Як Ви можете бачити, стилі до нашої форми винесені окремо, файлstyle.css, оскільки ці стилі займають занадто багато місця. Нам лише треба прив'язати нижченаведений код до нашого індексного файлу:
Крок 7. jQuery-доробки
Тепер для повноцінної роботи модального вікна форми ми повинні вставити наступний код jQuery:
jQuery
Висновок.
Зі щирою повагою Ваш jQuery - провідник - М. К.
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.ruseller.com Автор: Максим Курочкін Урок створено: 15 червня 2009 Переглядів: 230477 Правила передруку
5 останніх уроків рубрики "Для сайту"
Ефекти блочного розкриття
Сьогодні ми хотіли б поділитися декількома ідеями щодо ефекту блочного розкриття, яку ви можете використати для своїх проектів.
Якщо ви хочете суттєво підвищити рівень безпеки вашого сайту на WordPress, то вам не уникнути конфігурації файлу .htaccess. Це дозволить не тільки вберегтися від цілого ряду атак хакерів, але і організувати перенапрямки, а також вирішити завдання пов'язані з кешем.
20 безкоштовних тем для WordPress у стилі Material Design
Material Design - це тренд, що набирає обертів від Google. У цій збірці зібрані безкоштовні теми для WordPress, виконані в цьому популярному стилі.
20 сайтів з креативним ефектом MouseOver
Ефекти на те й існують, щоб вражати наших відвідувачів. У цій збірці зібрано кілька десятків ресурсів, чиї творці дуже постаралися вразити своїх відвідувачів.
Під кінець місяця пропонуємо ознайомитися з набором безкоштовних матеріалів для веб-дизайнерів за минулий місяць.