Закрыть ... [X]

Как сделать кнопку с формой на сайт

Все мы привыкли видеть контактные формы на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя пользователей на другие страницы.
В свое время мы рассматривали, как встроить контактную форму в модальное окно работающее на 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="mail/sendletter.php"> <input type="text" name="sender" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?' Ваше Имя':this.value;" value=" Ваше Имя" class="your-name"/> <input type="text" name="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="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="mail/sendletter.php"> <input type="text" name="sender" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?' Ваше Имя':this.value;" value=" Ваше Имя" class="your-name"/> <input type="text" name="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>

<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>

<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>

<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" />

<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" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?' Ваше Имя':this.value;" value=" Ваше Имя" class="your-name"/> <input type="text" name="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>

<!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" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?' Ваше Имя':this.value;" value=" Ваше Имя" class="your-name"/> <input type="text" name="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); }

/ устанавливаем слой затемнения фона, опрделяем позиции, цвет и интенсивность затемнения /.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-обработчик.

ДемоСкачать

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

Обновление от 21.05.2017
В архив с исходниками добавил папку «mail», в которой вы найдёте простейший php-обработчик для формы и файл конфигураций, для настройки. Обработчик привязан к данной форме, небольшая инструкция и комментарии прописанные непосредственно в коде файлов обработчика, надеюсь, помогут разобраться что, куда и зачем.

С Уважением, Андрей.

Буду всем признателен, если поделитесь ссылкой на запись в своих соц-сетях:


Поделись с друзьями



Рекомендуем посмотреть ещё:



Как сделать форму обратной связи на сайте, инструкция и примеры Стих про родителей трогательный на свадьбу



Как сделать кнопку с формой на сайт Формы html, форма для сайта, форма обратной связи для сайта, форма
Как сделать кнопку с формой на сайт Как сделать форму обратной связи во всплывающем окне для WordPress
Как сделать кнопку с формой на сайт Как сделать кнопку в html как сделать кнопку сайта Веб-дизайн
Как сделать кнопку с формой на сайт Как сделать на сайте всплывающую форму обратной связи
Как сделать кнопку с формой на сайт HTML формы создаем и раскручиваем сайт самостоятельно
Как сделать кнопку с формой на сайт 21 контактная форма для сайта (обратная связь) на jquery
Как сделать кнопку с формой на сайт Как добавить форму обратной связи на сайт
Как сделать кнопку с формой на сайт Как сделать форму в HTML для сайта
Как добавить HTML -кнопку на сайт Cached Более 20 лучших идей на тему «Связаные крючком куклы» на Десять шестидесятников о своей молодости Arzamas Дизайн ногтей, вдохновлённый фильмом "Гарри Поттер" (30 фото)

ШОКИРУЮЩИЕ НОВОСТИ