Главная » Уроки » Создаем всплывающую контактную форму для сайта

Создаем всплывающую контактную форму для сайта

Все мы привыкли видеть контактные на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя пользователей на другие страницы.
В свое время мы рассматривали, как встроить контактную форму в модальное окно работающее на jQuery. Сегодня же, хочу познакомить вас, с интересным решением создания отдельной, оригинально оформленной, всплывающей формы контактов для сайта.

 

Всплывающая контактная форма

На мой взгляд, замечательный образец средств взаимодействия с пользователями.

Пример посмотрели. Теперь, давайте разложим эту форму на составляющие, от создания общей структуры  в Html,  до формирования внешнего вида макета с помощью CSS.

HTML-код формы

Ничего сверхъестественного,  максимально простой каркас обычной контактной формы, помещенный в блочный элемент div с определенным идентификатором и классом,  для дальнейшего формирования внешнего вида формы в css  и взаимодействия с небольшим javascript, который нам понадобится для активации и закрытия всплывающей формы.

<div id="envelope" class="envelope">
   <a class="close-btn" href="javascript:void(0)" onclick = "document.getElementById('envelope').style.display='none';document.getElementById('fade').style.display='none'">Закрыть</a>
     <h1 class="title">Отправить нам сообщение</h1>
      <form method="post" action="">
	<input type="text" name="sender_name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'* Ваше Имя':this.value;" value="* Ваше Имя" class="your-name"/>
	<input type="text" name="sender_email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'* Ваш Email':this.value;" value="* Ваш Email" class="email-address"/>
	<textarea class="your-message">Пожалуйста, введите своё сообщение здесь ..</textarea>
	<input type="submit" name="send" value="Отправить" class="send-message">
      </form>
</div>

Так же, нам необходимо создать слой затемнения общего фона, при активации всплывающей формы. Выполнить эту задачу можно по разному, но мы мудрить особо не будем и добавим еще один div, присвов ему идентификатор: id="fade" и класс: class="black-overlay". Поместить его можете рядом с формой, чтобы долго не искать при необходимости.

<div id="fade" class="black-overlay"></div>

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

<a class="show-btn" href = "javascript:void(0)" onclick = "document.getElementById('envelope').style.display='block';document.getElementById('fade').style.display='block'">Обратная связь</a>

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

<a class="close-btn" href="javascript:void(0)" onclick = "document.getElementById('envelope').style.display='none';document.getElementById('fade').style.display='none'">Закрыть</a>

Завершающим штрихом html-разметки нашей формы будет подключение к документу файла стилей modal-contact-form.css, в котором мы и будем формировать все необходимые элементы формы. Подключаем по накатанной, для тех кто не в теме поясню, в разделе между тегами <head>...</head> следует прописать такую сточку:

<link rel="stylesheet" type="text/css" href="modal-contact-form.css" />

Вот и все, давайте теперь, посмотрим на полный Html-код страницы содержащей всплывающую форму обратной связи:

<!DOCTYPE html>
<html>
   <head>
      <title>Всплывающая контактная форма</title>
      <link rel="stylesheet" type="text/css" href="modal-contact-form.css" />
   </head>
       <body>
	<a class="show-btn" href="javascript:void(0)" onclick = "document.getElementById('envelope').style.display='block';document.getElementById('fade').style.display='block'">Обратная связь</a>
	   <div id="envelope" class="envelope">
		<a class="close-btn" href="javascript:void(0)" onclick = "document.getElementById('envelope').style.display='none';document.getElementById('fade').style.display='none'">Закрыть</a>
		<h1 class="title">Отправить нам сообщение</h1>
		<form method="post" action="путь до обработчика">
		     <input type="text" name="sender_name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'* Ваше Имя':this.value;" value="* Ваше Имя" class="your-name"/>
		     <input type="text" name="sender_email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'* Ваш Email':this.value;" value="* Ваш Email" class="email-address"/>
		     <textarea class="your-message">Пожалуйста, введите своё сообщение здесь ..</textarea>
		     <input type="submit" name="send" value="Отправить" class="send-message">
		</form>
	   </div>
	   <div id="fade" class="black-overlay"></div>
	</body>
</html>

