vk
" uCoz - это не просто бесплатный хостинг и CMS, но и средство заработка! "

Сайт-помощник по uCoz [ Beta ]

Данный раздел находится в разработке!
Поэтому может не корректно отображатся и функционировать!

Вид обратной связи в Ajax окне

Описание:

Продолжим улучшать сайт в системе uCoz, я предлагаю всем желающим администраторам создать более удобную для восприятие пользователями, обратную связь.



Установка:

1. Устанавливаем скрипт в нижнюю часть сайта, перед закрывающим тегом </body> :

Код
<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>


2. Теперь заходим в Админ панель и активируем (если не активированные) Почтовые формы, после чего заходим в них и выбираем управление дизайном модуля, удаляем старый 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="/img/ico_vkontakte.png"></a>  
  <a href="#" target="_blank"><img alt="Следуй за мной в Twitter" title="twitter" src="/img/ico_twitter.png"></a>  
  <a href="#" target="_blank"><img alt="Следуй за мной в Facebook" title="facebook" src="/img/ico_facebook.png"></a>  
   
  <a href="javascript://" rel="nofollow" onclick="prompt('Мой Skype','1-1-1-1-1')"><img alt="Мой Skype" title="Skype" src="/img/ico_skype.png"></a>  
  <a href="javascript://" rel="nofollow" onclick="prompt('Мой ICQ номер','1-1-1-1-1')"> <img alt="Мой icq" title="Icq" src="/img/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="/img/ico_mail.png"></a>  
  </div>  
   
  <img alt="Это я" title="фото администратор" src="ВАША КАРТИНКА( АВАТАР)">  
   
  <h2>Внимание!</h2>  
  <p>Тут можно прописать убедительную просьбу, какие вопросы не следует задавать администратору или установить ссылку на страницу, где вы ответили на популярные вопросы ваших пользователей.</p>  
   
  </div>  
  </div>


3. Устанавливаем следующий html код вызова окна обратной связи, в нужное Вам место на сайте :

Код
<a title="Обратная связь" href="javascript://" onclick="opensvaz();return false;">Обратная связь</a>


4. Прописываем 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;  
}
/* Конец каркаса обратной связи  
  ------------------------------------------*/


5. Осталось скачать архив с картинками и залить их на свой сайт через файловый менеджер в папку img
Автор публикации: WooFi   Повысить репутацию WooFi за эот материал
Источник: Смотреть | Дата публикации: 31.01.2013 | Просомтров: 11055 | Загрузок: 519
$ Помощь по установке и настройке $

Платная помощь по uCoz

Комментарии ↓

avatar
1 Steelie_Ukraine 21:21, 16.02.2014
Здравствуйте.

Вопрос по пункту 4 "Прописываем CSS стили в таблицу стилей":
Куда именно нужно вставлять этот код?
Вставлял его просто в редакторе шаблонов в "Таблица стилей (CSS)" в самый конец. Это не дало результата. Вся форма обратной связи выровнена по центру и совсем не такая как на Вашем скриншоте.

Спасибо за ответ!
avatar
2 Prochtenniy 21:31, 16.02.2014
Здравствуйте.  Материал был и есть рабочий, сейчас специально проверил. Всё получилось. Поэтому, вы что-то делаете не так. По 4 пункту, да в "Таблица стилей (CSS)".
avatar
3 Steelie_Ukraine 21:47, 16.02.2014
Все работает, вот только отображается не совсем корректно. 
Буду очень благодарен, если поможете найти мою ошибку.
Вот сайт http://steelie.at.ua, ссылка на всплывающее окно временно в самом низу, под бфутером.

Как видно, весь текст и все элементы центрированы. Вот я и подумал, что проблема именно в CSS стилях.

Вставлял указанный Вами CSS стили просто в самый низ Таблица стилей (CSS), под всем существующим кодом. Это верно?
avatar
4 Prochtenniy 21:58, 16.02.2014
Да, вниз СSS. У вас просто ошибка в коде сайта или СSS. Что-то просто центрирует форму связи. Нужно искать ошибку. Пробуйте поставить код вызывающий форму выше. Пробуйте убирать части кода/CSS и таким образом вычислять где находится ошибка, влияющая на форму связи.
avatar
6 jeck 11:48, 17.04.2014
Здравствуйте, у вас на сайте steelie.at.ua форма сделана без емаила. Не поделитесь секретом как вы обошли эту функцию?
avatar
5 jeck 11:28, 17.04.2014
Форма отличная! Респект автору! А как убрать обязательное поле для емаила? Ну мне например надо чтобы было просто 2 поля ИМЯ и Телефон. Может кто подскажет? Всю голову сломал...
Что ни делал - выскакивает "Неправильно заполнено поле емаил"
avatar
7 Prochtenniy 20:04, 18.04.2014
Настраивайте почтовые формы, в управлении почтовыми формами.
avatar
8 Админ 12:33, 07.07.2014
Здравствуйте. Давно искал подробную форму. Установил себе на сайт. Работает во всех браузерах, кроме IE. Есть какой-нибудь способ лечения для этого, так называемого, браузера?
avatar
0
9 Prochtenniy 12:36, 07.07.2014
Ну скорее всего есть. Нужно смотреть что не так работает в ie и вносить изменения в код, специально для ie нужной версии.
avatar
10 Админ 12:46, 07.07.2014
При нажатии на ссылку реакция "0". Окно не открывается. Вот сайт: http://dunyasha.spb.ru/. У меня IE 11, но, уверен, что с предыдущими версиями результат не лучше.
avatar
0
11 Prochtenniy 12:50, 07.07.2014
А где не рабочая ссылка которая открывает форму?
avatar
12 Админ 12:56, 07.07.2014
Внизу серая кнопка "Заказать домашний персонал".
avatar
13 Админ 13:07, 07.07.2014
Точно, она. Тут дело-то как раз в том, что её именно и нужно было кнопкой сделать. Да, сейчас тоже в мозиле проверил. Тоже не работает... Есть варианты вылечить, но именно в кнопке?
avatar
0
14 Prochtenniy 13:11, 07.07.2014
Ну пробовать к button подключать... Примерно так.

Код
<button type="button"   onclick="opensvaz();return false;"  >Заказатьдомашний персонал </button>

Или с помощью стилей делать кнопку для ссылки. Задать ей такие стили как для кнопок button
avatar
15 Админ 13:17, 07.07.2014
Почему-то не догадался((( Спасибо, помогло!!!
avatar
16 Бонвита 15:46, 12.09.2014
Здравствуйте, скажите, пожалуйста, как я могу уменьшить этот pop-up по ширине, вообщем что бы осталась только почтовая форма. Спасибо.
avatar
0
17 Prochtenniy 15:57, 12.09.2014
Здравствуйте. Попробуйте поменять цифры в первом скрипте (пункт 1) 700 или 500.
Или в стилях CSS (пункт 4),  width:660px. Ну а вообще, тогда нужно и код почистить, оставить только форму связи в пункте 2
avatar
18 Админ 12:23, 15.09.2014
Возможно и глупый вопрос, но как быть, если нужно несколько разных форм на одной странице?
avatar
0
19 Prochtenniy 14:46, 15.09.2014
Обычно нужно менять id.

Цитата
<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>

вот тут feedback везде меняйте на feedback2 и т.д. Также просмотрите и остальной код, чтобы было везде одинаково, т.е feedback2.
avatar
20 Baltes 22:42, 05.11.2015
А не подскажите, как сделать две формы на одной странице?
Я имею в виду, что делать с пунктом 3.
avatar
0
21 Prochtenniy 23:08, 05.11.2015
Обычно меняют id и т.п. Попробуйте изменить значение opensvaz или svaz в скрипте пункт 1 и в ссылке, пункт 3.
avatar
22 Baltes 23:19, 05.11.2015
Простите, но я не до конца ещё разбираюсь в этом... Не могли бы Вы написать, как это будет выглядеть?
avatar
0
23 Prochtenniy 23:23, 05.11.2015
Код
<div style="display:none;" id="feedback">$MFORM_1$</div>   
  <script>   
  function opensv(){   
   new _uWnd('sv','Обратная связь',700,500,{align:'center',shadow:1,header:1,resize:0,autosize:1},$('#feedback').html());   
   };   
  </script>

и

Код
<a title="Обратная связь" href="javascript://" onclick="opensv();return false;">Обратная связь</a>

здесь заменено opensvaz и svaz на sv.
avatar
24 Baltes 23:25, 05.11.2015
Огромное спасибо за помощь! Всё работает!
avatar
25 metallsnab77 04:03, 10.01.2016
Ничего не работает..
Скопировал коды на сайт http://metallsnab77.narod.ru в соответствии с вашими инструкциями.
Код в файл style.css тоже скопировал (в самый низ).
Непонятно, почему не работает.
avatar
0
26 Prochtenniy 11:31, 10.01.2016
У вас в коде главной страницы я не вижу системных строк подключения jquery и т.п. Они нужны для работы подобных скриптов. Попробуйте между <head> </head> прописать строку

Код
<script type="text/javascript" src="http://s205.ucoz.net/src/jquery-1.7.2.js"></script>
avatar
28 metallsnab77 13:50, 10.01.2016
Попробую скопировать и вставить ещё системные скрипты (в хедер), с каких-нибудь сайтов на юкозе.
У меня изначально таких скриптов видимо не было, поскольку я на юкоз попал с "народа". Да и код сайта сто раз откорректировал.
avatar
27 metallsnab77 13:47, 10.01.2016
Благодарю за скрипт, только что добавил. Но ничего не изменилось.
avatar
0
29 Prochtenniy 14:10, 10.01.2016
Я перепроверил у себя скрипт - работает. Поэтому, это у вас на сайте его что-то блочит. При условии того, что вы поставили все верно. Чтобы решить проблему, нужно более детально изучать ее. Пробовать скрипт ставить на чистой странице, без элементов и стилей сайта.
avatar
30 metallsnab77 14:13, 10.01.2016
Вы правы, попробую.

rm">
avatar