Dobrovoi Master
сделано с душой

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

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

Все мы привыкли видеть контактные на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя пользователей на другие страницы.
В свое время мы рассматривали, как встроить контактную форму в модальное окно работающее на 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="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" 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);
}

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

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

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

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

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

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

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

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

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

    Ответить
    • driver:

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

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

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

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

        Ответить
        • Владислав:

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

  2. Алекс:

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

    Ответить
    • driver:

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

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

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

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

    Ответить
    • driver:

      Всё очень просто, к <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. ЗЫ. С полями имя и мейл вообще круто — нужно с первого раза вводить правильно. Если к ним возвращаться, то когда они попадают в фокус все затирается. Это правильно, неча скакать туда-сюда.

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

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

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

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

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

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

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

    Ответить
  8. Алексаандр:

    Добрый

    Плюс

    1. Оформлен красиво

    Минус

    1. Он появляется сразу а не анимация

    2. При уменьшении экрана начинает показывает свои касяки, потому как там 100% браузерного экрана, если страница будет больше то она не будет покрывать весь размер. fixed лучше использовать такой вариант

    Ответить
    • driver:

      Здравствуйте, Александр.

      1. Думаю, прикрутить любую анимацию не проблема(урок не о том)

      2. Минус при просмотре на разных экранах больше не в позиционировании, а в использовании изображения в качестве фона формы (сейчас можно обойтись чистым CSS)

      Ответить
  9. Здравствуйте. Сделал форму, но не могу привязать ее к кнопке. Вставляю url, но кнопка отправляет на главную.

    Вставил в css такой вот код:

    contact-us a {

    border:1px solid #ccc; /*цвет границы*/

    background:#2674C8; /*цвет фона*/

    padding:10px 20px; /*внитринние отступы*/

    display:block;

    text-align:center; /*выравнивание текста по центру*/

    color:#fff; /*цвет текста*/

    text-decoration:none; /*убрать подчёркивание у ссылки*/

    width:200px; /*ширина кнопки*/

    margin:auto; /*выравнивание кнопки по центру*/

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    transition: all 0.5s ease;

    }

    contact-us a:hover {

    -moz-box-shadow: 0 0 6px #000;

    -webkit-box-shadow: 0 0 6px #000;

    box-shadow:0 0 6px #000;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    transition: all 0.5s ease;

    }

    но он не стилизует форму.

    Возможно в коде ошибки. Делаю сайт на вордпрессе.

    Спасибо.

    Ответить
    • driver:

      Здравствуйте Александр.

      но он не стилизует форму

      Приведённый вами код и не должен стилизовать форму, т.к просто не имеет к ней никакого отношения.

      Это, как я понимаю, фарш css вашей кнопки(ссылки) для вызова мод.окна, который ни о чём мне не говорит, важнее, что у вас прописано в атрибуте href="". Должна присутствовать связь с контейнером формы, id или как в моём примере, прописано событие onclick

      Ответить
      • Спасибо за ответ.

        Да, извините, я неправильно выразился — это фарш ссылки для вызова формы.

        <a href="#contact_form_pop_up" rel="nofollow">БЕЗКОШТОВНА КОНСУЛЬТАЦІЯ</a>

        Текст

        [contact-form-7 id="99" title="Без названия"]

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

        по ссылке она работает, я прикрутил капчу

        но хотелось бы вместо ссылки сделать кнопку

        Ответить
        • driver:

          Для начала немного подкорректируем div-контейнер где расположена кнопка, добавим внешние отступы сверху и снизу, и если вам нужна, расположим вложенные элементы (в вашем случае это кнопа) по центру:

          .contact-us { margin: 1rem auto; text-align: center; }

          Затем оформите ссылку в виде кнопки примерно так:

          .contact-us a { border: 0; background: #086fb9; border-radius: 2px; display: inline-block; padding: .85rem 2.13rem; font-size: .85rem; font-family: Montserrat, "Helvetica Neue", sans-serif; letter-spacing: 0.046875em; line-height: 1.3125; color: #fff; text-decoration: none; margin: 0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; white-space: normal; word-wrap: break-word; -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); }.contact-us a:hover { -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15); box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15); }

          Вы допустили ошибку при вставке своего кода, пропустив точку в названии селектора contact-us a, а нуна так: .contact-us a

          Просто правильно скопируйте мой вариант и добавьте в свою css и посмотрите что получится.

  10. Большое спасибо. Скопировал, но пока ничего не изменилось.

    Копировал тщательно, все как у Вас.

    Может, я просто, извините, тупой?

    Решил проблему другим путем. Привязал ориджин-кнопку к ссылке. Ссылку поместил в другую часть сайта, а кнопку — на ее место. Получилось нормально.

    Ответить
    • driver:

      Ну и отлично, главное проблема решена так или иначе

      Ответить
  11. Доброго времени суток. Форма отлична, спасибо. Но мне по роду деятельности не подходит одно поле — емайл, мне нужно контактный телефон, вместо него. Смотрел в код — голова кипит. Подскажите пожалуйста что надо изменить и где, чтобы вместо майла принимал номер телефона?

    Ответить
  12. Замечательная форма!

    Осваиваю верстку. Очень понравилась Ваша форма, красивая, удобная. Спасибо!

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

Отправляя к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