Улучшаем внешний вид обратной связи в Ajax окне торрент
13.07.2016, 18:33
Жанр: Скрипты Для uCoz
Просмотров: 255
Рейтинг Улучшаем внешний вид обратной связи в Ajax окне:
Можете оставить свой голос отметив одну из звездочек. | Проголосовало: 0 |
Шаг 1 - Установим JS:
Для началоа нам следует установить небольшой js и html код, в самый низ страницы перед закрывающим тегом :
Теперь нам следует зайти в Админ панель и активировать Почтовые формы, после чего заходим в них и выбираем Управление дизайном модуля, удаляем старый html код и устанавливаем новый:
А для того, чтобы вызвать окно обратной связи, устанавливаем следующий html код на страницу сайта:
Шаг 3 - Установим CSS:
Отлично, теперь нам следует прописать css стили и любоваться готовым решением:
На этом всё, спасибо за внимание!
Для началоа нам следует установить небольшой js и html код, в самый низ страницы перед закрывающим тегом :
Код
<div style="display:none;" id="feedback">$MFORM_1$</div>
<script>
function opensvaz(){
new _uWnd('svaz','Обратная связь',700,500,{align:'center',shadow:1,header:1,resize:0,autosize:1},$('#feedback').html());
};
</script>
<script>
function opensvaz(){
new _uWnd('svaz','Обратная связь',700,500,{align:'center',shadow:1,header:1,resize:0,autosize:1},$('#feedback').html());
};
</script>
Теперь нам следует зайти в Админ панель и активировать Почтовые формы, после чего заходим в них и выбираем Управление дизайном модуля, удаляем старый html код и устанавливаем новый:
Код
<div class="cell_feedback"> <div class="feedback_left">
<div>Ваше имя: <span class="red">*</span></div>
<input class="feedback_pole" name="f4" size="30" maxlength="70" type="text">
<div>Ваше E-mail: <span class="red">*</span></div>
<input class="feedback_pole" name="f1" size="30" maxlength="70" type="text">
<div>Текст сообщения: <span class="red">*</span></div>
<textarea class="feedback_pole" rows="7" name="f3" cols="30"></textarea>
<div>Ваш сайт:</div>
<input class="feedback_pole" name="f5" size="30" maxlength="70" type="text">
<div id="svaz_cod">Код безопасности: <span class="red">*</span></div>
$SECURITY_CODE$
<input class="left" id="fCode_svaz" name="f7" size="4" maxlength="4" type="text">
<input class="kn_svaz" value="Отправить" type="submit">
</div>
<div class="feedback_right">
<div class="feedback_ico">
<a href="#" target="_blank"><img alt="Следуй за мной В Контакт" title="v kontakte" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_vkontakte.png"></a>
<a href="#" target="_blank"><img alt="Следуй за мной в Twitter" title="twitter" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_twitter.png"></a>
<a href="#" target="_blank"><img alt="Следуй за мной в Facebook" title="facebook" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_facebook.png"></a>
<a href="javascript://" rel="nofollow" onclick="prompt('Мой Skype','1-1-1-1-1')"><img alt="Мой Skype" title="Skype" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_skype.png"></a>
<a href="javascript://" rel="nofollow" onclick="prompt('Мой ICQ номер','1-1-1-1-1')"> <img alt="Мой icq" title="Icq" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_icq.png"></a>
<a href="javascript://" rel="nofollow" onclick="prompt('Мой E-mail','1-1-1-1-1')"><img alt="Мой E-mail" title="E-mail" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_mail.png"></a>
</div>
<img alt="Это я" title="фото администратор" src="http://center-dm.ru/ucoz/vid_svaz/v1/foto_admin.jpg">
<h2>Внимание!</h2>
<p>Тут можно прописать убедительную просьбу, какие вопросы не следует задавать администратору или установить ссылку на страницу, где вы ответили на популярные вопросы ваших пользователей.</p>
</div>
</div>
<div>Ваше имя: <span class="red">*</span></div>
<input class="feedback_pole" name="f4" size="30" maxlength="70" type="text">
<div>Ваше E-mail: <span class="red">*</span></div>
<input class="feedback_pole" name="f1" size="30" maxlength="70" type="text">
<div>Текст сообщения: <span class="red">*</span></div>
<textarea class="feedback_pole" rows="7" name="f3" cols="30"></textarea>
<div>Ваш сайт:</div>
<input class="feedback_pole" name="f5" size="30" maxlength="70" type="text">
<div id="svaz_cod">Код безопасности: <span class="red">*</span></div>
$SECURITY_CODE$
<input class="left" id="fCode_svaz" name="f7" size="4" maxlength="4" type="text">
<input class="kn_svaz" value="Отправить" type="submit">
</div>
<div class="feedback_right">
<div class="feedback_ico">
<a href="#" target="_blank"><img alt="Следуй за мной В Контакт" title="v kontakte" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_vkontakte.png"></a>
<a href="#" target="_blank"><img alt="Следуй за мной в Twitter" title="twitter" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_twitter.png"></a>
<a href="#" target="_blank"><img alt="Следуй за мной в Facebook" title="facebook" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_facebook.png"></a>
<a href="javascript://" rel="nofollow" onclick="prompt('Мой Skype','1-1-1-1-1')"><img alt="Мой Skype" title="Skype" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_skype.png"></a>
<a href="javascript://" rel="nofollow" onclick="prompt('Мой ICQ номер','1-1-1-1-1')"> <img alt="Мой icq" title="Icq" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_icq.png"></a>
<a href="javascript://" rel="nofollow" onclick="prompt('Мой E-mail','1-1-1-1-1')"><img alt="Мой E-mail" title="E-mail" src="http://center-dm.ru/ucoz/vid_svaz/v1/ico_mail.png"></a>
</div>
<img alt="Это я" title="фото администратор" src="http://center-dm.ru/ucoz/vid_svaz/v1/foto_admin.jpg">
<h2>Внимание!</h2>
<p>Тут можно прописать убедительную просьбу, какие вопросы не следует задавать администратору или установить ссылку на страницу, где вы ответили на популярные вопросы ваших пользователей.</p>
</div>
</div>
А для того, чтобы вызвать окно обратной связи, устанавливаем следующий html код на страницу сайта:
Код
<a title="Обратная связь" href="javascript://" onclick="opensvaz();return false;">Обратная связь</a>
Шаг 3 - Установим CSS:
Отлично, теперь нам следует прописать css стили и любоваться готовым решением:
Код
/* Каркас обратной связи
------------------------------------------*/
.cell_feedback {
float:left;
color:#555;
width:660px;
padding: 20px ;
}
.feedback_left {
float:left;
text-align:left;
width:330px;
}
.feedback_right {
float:right;
width:310px;
margin-left: 20px;
}
/* Поля обратной связи
------------------------------------------*/
.feedback_left input,
.feedback_left textarea{
padding: 5px 10px!important;
font:11px Verdana,Arial,Helvetica, sans-serif!important;
}
.feedback_pole {
width:308px;
color:#666;
margin: 3px 0px 10px 0px;
background:#f9f9f9!important;
border: 1px solid #CAD1DB!important;
}
#fCode_svaz:focus,
.feedback_pole:focus {
box-shadow:inset 0px 0px 3px #ccc!important;
-webkit-box-shadow:inset 0px 0px 3px #ccc!important;
-moz-box-shadow:inset 0px 0px 3px #ccc!important;
}
.red {color:#d20000;}
/* Капча обратной связи
------------------------------------------*/
#svaz_cod {
margin: 0px 0px 3px 0px;
}
#fCode_svaz {
width:35px!important;
height:25px!important;
cursor:text!important;
display:inline!important;
background:#f9f9f9!important;
border: 1px solid #CAD1DB!important;
border-left:none!important;
}
#secuImgM {
float:left;
margin:0!important;
display:inline!important;
border: 1px solid #CAD1DB!important;
}
/* Кнопка отправить обратной связи
------------------------------------------*/
.kn_svaz {
float:right;
cursor:pointer;
height:37px!important;
border:1px solid #72b837!important;
color:#236114!important; text-shadow:1px 1px 1px #d7ffb6!important;
background: #9aeb56!important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9aeb56), color-stop(1, #7ecb3d))!important;
background: -moz-linear-gradient(top, #9aeb56 1%, #7ecb3d 100%)!important;
background: -o-linear-gradient(#9aeb56, #7ecb3d)!important;
}
.kn_svaz:active {box-shadow:inset 0px 0px 3px #5b9728!important; -webkit-box-shadow:inset 0px 0px 3px #5b9728!important; -moz-box-shadow:inset 0px 0px 3px #5b9728!important;}
.kn_svaz:hover {background:#aff278!important;}
/* Правая сторона обратной связи
------------------------------------------*/
.feedback_ico {
text-align:center;
}
.feedback_ico a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85);
-moz-opacity: 0.7;
opacity: 0.7;
filter: alpha(opacity=85);
}
.feedback_ico img {
margin: 5px 5px 20px 5px;
}
.feedback_right h2 {
text-align:left;
font:120%/1.5 Verdana,Arial,Helvetica, sans-serif;
font-weight: bold;
}
.feedback_right p {
font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;
text-align:justify;
}
------------------------------------------*/
.cell_feedback {
float:left;
color:#555;
width:660px;
padding: 20px ;
}
.feedback_left {
float:left;
text-align:left;
width:330px;
}
.feedback_right {
float:right;
width:310px;
margin-left: 20px;
}
/* Поля обратной связи
------------------------------------------*/
.feedback_left input,
.feedback_left textarea{
padding: 5px 10px!important;
font:11px Verdana,Arial,Helvetica, sans-serif!important;
}
.feedback_pole {
width:308px;
color:#666;
margin: 3px 0px 10px 0px;
background:#f9f9f9!important;
border: 1px solid #CAD1DB!important;
}
#fCode_svaz:focus,
.feedback_pole:focus {
box-shadow:inset 0px 0px 3px #ccc!important;
-webkit-box-shadow:inset 0px 0px 3px #ccc!important;
-moz-box-shadow:inset 0px 0px 3px #ccc!important;
}
.red {color:#d20000;}
/* Капча обратной связи
------------------------------------------*/
#svaz_cod {
margin: 0px 0px 3px 0px;
}
#fCode_svaz {
width:35px!important;
height:25px!important;
cursor:text!important;
display:inline!important;
background:#f9f9f9!important;
border: 1px solid #CAD1DB!important;
border-left:none!important;
}
#secuImgM {
float:left;
margin:0!important;
display:inline!important;
border: 1px solid #CAD1DB!important;
}
/* Кнопка отправить обратной связи
------------------------------------------*/
.kn_svaz {
float:right;
cursor:pointer;
height:37px!important;
border:1px solid #72b837!important;
color:#236114!important; text-shadow:1px 1px 1px #d7ffb6!important;
background: #9aeb56!important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9aeb56), color-stop(1, #7ecb3d))!important;
background: -moz-linear-gradient(top, #9aeb56 1%, #7ecb3d 100%)!important;
background: -o-linear-gradient(#9aeb56, #7ecb3d)!important;
}
.kn_svaz:active {box-shadow:inset 0px 0px 3px #5b9728!important; -webkit-box-shadow:inset 0px 0px 3px #5b9728!important; -moz-box-shadow:inset 0px 0px 3px #5b9728!important;}
.kn_svaz:hover {background:#aff278!important;}
/* Правая сторона обратной связи
------------------------------------------*/
.feedback_ico {
text-align:center;
}
.feedback_ico a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85);
-moz-opacity: 0.7;
opacity: 0.7;
filter: alpha(opacity=85);
}
.feedback_ico img {
margin: 5px 5px 20px 5px;
}
.feedback_right h2 {
text-align:left;
font:120%/1.5 Verdana,Arial,Helvetica, sans-serif;
font-weight: bold;
}
.feedback_right p {
font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;
text-align:justify;
}
На этом всё, спасибо за внимание!
Скачать Улучшаем внешний вид обратной связи в Ajax окне торрентом
Теги
Рекомендуем посмотреть
Комментариев (0)
Панель навигации
Мы рекомендуем
Обновления сериалов
WEBRip
Россия
HDTVRip
Россия
HDTVRip
Россия
SATRip
Россия
SATRip
Россия
Топ игры
Комментируют
Сталкер The Exception (2024)
где ссылка?
Need for Speed™ Most Wanted Remake (2024) PC
как скачать?
[PS4] Marvel's Guardians of the Galaxy
хорошая игра
Светлый шаблон MOVIEWEB для uCoz
Пойдёт.
Красивый шаблон BROWSER для uCoz
Ничё такой .