Просмотров: 34955 | Комментариев: 50

Давайте сделаем всплывающее окно с формой обратной связи. Вообще можно сделать всплывающее окно с любым компонентом системы управления, просто выбрал обратную связь как наиболее простой пример. Всплывающее окно будем делать без скриптов- на чистом CSS3. Вы сможете применить этот способ, например для авторизации или регистрации пользователя, быстрый просмотр товара и т.д.

Создание формы обратной связи

Более или менее простой способ - это создать страницу с контактной информацией и вывести на нее компонент "Форма обратной связи" как на картинке:

Далее переходим в режим "Редактирование исходного кода" и обворачиваем вывод компонента в div контейнер как в примере (можете просто скопировать отсюда к себе на страницу):

<a href="#x" class="overlay" id="win1"></a>
    <div class="popup">
        <?$APPLICATION->IncludeComponent(
           "bitrix:main.feedback",
           "",
          Array(
                   "USE_CAPTCHA" => "Y",
                   "OK_TEXT" => "Спасибо, ваше сообщение принято.",
                   "EMAIL_TO" => "mihail@bazarow.ru",
                   "REQUIRED_FIELDS" => array("NAME", "EMAIL", "MESSAGE"),
                   "EVENT_MESSAGE_ID" => array()
                  ),
                  false
                 );?>
<a class="close" title="Закрыть" href="#close"></a>
</div>

ВАЖНО! - не забудьте поменять мой электроящик на свой.

Добавляем в style.css шаблона вот такие стили:

.overlay {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
position: fixed;
text-align: justify;
font: 14px Helvetica, Arial, Sans-Serif;
top: 40%;
visibility: hidden;
z-index: 10;

-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -13px;
font-weight: bold;
text-align: center;
text-decoration: none;
top: -15px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(64, 128, 128, 0.8);
}

И переносим нашу форму в footer.php шаблона сайта, в самый низ до закрытия тега body:

Вообще, можно вставить этот кусок кода в любое место шаблона, но в футер шаблона будет и правильнее и понятнее. И последний маневр: в любом месте сайта вставляем ссылку <a href="#win1">Форма обратной связи</a>.

Пример работы: кликните Заказать разработку сайта

Небольшая фенька.

Можно принудительно "нажимать" на ссылку вызывающую окно через определенный промежуток времени. Для этого достаточно добавить в шаблон сайта вот такой скрипт:

<script type="text/javascript">
       BX.ajax.onload_943827 = function() {
         setTimeout(function() {
               document.getElementById('win1').click();
         }, 5000);
         };
</script>

Цифрой 5000 можно выставить время выполнения клика после открытия страницы с оной, в миллисекундах .

Необходимо войти что бы оставить комментарий:
Страницы: 1 2 След.
Гость сайта
Спасибо за статью, очень полезная)
Михаил Базаров
Цитата
Гость сайта пишет:
Спасибо за статью, очень полезная)
Спасибо за спасибо. Пользуйтесь на здоровье
Гость
Подскажите пожалуйста как настроить отправку с форми к себе на почту?
Михаил Базаров
Цитата
Гость пишет:
Подскажите пожалуйста как настроить отправку с форми к себе на почту?
Просто в настройках формы укажите свой ящик
Виктор
Не работает ваш способ. Когда оборачиваем вывод компонента в div.
Виктор
Цитата
Виктор пишет:
Не работает ваш способ. Когда оборачиваем вывод компонента в div.
Извините всё даже очень круто и эффектно работает (как всегда моему антивирю что-то не то). Способ правда очень простой. Побольше таких толковых уроков.
Михаил Базаров
Цитата
Виктор пишет:
Цитата
Виктор пишет:
Не работает ваш способ. Когда оборачиваем вывод компонента в div.
Извините всё даже очень круто и эффектно работает (как всегда моему антивирю что-то не то). Способ правда очень простой. Побольше таких толковых уроков.
По идее антивирю там ничего не должно подозрительным казаться. Если только тот скриптик, что вызывает окно по прошествии времени. Попоробуйте без него- будет ли ругаться?
Гостья
Был перерыт весь интернет. Спасибо!
Михаил Базаров
Цитата
Гостья пишет:
Был перерыт весь интернет. Спасибо!
Пожалуйста. Только не забывайте менять мой на e-mail на свой.
Николай
Добрый день!

Большое спасибо за ваши уроки!!!
Доступно и действительно профессионально!!!

Подскажите пожалуйста, как в форму обратной связи добавить возможность отправки файла!!! (Как у Вас на сайте)
Михаил Базаров
Цитата
Николай пишет:
Добрый день!

Большое спасибо за ваши уроки!!!
Доступно и действительно профессионально!!!

Подскажите пожалуйста, как в форму обратной связи добавить возможность отправки файла!!! (Как у Вас на сайте)
Это лучше всего сделать через инфоблок со свойством Типа Файл, и просто вывести добавление инфоблока, в нужном месте, для не зарегистрированных пользователей.

