Красивая Форма обратной связи - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Как узнать погоду за окном?
Всего ответов: 1888
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

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

Хочешь сказать спасибо? Кликни на рекламный баннер.

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

И нажимаем Сохранить.
2. Код формы типа $MFORM_4$ устанавливаем на ту страницу, где вы запланировали или создаете новую страницу, куда вставляете код:
Code
<div id="msgForm">
$MFORM_4$
</div>

Если Вы хотите Форму обратной связи вставить в AJAX окно то пропустите пункт 2 и далее:
3. В то место где вам нужна почтовая форма ставим (в моём случае Страница материала и комментария к нему):
Code
<!--<Обратная связь>-->
<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>
<!--</Обратная связь>-->

И кнопка для вызова формы:

Code
<a href="javascript:;" onclick="openchat();"><input value="Обратная связь в AJAX окне" onclick="confirmClose()" type="button"></a>

Или ссылка: Обратная связь в AJAX окне
Code
<a href="javascript:;" onclick="openchat();">Обратная связь в AJAX окне</a>


Вот и всё. Удачи !
Адаптировал под Ucoz: -angel-
Сайт: http://megascripts.ru/





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

Источник материала: http://pehaa.com/2011/07/create-a-unique-contact-form-with-css3-transitions/
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 22795 | Загрузок: 1304 | Комментарии: 5 | Рейтинг: 4.8/17
Теги: контактная форма, форма обратной связи, скрипт, новая контактная форма, для uCoz
Всего комментариев: 4
Сообщение №4 от Андрей
Добавлен: 19.03.2014

Помогите разобраться, поставил ваш код, он не совсем правильно работает. Меня больше волнует, как его можно изменить так, что бы конверт с формой всегда был в раскрытом виде!?
Сообщение №2 от Павел
Добавлен: 30.08.2013

У меня не получается поставить толком, кнопка Готого ... не работает
Сообщение №3 от Олег
Добавлен: 31.08.2013

Всё должно работать, делайте по пунктам
Сообщение №1 от Вит
Добавлен: 24.03.2013

А не подскажите как добавить дополнительное поле Прикрепить файлы? т.е поле то я добавил а вот кнопка обзор не работает)))
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Самая маленькая единица измерения времени – йоктосекунда.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта