Давайте сделаем всплывающее окно с формой обратной связи. Вообще можно сделать всплывающее окно с любым компонентом системы управления, просто выбрал обратную связь как наиболее простой пример. Всплывающее окно будем делать без скриптов- на чистом CSS3. Вы сможете применить этот способ, например для авторизации или регистрации пользователя, быстрый просмотр товара и т.д.
Более или менее простой способ - это создать страницу с контактной информацией и вывести на нее компонент "Форма обратной связи" как на картинке:
Далее переходим в режим "Редактирование исходного кода" и обворачиваем вывод компонента в div контейнер как в примере (можете просто скопировать отсюда к себе на страницу):
ВАЖНО! - не забудьте поменять мой электроящик на свой.
Добавляем в style.css шаблона вот такие стили:
И переносим нашу форму в footer.php шаблона сайта, в самый низ до закрытия тега body:
Вообще, можно вставить этот кусок кода в любое место шаблона, но в футер шаблона будет и правильнее и понятнее. И последний маневр: в любом месте сайта вставляем ссылку <a href="#win1">Форма обратной связи</a>.
Пример работы: кликните Заказать разработку сайта
Можно принудительно "нажимать" на ссылку вызывающую окно через определенный промежуток времени. Для этого достаточно добавить в шаблон сайта вот такой скрипт:
Цифрой 5000 можно выставить время выполнения клика после открытия страницы с оной, в миллисекундах .
![]()
Гость сайта
|
Спасибо за статью, очень полезная)
|
![]()
Михаил Базаров
|
||
|
||
![]()
Гость
|
Подскажите пожалуйста как настроить отправку с форми к себе на почту?
|
![]()
Михаил Базаров
|
||
|
||
![]()
Виктор
|
Не работает ваш способ. Когда оборачиваем вывод компонента в div.
|
![]()
Виктор
|
||
|
||
![]()
Михаил Базаров
|
||||
|
||||
![]()
Гостья
|
Был перерыт весь интернет. Спасибо!
|
![]()
Михаил Базаров
|
||
|
||
![]()
Николай
|
Добрый день!
Большое спасибо за ваши уроки!!! Доступно и действительно профессионально!!! Подскажите пожалуйста, как в форму обратной связи добавить возможность отправки файла!!! (Как у Вас на сайте) |
![]()
Михаил Базаров
|
||
Лично у меня стоит какое-то бесплатное решение из маркетплейс- но сделать такую форму на основе инфоблока не проблема, чисто для развития. |
||
![]()
Константин
|
Здравствуй. Спасибо, сделал отзывы о сайте на основе этой статьи
|
![]()
Непомню
|
Всё здорово! Но, пока живет XP будут жить IE6 и IE7..........
|
![]()
Михаил Базаров
|
||
|
||
![]()
Алексей
|
Отличный урок!
Михаил, а как сделать что бы окно не закрывалось после нажатия на "отправить" а выводило сообщение о благодарности или об ошибки не правило заполненного поля? |
![]()
Михаил Базаров
|
||
|
||
![]()
Иван
|
Хороший урок! Скажите пожалуйста, как добавить-удалить количество полей в форме, а также менять их названия?
|
![]()
Илья
|
Добрый день Михаил. А как через вам мануал вывести несколько всплывающих окон на странице? например форму и карту яндекс, ну или картинку. По отдельности все прекрасно работает, а вот вместе никак. Id я менял но результат нулевой, работает только что то одно. Есть ли у вас решение?
|
![]()
Алексей
|
здравствуйте. Делал сайт на конструкторе, у меня там просто блоки в которые я могу вносить код, скопировал то что было у вас на сайте, вставил в блок, при нажатии на ссылку появляется окно, а в нем такая вот инфо
![]() |
![]()
Станислав
|
У вас какая то форма красивая. У меня убогая получается
![]() |
![]()
Михаил Базаров
|
||
|
||
![]()
Анна
|
Подскажите как вывести так же во всплывающем окне картинки одной новости с перелистыванием, вывод во всплывающем окне сделала, только каждая открывается отдельно, их нельзя перелистнуть.
|
![]()
Михаил Базаров
|
||
|
||
![]()
Екатерина
|
||
А статья хорошая, спасибо за работу) |
||
![]()
Guest
|
||||
|
||||
![]()
Guest
|
Косяк есть... Допустим несколько форм на страницу добавили с разным id, отправляем сообщение через одну, а на всех горит "Спасибо, сообщение отправлено и тд" и не исчезает
|
![]()
Павел
|
Подскажите, а как сделать, чтобы не ссылку нажимать на сайте, а при заходе на главную страницу высвечивалось сразу всплывающее окошко? А то открывается только по команде
|
![]()
Михаил Базаров
|
||||
![]()
|
||||
![]()
Михаил Базаров
|
||
Имею ввиду не только id самого окна, но и форм Если у вас редакция битрикс не имеет модуля Веб-формы (Старт/Стандарт) можно воспользоваться вот этой методой |
||
![]()
Ольга
|
Спасибо большое! Все работает!
Кроме одного: после нажатия кнопки Отправить мы попадаем на несуществующую страницу с таким адресом: http://имя_сайта/result_list.php?WEB_FORM_ID=3&RESULT_ID=22&formresult=addok При этом выпадающее окно закрывается. Если его снова открыть, там сообщение об успешной отправке форма. Что нужно сделать, чтобы пользователя не перебрасывало на эту несуществующую страницу, а он оставался на этой же странице, и сообщение об успешной отправке появлялось в этом же popup-окне? |
На нем, уже много видеоуроков по 1С-Битрикс. Как одиночные видео так и серии видеоуроков Перейти на канал
Совсем скоро выйдет видеокурс по разработке доски объявлений с мобильным приложением. Подписывайтесь и будьте в курсе: