• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Красивая контактная форма для сайтов (Красивая форма обратной связи для интернет ресурса)
Красивая контактная форма для сайтов
Kosten
Пятница, 02 Августа 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44241
Награды: 70
Отличное решение для функций обратной связи, где по умолчанию идет одна кнопка, но при наведению га ее выдвигается полностью форма.Тем не менее, вы могли заметить, что иногда пользователям трудно найти ссылку на страницу с нами, потому что она находится где-то глубоко в вашем нижнем колонтитуле.

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



HTML

Код
<div class='form-parent'>
<form name="contact-form" class="cc-float-form">
<p></p>
Name:

<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Email:
<span style="color:red;">*</span>

<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Message: <span style="color:red;">*</span>

<textarea class="contact-form-area"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>

CSS

Код
.form-parent{
width:323px;
height:auto;
background: transparent url('http://zornet.ru/ABVUN/Aba/contact-button.png') no-repeat right 10px;
position:fixed;
top:10px;
left: -275px;
z-index:9999999;
transition:all ease .6s;
-moz-transition:all ease .6s;
-webkit-transition:all ease .6s;
-o-transition:all ease .6s;
}

.form-parent:hover{
left:0;
}

.cc-float-form{
background:-moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);
background:-webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);
background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);
background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);
background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);
color:#fafafa;
padding:10px;
width:250px;
border:2px solid #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#ContactForm1{
display:none;
}

.contact-form-area{
background: #222;
width: 245px;
padding: 10px 0px;
border: 1px solid #111;
box-shadow: 2px 2px 2px #111 inset;
-webkit-box-shadow: 2px 2px 2px #111 inset;
font-family:Verdana, Geneva, sans-serif;
color:#fafafa;
font-size: 12px;
}


Демонстрация
Прикрепления: 6766254.png (16.8 Kb) · adecan.zip (3.6 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Красивая контактная форма для сайтов (Красивая форма обратной связи для интернет ресурса)
  • Страница 1 из 1
  • 1
Поиск: