Информация к новости
  • Просмотров: 4690
  • Автор: sulicompany
  • Дата: 20-12-2012, 21:43
 (голосов: 0)
20-12-2012, 21:43

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

Категория: Программирование » CSS


Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком 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