www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание формы обратной связи

Применение jQuery для формы обратной связи

В предыдущих статьях рассказывалось о применении плагинов jQuery для формы обратной связи (см. статьи "Календарь в форме обратной связи", "Оформление формы обратной связи на сайте", "Значки +/- для ввода чисел в форме обратной связи"). Теперь рассмотрим несколько примеров вывода формы обратной связи на сайте.

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

Практически на любом сайте используются плагины фотогалерей для вывода увеличенных изображений. Обычно они позволяют выводить не только картинки, но и другой контент. В частности, нас интересует вывод страницы с формой обратной связи, то есть HTML-кода. Рассмотрим, как для этой цели можно применить популярные фотогалереи Fancybox и Prettyphoto. Установка и настройка этих и других плагинов jQuery подробно была рассмотрена ранее.

Экспериментировать, как обычно, будем с созданной нами простейшей формой обратной связи. Легче всего организовать вывод этой формы с помощью плагина Prettyphoto (см. статью Установка фотогалереи Prettyphoto). Это может выглядеть в виде следующей ссылки (пример действующий):

Вы можете оставить сообщение, заполнив следующую форму.

HTML-код такой ссылки следующий:
<a href="forma.html?iframe=true&width=400&height=300" rel="prettyPhoto[iframes]" >следующую форму</a>

Как видим, в отличие от вывода изображений, здесь необходимо указать не только адрес страницы с формой обратной связи (forma_01.html), но и размеры окна Prettyphoto (?iframe=true&width=400&height=300"). Обратите внимание, что при нажатии кнопки отправки сообщения, ответ выводится в том же окне.

Не намного сложнее реализуется вывод формы обратной связи с помощью Fancybox.
Для этого при установке Fancybox (см. статью Фотогалерея Fancybox - установка и настройка) необходимо добавить несколько строк в код инициализации:
<script type="text/javascript">
$(document).ready(function() {
$(".gallery a").fancybox(); // выбор всех ссылок с классом gallery
$("a.iframe").fancybox({ // выбор всех ссылок с классом iframe
width : 350,
height : 300
});
});
</script>

Для вывода HTML-страницы следует использовать следующую конструкцию ссылки:
<a class="iframe" href="URL страницы" title="Текст подписи в окне">Текст или картинка</a>.

Размеры окна, в котором будет выведена страница, устанавливаются в коде инициализации (параметры width и height), или аналогично в файле jquery.fancybox-1.3.3.js также параметрами width и height (см. выше).

Результат вывода формы обратной связи с помощью Fancybox выглядит следующим образом:

Вы можете оставить сообщение, заполнив следующую форму.

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

HTML-код такой конструкции выглядит следующим образом:
<a href="URL страницы" class="iframe" ><input type="button" style="cursor:pointer" value="Сообщение в Кремль" /></a>

22.11.2013 г.

см. все статьи по веб-дизайну >>

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: форма обратной связи, отправка e-mail с сайта, плагины jQuery, скрипт формы обратной связи