Прежде чем перейдем к самому интересному, к формированию стилей нашей контактной формы с помощью CSS, немного отступлю. Самые внимательные, наверняка заметили, что кнопки открытия и закрытия формы реализованы в виде ссылок с «глушилкой» href="javascript:void(0)". Плохо этот или хорошо, точного ответа для себя я так и не нашел, использую этот способ по привычке. Хотя для элементов, на которых событие onclick обрабатывается скриптом, думается мне, логичнее и правильнее, использовать <button>, <span> или <div>. При желании, вы всегда можете так и поступить с кнопками из данного примера.

Магия CSS

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

А вот, непосредственно и сам CSS-код, нашей замечательной формы, с небольшими комментариями, для ясности и дабы избежать лишних вопросов:

/* устанавливаем слой затемнения фона,
  ** опрделяем позиции, цвет и интенсивность затемнения  */
.black-overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.7;
	opacity:.70;
	filter: alpha(opacity=70);
}
/* устанавливаем рисунок основы,
  ** опрделяем размеры и положение на экране  */
.envelope {
	display: none;
	position: absolute;
	width: 600px;
	height: 340px;
	background: url(images/envelope.png) center no-repeat;
	z-index:1002;
	position: relative;
	margin: 10% auto;
}
/* формируем кнопку закрытия,
  ** размеры, положение на форме  */
.close-btn {
	width: 31px;
	height: 31px;
	display: block;
	cursor: pointer;/* для случая применения отличных от <a> тегов */
	background: url(images/close.png);
	text-indent: -4999px;
}
/* кнопка закрытия при наведении */
.close-btn:hover{
	background: url(images/close-hover.png);
 
}
/* оформляем заголовок формы */
.title {
	font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
	font-size:22px;
	font-weight: normal;
	font-weight: 200;
	text-align:left;
	position: absolute;
	top: 30px;
	left: 40px;
/* можно заменить на другую картинку
   ** или border-bottom: бла бла бла */	
	background: url(images/divider.png) no-repeat bottom;
	color: #545151;
	height: 40px;
	width: 400px;
	margin: 15px 0;
	text-shadow: 1px 1px #FFF;/* тень текста */
}
/* стили для полей ввода */
input[type=text] {
	font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
	font-size: 13px;
	background-color:rgb(255,255,255);
	color: #787474;
	padding-left: 10px;
	width:208px;
	height:33px;
	border-color:rgb(182,182,182);
	border-width:1px;
	border-style:solid;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
	border-radius: 3px;
	-moz-border-radius: 3px;
}
/* меняем оформление полей ввода при фокусе */
input[type=text]:focus, .your-message:focus {
	outline: none;
	background-color:rgb(255,255,255);
	border-color:rgb(126,139,153);
	border: 1px solid;
	-moz-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
	-webkit-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
	box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
	-ms-filter:"progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
		progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
		progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
.your-message {
	font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
	font-size: 13px;
	background-color:rgb(255,255,255);
	color: #787474;
	padding: 10px 0 0 10px;
	width:448px;
	height:93px;
	border-color:rgb(182,182,182);
	border-width:1px;
	border-style:solid;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
	position: absolute;
	top: 150px;
	left: 40px;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
 
.your-name {
	position: absolute;
	top: 100px;
	left: 40px;
}
 
.email-address {
	position: absolute;
	top: 100px;
	left: 280px;
}
/* оформляем кнопку отправки */
.send-message {
    background-color: #929FAB;
	background-image:-moz-linear-gradient(49% 0% -90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%); 
	background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(171,181,191)),color-stop(1, rgb(124,138,152)));
	background-image:-webkit-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
	background-image:-o-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
	background-image:-ms-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
	background-image:linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
	width:130px;
	height:35px;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true); 
	color: #fff;
	font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
	font-size: 13px;
	text-shadow: 0 1px 0 #21405D;
	font-weight: bold;
	border: none;
	cursor: pointer;
	border-radius: 3px;
	-moz-border-radius: 3px;
	position: absolute;
	top: 269px;
	right: 100px;
}
/* оформляем кнопку отправки при наведении */
.send-message:hover{
    background-color: #A0ACB9;
	background-image:-moz-linear-gradient(49% 0% -90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%); 
	background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(170,181,195)),color-stop(1, rgb(144,157,169)));
	background-image:-webkit-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
	background-image:-o-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
	background-image:-ms-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
	background-image:linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
	width:130px;
	height:35px;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