Лично у меня стоит какое-то бесплатное решение из маркетплейс- но сделать такую форму на основе инфоблока не проблема, чисто для развития.
Константин
Здравствуй. Спасибо, сделал отзывы о сайте на основе этой статьи
Непомню
Всё здорово! Но, пока живет XP будут жить IE6 и IE7..........
Михаил Базаров
Цитата
Непомню пишет:
Всё здорово! Но, пока живет XP будут жить IE6 и IE7..........
В общем-то да и это может продолжаться очень долго. Верстка под эти браузеры отдельная задачка.
Алексей
Отличный урок!
Михаил, а как сделать что бы окно не закрывалось после нажатия на "отправить" а выводило сообщение о благодарности или об ошибки не правило заполненного поля?
Михаил Базаров
Цитата
Алексей пишет:
Отличный урок!
Михаил, а как сделать что бы окно не закрывалось после нажатия на "отправить" а выводило сообщение о благодарности или об ошибки не правило заполненного поля?
На этом примере будет не правильно подобное реализовывать (хотя конечно можно можно было бы, поверх этого окна открывать еще одно). Но, со скриптами все же правильнее. Чуть позже дополню.
Иван
Хороший урок! Скажите пожалуйста, как добавить-удалить количество полей в форме, а также менять их названия?
Илья
Добрый день Михаил. А как через вам мануал вывести несколько всплывающих окон на странице? например форму и карту яндекс, ну или картинку. По отдельности все прекрасно работает, а вот вместе никак. Id я менял но результат нулевой, работает только что то одно. Есть ли у вас решение?
Алексей
здравствуйте. Делал сайт на конструкторе, у меня там просто блоки в которые я могу вносить код, скопировал то что было у вас на сайте, вставил в блок, при нажатии на ссылку появляется окно, а в нем такая вот инфо
Станислав
У вас какая то форма красивая. У меня убогая получается :)
Михаил Базаров
Цитата
Алексей пишет:
здравствуйте. Делал сайт на конструкторе, у меня там просто блоки в которые я могу вносить код, скопировал то что было у вас на сайте, вставил в блок, при нажатии на ссылку появляется окно, а в нем такая вот инфо
Вставьте в режиме php кода а не в визуальном редакторе
Анна
Подскажите как вывести так же во всплывающем окне картинки одной новости с перелистыванием, вывод во всплывающем окне сделала, только каждая открывается отдельно, их нельзя перелистнуть.
Михаил Базаров
Цитата
Анна пишет:
Подскажите как вывести так же во всплывающем окне картинки одной новости с перелистыванием, вывод во всплывающем окне сделала, только каждая открывается отдельно, их нельзя перелистнуть.
Вам наверное лучше подключить fancybox или что-то аналогичное.
Екатерина
Цитата
Пример работы: кликните Заказать разработку сайта
не работает ссылка.
А статья хорошая, спасибо за работу)
Guest
Цитата
Екатерина пишет:
Цитата
Пример работы: кликните Заказать разработку сайта
не работает ссылка.
А статья хорошая, спасибо за работу)
Да, сайт изменился, видимо работало на старом. Но метода всеравно работает.
Guest
Косяк есть... Допустим несколько форм на страницу добавили с разным id, отправляем сообщение через одну, а на всех горит "Спасибо, сообщение отправлено и тд" и не исчезает
Павел
Подскажите, а как сделать, чтобы не ссылку нажимать на сайте, а при заходе на главную страницу высвечивалось сразу всплывающее окошко? А то открывается только по команде Форма обратной связи.
Михаил Базаров
Цитата
Павел пишет:
Подскажите, а как сделать, чтобы не ссылку нажимать на сайте, а при заходе на главную страницу высвечивалось сразу всплывающее окошко? А то открывается только по команде Форма обратной связи .
Написал же в конце  ;)  

Код
<script type="text/javascript"> 
       BX.ajax.onload_943827 = function() { 
         setTimeout(function() { 
               document.getElementById('win1').click(); 
         }, 5000); 
         }; 
</script>
 
Саму ссылку можно спрятать
Михаил Базаров
Цитата
Guest пишет:
Косяк есть... Допустим несколько форм на страницу добавили с разным id, отправляем сообщение через одну, а на всех горит "Спасибо, сообщение отправлено и тд" и не исчезает
Нужно у самих форм сделать разный id но с обратной связью это не пройдет, делайте веб формами
Имею ввиду не только id самого окна, но и форм

Если у вас редакция битрикс не имеет модуля Веб-формы (Старт/Стандарт) можно воспользоваться вот этой методой http://dev.1c-bitrix.ru/community/blogs/howto/982.php
Ольга
Спасибо большое! Все работает!
Кроме одного: после нажатия кнопки Отправить мы попадаем на несуществующую страницу с таким адресом: http://имя_сайта/result_list.php?WEB_FORM_ID=3&RESULT_ID=22&formresult=addok
При этом выпадающее окно закрывается. Если его снова открыть, там сообщение об успешной отправке форма.

Что нужно сделать, чтобы пользователя не перебрасывало на эту несуществующую страницу, а он оставался на этой же странице, и сообщение об успешной отправке появлялось в этом же popup-окне?
Страницы: 1 2 След.

Авторизация

На сайте работает вход через социальные сети. Просто, выберите наиболее удобную сеть и авторизация произойдет автоматически:
Проходя авторизацию, Вы безоговорочно принимаете условия политики конфеденциальности