Форма обратной связи в модальном окне

Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript'ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:

Шаг 1. Общее описание и работа формы обратной связи:

Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:

  • images - папка, где хранятся все изображения нашей формы;
  • index.html - главный, "индексный" файл, в котором будет располагаться кнопка для вызова формы обратной связи;
  • contact.html - файл, в котором находится сама форма. Именно этот файл будет подключаться в модальное окошечко;
  • send.php - файл-обработчик, занимающийся отправкой письма;
  • jquery.js - основной фреймворк jQuery;
  • style.css - файл с каскадными таблицами стилей для нашей формы.

Итак, идем дальше и по порядку... Работа формы будет заключаться следующим образом: Пользователь заходит на страницу, на которой находится кнопка для вызова модального окна, нажмет ее, затем появляется форма, в ней посетитель вводит все данные и текст сообщения и отправляет, потом его перекидывает на страницу с сообщением об удачной или неудачной отправке письма. Вот и все, а теперь начнем верстать нашу форму...

Шаг 2. Кнопка для вызова формы.

Так, чтобы, наше модальное окно с формой появлялось, нужно его как-то заставить делать это. Для этого нам всего лишь нужно разместить на странице обыкновенную кнопку. Код такой кнопки приведен ниже, вместе с примененными к ней стилями:

HTML:



<a href="contact.html" rel="#overlay">
<button type="button">Написать сообщение администратору</button>
</a>
<div class="overlay" id="overlay">
<div class="wrap"></div>
</div>

Шаг 3. Сама форма + настройки к ней

Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html, который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:



<h1 class='contact-title'>Отправка Сообщения Администрации:</h1>
<form action="send.php" method="post">
<table>
<tbody><tr>
<th class="lable">*Имя:</th>
<td class="input"><input name="name" size="40" maxlength="40" class="input" type="text"></td>
</tr>
<tr>
<th class="lable">*E-mail:</th>
<td class="input"><input name="email" size="40" maxlength="40" class="input" type="text"></td>
</tr>
<tr>
<th class="lable">Тема:</th>
<td class="input"><input name="subject" size="40" maxlength="40" class="input" type="text"></td>
</tr>
<tr>
<th class="lable">*Сообщение:</th>
<td class="input"><textarea name="text_message" cols="40" rows="10" class="input"></textarea></td>
</tr> 
<br><br> 
<tr><th></th>
<td align="center">
<input name="mail_submit" type="submit" value="Отправить сообщение">     </td>
</tr>
</tbody></table>
</form>

Как Вы можете наблюдать, идя по коду даже невооруженным глазом видно, что для более качественного отображения формы я использовал табличную верстку. Это мне очень пригодилось, чтобы сравнять все поля формы.

Шаг 4. Обработчик, отвечающий за отправку писем

Здесь я быстро расскажу Вам о главном обработчике по отправке писем. Его код я не буду здесь приводить, т. к. он есть в исходниках. Скачайте и посмотрите его содержание. Если Вы знаете php где-то на среднем уровне, примерно как я, то вы без труда сможете самостоятельно разобрать весь код этого обработчика. Если все готово, то идем дальше...

Шаг 5. "Прикрутка" основного фреймворка jQuery

Теперь, как и в любом уроке по jQuery мы должны "прикрутить" основной фреймворк jQuery. Для этого вернемся немного назад, туда , где располагается наша кнопка, и между тегами <head> и </head> вставим следующий код:


<script src='jquery.js' type='text/javascript'></script>

Шаг 6. Стилизация формы

Как Вы можете видеть, стили к нашей форме вынесены отдельно, в файл style.css, поскольку эти стили занимают слишком много места. Нам всего лишь надо привязать нижеприведенный код к нашему индексному файлу:


<link type='text/css' href='style.css' rel='stylesheet'  />

Шаг 7. jQuery-доработки

Теперь для полноценной работы модального окна формы мы должны вставить следующий jQuery-код:

jQuery



<script>
$(function() {
  $("a[rel]").overlay(function() {
  var wrap = this.getContent().find("div.wrap");
  if (wrap.is(":empty")) {
  wrap.load(this.getTrigger().attr("href"));
  }
  });
  });
</script>

Заключение.

Вот и готова наша интересная форма обратной связи. Путь был долгим и сложным, поэтому, если кто-нибудь что-нибудь не понял, выслушаю ваши вопросы в комментариях к данному уроку. А у меня на этом все, до новых встреч, друзья!

С искренним уважением Ваш jQuery - проводник - М. К.Wink

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Максим Курочкин
Урок создан: 15 Июня 2009
Просмотров: 248583
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

    Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

^ Наверх ^