/* оформляем кнопку отправки в режиме активной */
.send-message:active{
	background-image:-moz-linear-gradient(49% 0% -90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%); 
	background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(142,154,167)),color-stop(1, rgb(124,138,152)));
	background-image:-webkit-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
	background-image:-o-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
	background-image:-ms-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
	background-image:linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
	width:130px;
	height:35px;
	-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
	-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
	box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
	progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}

Код получился довольно объемным, ну что поделаешь, не могу отказать себе в удовольствии, там где это допустимо и оправдано конечно, поэкспериментировать и применить на практике новые свойства и функции стандарта CSS3. Благодаря чему, появляются интересные и свежие решения по верстке. Не без ошибок и сомнений, но это реальная движуха и одновременно полезная практика.

Все! Только что, мы вместе с вами, создали отличный инструмент взаимодействия с пользователями, всплывающую контактную форму для сайта. Вам остается только посмотреть живой пример, при желании скачать исходники и прикрутить к форме свой php-обработчик.

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

Урок основан на материалах сайта: (medialoot.com)

Удачи Всем! Благополучно пережить майские праздники!

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

51 комментарий
  1. Виктория says:

    Форма очень понравилась, еще бы обработчик добавили на php все таки не все такие профи )))

    Ответить
    • driver says:

      Виктория, спасибо за отзыв.

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

      Ответить
      • Виктория says:

        Ломится конечно, но всем же хочется чтобы рааааз и готово 😉 тем более лично мне ваша форма больше всех понравилась )))

        Ответить
        • Полностью согласен с Викторией. Добавьте в исходники php обработчик с возможностью проверки на заполение полей и вашу форму добавлю в избранное, чтобы использовать ее на всех сайтах 🙂

  2. Алекс says:

    Воспользовался данным примером и решил свою задачу. Но хочу посоветоваться, как быть, если у меня две формы и цвет затемнения у каждой формы разного цвета. Пробовал через айдишник другой, но видимо важно чтобы именно fade был. Буду признателен за помощь!

    Ответить
    • driver says:

      Используйте id с отличным от первой формы значением, ну например, для фона id="fade-2", а для модальной формы id="onvelope-2". Класс для фона обзовите в соответствии с цветом, например, если с зеленым оттенком, то что-то вроде class="green-overlay", и конечно не забудьте прописать стили для этого класса в css. Просто скопируйте правила из .black-overlay и измените значение свойства background-color на своё.

      В ссылках вызова и закрытия, в событии onclick, идентификаторы в соответствии с теми, что указали для формы и фона затемнения.

      Ответить
  3. Алекс says:

    Да, если был обработчик, было бы совсем классно! С обработкой полей на валидность и формированием в том же окне сообщения о доставке;) Ждать?

    А вопрос насущный, по тексту — как сделать, чтобы форма закрывалась при щелчке по тени в любом месте?

    Ответить
    • driver says:

      Всё очень просто, к <div id="fade" class="black-overlay"> добавьте событие onclick, должно получиться следующее:

      <div id="fade" class="black-overlay" onclick="document.getElementById('envelope').style.display='none';document.getElementById('fade').style.display='none'"></div>

      Ответить
  4. Алекс says:

    ЗЫ. С полями имя и мейл вообще круто — нужно с первого раза вводить правильно. Если к ним возвращаться, то когда они попадают в фокус все затирается. Это правильно, неча скакать туда-сюда.

    Ответить
  5. Виктор says:

    Вы не могли бы приложить сюда простой обработкчик? Что бы можно было просто добавить туда адрес почты и все. Я просто не такой спец. попробовал скачать какой то, подключить и ничего не вышло((((

    Ответить
  6. Михаил says:

    Где взять для этой формы обработчик!! Если можно с инструкцией как этот обработчик связать с этой супер формой!

    Ответить
  7. mr.prometei says:

    Спасибо, за полный материал.

    Скачал. Немного изменил, добавил поля , и все работает.

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru