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

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

Красивая Форма обратной связи в виде письма



Идея заключается в создании образа письма, которое будет выдвигаться из конверта при наведении курсора мыши. Форма работает в браузерах, поддерживающие переходы CSS3. В Internet Explorer форма отображается не корректно.
Итак приступим:
1. Через Панель управления заходим в Почтовые формы нажимаем на кнопку Создать почтовую форму
Далее нажимаем [ Конструктор полей ] и добавляем новое поле, заполняем название поля Имя - жмём Добавить поле.
Далее перестроим шаблон [ Перестроить шаблон формы ], удаляем всё оттуда и ставим:

Код
<style type="text/css">  
div.d, #form, input.i, textarea.t, p.g {margin: 0; padding: 0; border: 0; outline: none;}  

p.g {font-family:Comic Sans Ms; text-align:center; color: #FF9933; font-size:24px;}  
#wrap {width:530px; margin:20px auto 0; height:700px;}  

#form_wrap {overflow:hidden; height:446px; position:relative; top:0px;  
  -webkit-transition: all 1s ease-in-out .3s;  
  -moz-transition: all 1s ease-in-out .3s;  
  -o-transition: all 1s ease-in-out .3s;  
  transition: all 1s ease-in-out .3s;}  
   
#form_wrap:before {content:"";  
  position:absolute;  
  bottom:128px;left:0px;  
  background:url('http://megascripts.ru/demo/kontakt_form/before.png');  
  width:530px;height: 316px;}  
   
#form_wrap:after {content:"";position:absolute;  
  bottom:0px;left:0;  
  background:url('http://megascripts.ru/demo/kontakt_form/after.png');  
  width:530px;height: 260px; }  

#form_wrap.hide:after, #form_wrap.hide:before {display:none; }  
#form_wrap:hover {height:776px;top:-200px;}  

#form {background:#ffddb6;  
  position:relative; top:200px;overflow:hidden;  
  height:200px;width:400px;margin:0px auto;padding:20px;  
  border: 1px solid #fff;  
  border-radius: 5px;  
  -moz-border-radius: 5px; -webkit-border-radius: 5px;  
  box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;  
  -moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;  
  -webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;  
  -webkit-transition: all 1s ease-in-out .3s;  
  -moz-transition: all 1s ease-in-out .3s;  
  -o-transition: all 1s ease-in-out .3s;  
  transition: all 1s ease-in-out .3s;}  

#form_wrap:hover #form {height:530px;}  

label.l {  
  font-family:Comic Sans Ms; color: #B22222;  
  font-weight:bold;  
  margin: 11px 20px 0 0;  
  font-size: 15px;  
  text-transform: uppercase;  
  text-shadow: 0px 1px 0px #fff;}  

input.i[type=text], textarea.t {  
  font: 14px normal normal uppercase helvetica, arial, serif;  
  color: #7c7873;background:none;  
  width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;  
  border:1px solid #f8f5f1;  
  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;  
  -moz-box-shadow: inset 0px 0px 1px #726959;  
  -webkit-box-shadow: inset 0px 0px 1px #b3a895;  
  box-shadow: inset 0px 0px 1px #b3a895;}  

textarea.t { height: 80px; padding-top:14px;}  

textarea.t:focus, input.i[type=text]:focus {background:rgba(255,255,255,.35);}  

#form_wrap input.i[type=submit] {  
  position:relative;font-family: 'mikodacspcsregular';  
  font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff;  
  width:100%; text-align:center;opacity:0;  
  background:none;  
  cursor: pointer;  
  -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;  
  -webkit-transition: opacity .6s ease-in-out 0s;  
  -moz-transition: opacity .6s ease-in-out 0s;  
  -o-transition: opacity .6s ease-in-out 0s;  
  transition: opacity .6s ease-in-out 0s;}  

#form_wrap:hover input.i[type=submit] {z-index:1;opacity:1;  
  -webkit-transition: opacity .5s ease-in-out 1.3s;  
  -moz-transition: opacity .5s ease-in-out 1.3s;  
  -o-transition: opacity .5s ease-in-out 1.3s;  
  transition: opacity .5s ease-in-out 1.3s;}  

#form_wrap:hover input.i:hover[type=submit] {color:#435c70;}  
</style>  

<table id="table1">  
<div class="d" id="wrap">  
<div class="d" id="form_wrap">  
<div id="form">  
<p class="g">Здравствуйте, уважаемый !</p><br>  
<label class="l">Имя: </label><input class="i" type="text" name="f4" value="" id="" /><br>  
<label class="l">E-mail: </label><input class="i" type="text" name="f1" value="" id="" /><br>  
<label class="l">Ваше сообщение : </label><br><textarea name="f3" class="t"></textarea><br>  
<input class="i" type="submit" name ="submit" value="Готово. Отправить!"/>  
</div>  
</div>  
</div>  
</table>


Если Вы хотите Форму обратной связи вставить в AJAX окно то пропустите пункт 2 и далее:
3. В то место где вам нужна почтовая форма ставим (в моём случае Страница материала и комментария к нему):

Код
<div id="msgForm">  
$MFORM_4$  
</div>


Если Вы хотите Форму обратной связи вставить в AJAX окно то пропустите пункт 2 и далее:
3. В то место где вам нужна почтовая форма ставим (в моём случае Страница материала и комментария к нему):

Код
<!--<Обратная связь>-->  
<script type="text/javascript">  
function openchat(){new_uWnd('chat','Обратная связь',600,400,{align:0,shadow:0,close:1,autosize:1,maxh:600,minh:500,resize:0}, $("#chat").html() )}  
</script>  
<div style="display:none;" id="chat">$MFORM_4$</div>  
<!--</Обратная связь>-->


Кнопка вызова формы:

Код
<a href="javascript:;" onclick="openchat();"><input value="Обратная связь в AJAX окне" onclick="confirmClose()" type="button"></a>  
<a href="javascript:;" onclick="openchat();">Обратная связь в AJAX окне</a>
Красивая Форма обратной связи
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: Turbo
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar