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

Просмотров: 32417 | Комментариев: 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 можно выставить время выполнения клика после открытия страницы с оной, в миллисекундах .


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

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

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

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

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

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

Показать еще