» »

Контактная форма обратной связи сайта

Контактная форма обратной связи сайта

Оригинальный стиль для Формы обратной связи для сайта с отправкой на почту, где вероятно выстраивалось по оформлению под модальное окно на CSS. Почти все интернет ресурсы теперь используют свою по умолчанию контактную форму, которая подключается автоматически. Хотя по умолчанию это может выглядеть скучно, однако мы можем настроить его с помощью CSS-кодирования.

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

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

HTML

Код
<div id="gesion-ungred">
<h3>Связаться с нами</h3>
<form name="vebedos-neludcain">
<input id="geadmoduced_vebedos-neludcain-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="geadmoduced_vebedos-neludcain-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="geadmoduced_vebedos-neludcain-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="geadmoduced_vebedos-neludcain-submit" type="button" value="Submit" />
<div style="max-width: 225px; text-align: center; width: 100%;">
<div id="geadmoduced_vebedos-neludcain-error-message">
</div>
<div id="geadmoduced_vebedos-neludcain-success-message">
</div>
</div>
</form>
</div>

CSS

Код
#gesion-ungred {
  margin: auto;
  width: 335px;
  height: 375px;
  padding: 25px;
  border-radius: 1em;
  border-top: 1px solid #e8e2e2;
  border-right: 1px solid #9c9494;
  border-left: 1px solid #dcd5d5;
  border-bottom: 1px solid #8a8282;
  background-color: #cabebe;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
  background-image: -webkit-linear-gradient(top, #e6dcdc 0%, #f1e9e9 50%, #d0c8c8 100%);
  background-image: -moz-linear-gradient(top, #e6dcdc 0%, #ece5e5 50%, #d8d4d4 100%);
  background-image: -ms-linear-gradient(top, #e6dcdc 0%, #ece5e5 50%, #d8d4d4 100%);
  background-image: -o-linear-gradient(top, #e6dcdc 0%, #ece5e5 50%, #d8d4d4 100%);
  background-image: linear-gradient(top, #e6dcdc 0%, #ece5e5 50%, #d8d4d4 100%);
  box-shadow: 1px 1px 5px #d0caca;
}

#gesion-ungred h3 {
  color: #fbf6f6;
  font-family: Georgia;
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  margin: 0 -36px 20px -36px;
  padding: 12px;
  text-align: center;
  text-shadow: 2px 0 0 #306382;
  -webkit-box-shadow: inset 0 0 25px rgba(25, 24, 24, 0.3), 0px 1px 5px #615e5e;
  -moz-box-shadow: inset 0 0 25px rgba(25, 24, 24, 0.3),0px 1px 5px #615e5e;
  box-shadow: inset 0 0 25px rgba(25, 24, 24, 0.3), 0px 1px 5px #615e5e;
  background-color: #4b659c;
  position: relative;
}

#gesion-ungred h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#gesion-ungred h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#geadmoduced_vebedos-neludcain-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#geadmoduced_vebedos-neludcain-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#geadmoduced_vebedos-neludcain-email-message{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}

#geadmoduced_vebedos-neludcain-submit {
  width: 95px;
  height: 30px;
  float: right;
  color: #f7eeee;
  padding: 0;
  cursor: pointer;
  margin: 10px 0px 3px 0px;
  background-color: #0a608e;
  border-radius: 4px;
  text-shadow: 1px 0 0 #1f4962;
  -webkit-box-shadow: inset 0 0 35px rgba(25, 24, 24, 0.3), 0px 1px 5px #666;
  -moz-box-shadow: inset 0 0 35px rgba(25, 24, 24, 0.3),0px 1px 5px #666;
  box-shadow: inset 0 0 35px rgba(49, 46, 46, 0.3), 0px 1px 5px #736c6c;
  background-color: #12c51d;
  border: 1px solid #a9afa9;
}

#geadmoduced_vebedos-neludcain-submit:hover {
background:#4c9bc9;
}
#geadmoduced_vebedos-neludcain-error-message, #geadmoduced_vebedos-neludcain-success-message {
width: 325px;
margin-top:35px;
}

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

Демонстрация
2019-08-05 Загрузок: 1 Просмотров: 301 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar