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

18161  |  43

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

© 2011—2016 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.
Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

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