выезжающая форма обратной связи

Выезжающая форма обратной связи

Не так давно делали мы один сайт и одно из заданий было создать выезжающую, или выпадающую форму обратной связи. Я решил реализовать этот пункт на jQuery, его я вроде неплохо знаю, конечно можно было бы и на чистом CSS, но jQuery предоставляет нам куда более широкий набор инструментов для реализации выезжающего(выпадающего меню).

Демо вы можете посмотреть вот на этом сайте, ФОРМА ПОЯВЛЯЕТСЯ ЛИШЬ ПРИ РАЗМЕРАХ ОКНА БРАУЗЕРА МЕНЕЕ 768 ПИКСЕЛЕЙ, ПОТОМУ ПРОСТО СТЯНИТЕ ОКОШКО БРАУЗЕРА ДО ПОЯВЛЕНИЯ КНОПОЧКИ.
Ну начнем…
Для начала давайте создадим нашу форму в html-файле

<div class=»order_form_hide» id=»wpcf7-f18-o6″>
<div class=»title»>
<p><strong>Запишитесь</strong>&nbsp;</p>
<p> для бесплатного аудита и рассчета </p>
<p> стоимости повышения ваших продаж </p>
<p></p></div>
<div class=»roww l_name»><input type=»text» name=»name» placeholder=»Введите Ваше имя*»></div>
<div class=»roww l_tel»><input type=»text» name=»phone» placeholder=»Введите Ваш телефон*»></div>
<div class=»roww l_mail»><input type=»text» name=»addres» placeholder=»Введите Ваш e-mail*»></div>
<div class=»row_button»><button class=»orange»>Отправить</button></div>
</div>

выезжающая форма обратной связи
выезжающая форма обратной связи

Теперь создадим кнопочку по нажатию на которую будет выезжать наша форма она будет скрываться во время появления нашей формы.

<div class=»click_panel»>
<img src=»/img/contacts.png» alt=»»></div>

Вот стили нашей кнопочки

.click_panel{position:fixed; top:30%; right:0px; width:8%; z-index: 9111;}

Кнопочка вывода формы связи
Кнопочка вывода формы связи

Теперь нам нужно привязать нашу форму к правой стороне экрана и скрыть  форму я скрою форму с помощью dispaly:none , для этого опишем класс формы в css-файлике .

.order_form_hide
{
position: fixed;
top: 0%;
right: 0px;
width: 260px;

dispaly:none;
background-color: lightgray;
z-index: 99999;

overflow: hidden;
padding: 2px 14px 12px 14px;
border-radius: 5px;
}

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

Для плавного появления формы будем использовать jQuery  функцию  show(‘slow’), а для скрытия кнопочки функцию hide(‘slow’).

$(‘.click_panel’).click(function(){$(‘#wpcf7-f18-o6’).show(‘slow’)});
$(window).scroll(function(){$(‘#wpcf7-f18-o6’).hide(‘slow’)});

Так же можно реализовать все в одной строке.

Например, вот так

$(‘.click_panel’).hover(function(){$(‘#wpcf7-f18-o6’).slideToggle(‘slow’)});

Я предпочитаю этот вариант, но иногда заказчику хочется оригинальности….

И не забываем подключить джейквери! Для этого мы в HTML файле вставляем вот такой код

<script src=»http://yastatic.net/jquery/1.6.4/jquery.min.js»></script>

Вот и весь код =)

Всего две строчки, а какой замечательный эффект!)

 

 

 

 

 

 

 


Добавить комментарий