HTML: Вставьте код внутри тега body:
Код
<!--CallBack-->
<div id="stf_win">
<div style="float: left; padding: 3px 10px;width: 290px;height: 254px;background: #fff; border: 1px solid #E2E2E2; border-left: 0px; border-right: 0px;">
<p style="color: gray; margin: 0;font-weight: bold;">Запишитесь на прием и мы перезвоним вам</p>
$MFORM_2$
</div>
<div style="float: left;">
<a href="#" id="stf_win_open">Позвоните мне</a>
</div>
</div>
<!--#CallBack-->
CSS: Вставьте стили внутри тега <head>, или в css файл вашего сайта:
Код
<style>
#stf_win{
font: 12px/18px Tahoma, Verdana, sans-serif;
position: absolute;
top: 200px;
left: -310px;
line-height: 200%;
display: inline-block;
}
#stf_win input[type='text'],textarea{
width: 95%!important;
font-family: Tahoma, Verdana, Arial, Sans-Serif, Lucida Sans;
font-size: 14px;
padding: 5px 5px 5px;
background: #FFF;
border-top: 1px solid #ABADB3;
border-bottom: 1px solid #DCDCDC;
border-left: 1px solid #DCDCDC;
border-right: 1px solid #DBDFE6;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#stf_win_open{
background: url(http://demo.ucozon.ru/files/upload/img.png) no-repeat;
text-indent: -99999px;
display: block;
width: 41px;
height: 262px;
}
</style>
JQuery: Скрипт вставьте внутри тега <head>:
Код
<script>
$(document).ready(function(){
$("#stf_win_open").click(function () {
var th = $("#stf_win");
if (th.css('left') == '-310px') {
th.animate({
'left':'0px'
},100);
} else {
th.animate({
'left':'-310px'
},100);
}
return false;
});
});
</script>
Настройки почтовой формы:
1. Изучите полностью модуль "Почтовые формы" (требуется менее 10 мин.):
http://u.to/QZeSAw 2. Создайте почтовую форму, и в шаблон вставьте это:
Код
Имя (*):<br/>
<input type="text" name="f2" size="30"/>
<br/>
Телефон (*):<br/>
<input type="text" name="f4" size="30"/>
<input type="hidden" name="f1" value="hidden@ucoz-mail.com"/>
<br/>
Комментарий:<br/>
<textarea rows="7" name="f3" cols="30" style="overflow: hidden; resize: none; height: 40px;"></textarea>
<br/>
* отмечены обязательные поля <input type="submit" style="float: right;" value="Отправить"/>
3. Создайте одно текстовое поле (через конструктор полей), и вставьте галочку в пункте "Обязательное поле".
Внутри HTML кода, есть код $MFORM_2$ - поменяйте на свою поч. форму.
PSD формат картинки "Записаться" для кнопки, прикреплен к посту.