Всплывающее окно с формой обратной связи Битрикс

Давайте сделаем всплывающее окно с формой обратной связи. Вообще можно сделать всплывающее окно с любым компонентом системы управления, просто выбрал обратную связь как наиболее простой пример. Всплывающее окно будем делать без скриптов- на чистом 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 можно выставить время выполнения клика после открытия страницы с оной, в миллисекундах .

Все заметки
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти
Напомнить пароль

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

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

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

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

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

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

Думаю все знают что такое табы или вкладки. Расскажу как на ...

Подключение SSL на Битрикс виртуальная машина

Для некоторых сервисов, типа Яндекс Касса, требуется наличие...

Дополнительные картинки в списке элементов каталога битрикс

Очень редко, но бывают ситуации, когда надо вывести дополнительные...

Умный фильтр на главной странице Битрикс

Достаточно редкая но востребованная задачка- это вывести компонент...

Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс

Достаточно часто, при проверке параметров системы, в Битрикс,...

Ускорение сайта Битрикс на ubuntu server, Memcached.

До сегодняшнего дня арендовал виртуальный сервер в Германии ...

Свежие комментарии в блоге
Самодельная форма добавления элемента на API Битрикс

Здравствуйте! А вот вопрос как пользователю в месте с элементом создать раздел в котором он будет на...

25.07.2017 / Александр Иванов
Очистка корзины битрикс одним нажатием

[url=/blog-note/1412/]Очистка корзины битрикс одним нажатием[/url] В стандартной корзине Битрикс...

24.07.2017 / Михаил Базаров
Материалы по теме в новостях Битрикс, с картинкой, названием и текстом анонса.

[QUOTE][USER=1631]Интересующийся многим[/USER] пишет: Михаил, добрый день! что-то ссылка [url]http...

22.07.2017 / Михаил Базаров
Всплывающее окно с формой обратной связи Битрикс

Подскажите почему может не работать скрипт  BX.ajax.onload_943827 = function() {           setTime...

19.07.2017 / Рима Уколова
Вывести товары из того же раздела в карточке товара

Михаил, скажите пожалуйста, этот метод еще актуален? Никак не могу передать ни id ни символьный код,...

19.07.2017 / Алексей Сель

© 2011—2017 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.

Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

Информация размещенная на сайте, не является публичной офертой.
Политика конфеденциальности

x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения:

Нажимая на кнопку "Отправить", Вы соглашаетесь на обработку Ваших персональных данных согласно политике конфеденциальности. Ознакомиться с которой, можно в нижнем правом углу сайта