Дизайн принадлежит администрации сайта VSEpodrad.ru.
Администрация не несет ответственности за содержимое на нашем портале.
Администратор: .
|
Меню сайта
Смотри и качай бесплатно
Опрос сайта
Реклама
Онлайн пользователи
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Раздел в разработке
VSEpodrad.ru
В разработке!
На сайт добавлено файлов
Форма обратной связи в модальном окне
Форма обратной связи в модальном окне
Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript'ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:
Шаг 1. Общее описание и работа формы обратной связи:
Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:
images - папка, где хранятся все изображения нашей формы;
index.html - главный, "индексный" файл, в котором будет располагаться кнопка для вызова формы обратной связи;
contact.html - файл, в котором находится сама форма. Именно этот файл будет подключаться в модальное окошечко;
send.php - файл-обработчик, занимающийся отправкой письма;
jquery.js - основной фреймворк jQuery;
style.css - файл с каскадными таблицами стилей для нашей формы.
Итак, идем дальше и по порядку... Работа формы будет заключаться следующим образом: Пользователь заходит на страницу, на которой находится кнопка для вызова модального окна, нажмет ее, затем появляется форма, в ней посетитель вводит все данные и текст сообщения и отправляет, потом его перекидывает на страницу с сообщением об удачной или неудачной отправке письма. Вот и все, а теперь начнем верстать нашу форму...
Шаг 2. Кнопка для вызова формы.
Так, чтобы, наше модальное окно с формой появлялось, нужно его как-то заставить делать это. Для этого нам всего лишь нужно разместить на странице обыкновенную кнопку. Код такой кнопки приведен ниже, вместе с примененными к ней стилями:
HTML:
Code
<a href="contact.html" rel="#overlay">
<button type="button">Написать сообщение администратору</button>
</a>
<div class="overlay" id="overlay">
<div class="wrap"></div>
</div>
Шаг 3. Сама форма + настройки к ней
Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html, который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:
Code
<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>
<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. Для этого вернемся немного назад, туда , где располагается наша кнопка, и между тегами и вставим следующий код:
Code
<script src='jquery.js' type='text/javascript'></script>
Шаг 6. Стилизация формы
Как Вы можете видеть, стили к нашей форме вынесены отдельно, в файл style.css, поскольку эти стили занимают слишком много места. Нам всего лишь надо привязать нижеприведенный код к нашему индексному файлу:
Code
<link type='text/css' href='style.css' rel='stylesheet' />
Шаг 7. jQuery-доработки
Теперь для полноценной работы модального окна формы мы должны вставить следующий jQuery-код:
jQuery
Code
<script>
$(function() {
$("a[rel]").overlay(function() {
var wrap = this.getContent().find("div.wrap");
if (wrap.is(":empty")) {
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
$(function() {
$("a[rel]").overlay(function() {
var wrap = this.getContent().find("div.wrap");
if (wrap.is(":empty")) {
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
Заключение.
Вот и готова наша интересная форма обратной связи. Путь был долгим и сложным, поэтому, если кто-нибудь что-нибудь не понял выслушаю, Ваши вопросы в комментариях к данному уроку. А у меня на этом все, до новых встреч, друзья!
Вы сейчас просматриваете Форма обратной связи в модальном окне. Данный файл находится в категории Скрипты для ucoz. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Скрипты для ucoz. Для того чтобы скачать Форма обратной связи в модальном окне нажмите на кнопку СКАЧАТЬ ФАЙЛ выше. Надеемся вам понравился файл Форма обратной связи в модальном окне и пригодился. По всем вопросам обращайтесь в чат на сайте или к администрации.
| Всего комментариев: 0 | |
