» » » » Обратная связь в Ajax окне

Улучшаем внешний вид обратной связи в Ajax окне.

Для начало нам следует установить небольшой js и html код, в самый низ страницы перед закрывающим тегом :
Код
<div style="display:none;" id="feedback">Обратная связь</div>  
<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>


А для того, чтобы вызвать окно обратной связи, устанавливаем следующий html код на страницу сайта:
Код
<a title="Обратная связь" href="javascript://" onclick="opensvaz();return false;">Обратная связь</a>


Отлично, теперь нам следует прописать 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;  
}


На этом всё, спасибо за внимание!

  Просмотров: 9259 | Категория: Ucoz-ajax / Другие скрипты для ucoz | Добавил: NA

Другие новости


Поделиться ссылкой


Ссылка:
BB-code:
HTML:
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Fatal error: Uncaught exception 'RedisException' with message 'MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persist on disk. Commands that may modify the data set are disabled, because this instance is configured to report errors during writes if RDB snapshotting fails (stop-writes-on-bgsave-error option). Please check the Redis logs for details about the RDB error.' in [no active file]:0 Stack trace: #0 {main} thrown in [no active file] on line 0