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

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

Просмотреть как это будет выглядеть можно ЗДЕСЬ

Скачать необходимые исходники ЗДЕСЬ

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

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

    * images - папка, где хранятся все изображения нашей формы;
    * index.html - главный, "индексный" файл, в котором будет располагаться кнопка для вызова формы обратной связи;
    * contact.html - файл, в котором находится сама форма. Именно этот файл будет подключаться в модальное окошечко;
    * send.php - файл-обработчик, занимающийся отправкой письма;
    * jquery.css - основной фреймворк 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>


Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: здесь