[vc_message color=»alert-success»]Если вам нужна форма обратной связи на чистом HTML без WordPress, тогда читайте эту статью:
Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке[/vc_message]
На многих сайтах устанавливаются формы обратной связи, чтобы пользователи могли оставить сообщение администратору не покидая сайт. Самым популярным, качественным и удобным в настройке и использовании является плагин Contact Form 7 — с его помощью можно создать любые контактные формы и не только. Поскольку плагин имеет большое количество различных форм и полей, то его можно использовать для многих задач. Я, например, использовал его для создания анкеты работодателя и соискателя на рекрутинговом сайте, для создания формы заказа товара на сайте по продаже только одной линии продукта, использовал этот плагин для создания сложной и объемной расчетной формы для строительного сайта, для самых различных форм обратной связи и прочих форм. Но речь не об этом, а о том, как же сделать, чтобы форма связи появлялась во всплывающем окне, чтобы можно было сделать кнопку вызова контактной формы на каждой странице, а не только на странице «Контакты»?
Павел Дуров кидает деньги из окна офиса «Вконтакте»
Все на самом деле не сложно, но понадобится еще один плагин с эффектом FancyBox, мне лично нравятся эти два плагина: Easy FancyBox или FancyBox for WordPress, есть различные похожие плагины, но любой из этих подходит отлично и еще позволяет открывать в popup изображения.
В общем, установлены два плагина: Contact Form 7 и Easy FancyBox, создана контактная форма, осталось добавить код в шаблон.
[vc_row][vc_column][vc_message color=»alert-warning» message_box_color=»alert-warning» icon_type=»pixelicons» icon_pixelicons=»vc_pixel_icon vc_pixel_icon-alert»]Код вставляется в шаблон сайта в файлы .php![/vc_message][/vc_column][/vc_row]
Код с всплывающей контактной формой, установленный в коде файла шаблона:
[vc_row][vc_column][vc_message color=»alert-warning» message_box_color=»alert-warning» icon_type=»pixelicons» icon_pixelicons=»vc_pixel_icon vc_pixel_icon-alert»]Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:[/vc_message][/vc_column][/vc_row]
Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке сайта:
У меня в примере код для формы «Заказать обратный звонок» — в форме всего два поля — имя и телефон, для того, чтобы администратор сайта перезвонил клиенту.
Рассмотрим данный код.
Это код самой кнопки вызова окна с формой, для этой кнопки можно задавать любые стили, и вставлять ее в любом месте шаблона:
Это код самого всплывающего окна, его можно оставить под кнопкой вызова окна, а можно убрать в футер для того, чтобы код контента был чище:
В этом коде сама форма вызывается такой функцией:
Где прописано — вывести шорткод для Контактной формы, шорткод указан в самой контактной форме при ее создании:
Секретная Настройка УВЕДОМЛЕНИЙ на Самсунге/Всплывающие оповещения Samsung/Не приходят уведомления
[contact-form-7 title=»Заказать звонок»]
[vc_row][vc_column][vc_message color=»alert-warning» message_box_color=»alert-warning» icon_type=»pixelicons» icon_pixelicons=»vc_pixel_icon vc_pixel_icon-alert»]Чтобы вызывать на одной странице несколько форм, нужно использовать различные id для вызова формы.[/vc_message][/vc_column][/vc_row]
Пример вызова двух форм обратной связи в pop-up окне:
В данном случае для вызова нескольких форм обратите внимание на эти части кода:
Вместо вывода шорткода формы обратной связи можно выводить любое содержимое, например блоки с текстом или картинками, или же форму для подписки Feedburner, например так выводится форма для подписки через Feedburner на одном из сайтов
Можно использовать этот код для своей формы подписки изменив только адрес ленты http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed на свой.
[vc_row][vc_column][vc_message color=»alert-warning» message_box_color=»alert-warning» icon_type=»pixelicons» icon_pixelicons=»vc_pixel_icon vc_pixel_icon-alert»]Важный момент! Для того, чтобы форма имела красивый вид, для нее нужно задать свои стили отображения. Лучше всего обернуть свою форму в div еще на этапе создания формы в CF7.[/vc_message][/vc_column][/vc_row]
Как сделать, чтобы окно с формой (fancybox) обратной связи закрывалось после успешной отправки
Добавляем такой код, если используется плагин с fancybox например Easy Fancybox:
on_sent_ok: $.fancybox.close();
в блок Дополнительные настройки вашей формы.
Скриншот:
Больше вариантов, какие действия могут быть после успешной отправки сообщения через CF7 можно найти в этой статье Действия после успешной отправки сообщения с формы CF7.
Примеры контактных форм в всплывающем окне, которые я делал для своих заказчиков:
WordPress 3.9 «Смит» названа в честь джазового органиста Джимми Смита. В новой версии улучшена работа…
Для того, чтобы вывести заголовок записи в WordPress, необходимо в нужном месте добавить код: На…
Обычно для мультиязычных сайтов я использую плагин Polylang, про него еще напишу позже, но в…
Я ничего против внешних ссылок на авторов плагинов, шаблонов и каких-либо программерских решений не имею,…
Источник: denis-creative.com
Где взять всплывающе окно авторизации vk?
Сделал авторизацию через ВК на сайте, для оставления комментариев через django-allauth
у меня есть кнопка с надписью «vk» и url-ом href=»»
проблема в том, что при авторизации он редиректит на oauth.vk.com для авторизации, а после авторизации на accounts/profile/, ну или куда там пропишу
Как сделать чтобы вылезало всплывающее окно и потом в окне, где моя форма с кнопкой, получить иконку авторизованного пользователя без перезагрузки? может кто делал уже?
зы: как вот это https://vk.com/dev/openapi?f=3.1.%20VK.Auth.login использовать в моем случае — что то не понял.
Мне нужно как на картинке (это авторизация сайтов на nethouse)
- Вопрос задан более трёх лет назад
- 592 просмотра
1 комментарий
Простой 1 комментарий
Источник: qna.habr.com
Всплывающее окно при входе на сайт | HTML CSS
Я полностью согласна, что модальные окна с затемнением надоели и сильно нервируют. Даже есть такое требование к веб-ресурсам в AdSense «Сайты. не должны. содержать всплывающие окна, затрудняющие навигацию». Но что такое «всплывающие окна, затрудняющие навигацию» мне так и не растолковали (ссылка на ветку официального форума). Если вы обладаете поддержкой сотрудников AdSense по электронной почте, то задайте, пожалуйста, им сей вопрос.
Я же по прежнему считаю, что pop-up — это всего лишь инструмент, который можно использовать и во благо. Например, для информирования посетителей о переезде фирмы в этот день.
- объявление показывается постоянным посетителям, а не тем, кто впервые зашёл на веб-проект,
- объявление показывается одному человеку только один раз вне зависимости от страницы, на которую он попал (JavaScript),
- минимум анимации, послание появляется спустя какое-то время нахождения человека на странице (CSS),
- простое закрытие: активное «затемнённое» поле, заметный крестик, действие кнопки Esc.
Рассмотрим создание именно такого простого, но симпатичного и «резинового», всплывающего окна на HTML5.
обновление блога
Картинки в Blogger привязаны к фото-альбомам в Google+. Чтобы изображения увидели все посетители блога, нужно сделать альбомы общедоступными. Посмотреть подробности.
67 комментариев:
Анонимный Спасибо, очень помогло! Chervique Большое спасибо за полезный код. Украл его у вас для своего сайта )
Касательно вашего вопроса о «всплывающих окнах, затрудняющих навигацию».
Гугл здесь руководствуется тем же правилом, что и для всего остального: «содержимое для робота должно быть идентичным содержимому для людей». Также, алгоритм, по которому он (гугл) реагирует на всплокна, похож на алгоритм блокировки всплокон браузерами (при включении соответствующей блокировки).
Определения «вредности» самого же контента этих окон у поисковой системы нет. Если код чистый, писать можете что угодно (почти).
В качестве примера: у меня на сайте http://hitechdevice.net/ на странице любого товара реализованы всплывающие окна на Jquery (картинки), Ajax (добавление в корзину) и javascript (ваше всплокно). Разная реализация и контент, но пока они «белые», гуглу на них плевать.
Но тут есть и нюансы. Не нужно думать, что гугл дурак и размещать на страницу с баннерами «чистое» всплокно с призывом «нажмите на рекламу, для мира во всём мире». Хоть такое окно и не повлияет на позиции сайта, но в Adsense это вычисляет на раз и просто заблокирует ваши рекламные выплаты. NMitra С помощью алгоритмов мой вариант не вычисляется, по крайне мере в Гугле сейчас не заложены такие данные.
Например, на Авито я видела плавающий блок с рекламой AdSense. Можно легко настучать, но автоматом это не вычисляется.
Мой вопрос относится именно к AdSense (не к поиску), именно к чей-то жалобе. Chervique Может автоматом и не вычисляется, но, как я писал выше, Adsense всё-равно заморозит выплаты с аккаунта, на котором будут применяться такие способы увеличения кликов по рекламе. Настучит кто-то или они сами находят нарушителей — это уже второй вопрос. Поверьте, проверять не стОит.
Вообще, любое стимулирование посетителей к нажатию на рекламу, будь то всплывающие окна или что угодно другое — это грех. NMitra Про «стимулирование посетителей» согласна, но вот «сайты не должны содержать всплывающие окна, затрудняющие навигацию» мне не совсем понятно. Должно быть точное определение понятия, а не расплывчатое. Вот здесь мои предположения https://productforums.google.com/forum/?hl=ru#!msg/adsense-ru/yyAeqm2_QOY/pRB0GzBGGikJ Есть ли что дополнить? «Белые» — это также всего лишь выдумки сеошников, должно быть более чёткое указание. Chervique Я прочитал ваши вопросы по этой ссылке еще до того, как написал первый пост, и, старался в сжатой форме ответить сразу на все.
Коротко по пунктам:
1. «Это любые окна, которые появляются и при щелчке по кнопке». или автоматически.
2. Нет. Да. Нет.
3. Нет.
4. Оба примера приемлемы.
Кстати вот тут точное определение «затрудняющие навигацию» https://support.google.com/adsense/answer/1346295?hl=rurd=1#Placing_Google_ads_on_a_website_with_pop-ups
И слово «белые» или «чистые» я употреблял только в контексте отношения гугла к коду. СЕО тут не при чем.
Если у вас всё еще будут вопросы — задавайте. А то я могу просто пропустить что-то из-за кажущейся очевидности темы. NMitra Интересная ссылка, я как-то мимо неё прошагала. Вот эта строчка особенно заинтересовала «где имеется более трех всплывающих окон»
Если как вы говорите, что всплывающие окна — это окна, появляющиеся и при щелчке по кнопке. То как быть с Lightbox? То есть, когда нажимаешь на картинку, а она во весь экран разрастается? Код строится по тем же принципам. Chervique Сколько бы картинок у вас не было на странице, Lightbox будет считаться за одно всплывающее окно, т.к. выполняется один и тот же скрипт.
А вот если страница открывает новые окна или вкладки браузера, то это уже другое дело. Тут надо быть аккуратным. Не зря большинство таких окон и блокируются браузерами. Именно потому, что всякие onmousover=»window.open» и т.п. зачастую используется для накрутки.
Ну и самое главное: какие бы у вас не присутствовали всплывающие окна, держите их подальше от adsense блоков. Если вы не будете пытаться накручивать показы/клики, то сможете спокойно использовать сколько угодно и каких угодно окон. Анонимный Я че то не пойму и куда этот скрпит вставлять к ксс или на страницу сайта? NMitra Всё, что между тегами — в стили CSS, только их (открывающиеся и закрывающиеся теги style) не нужно.
Тег с содержимым лучше запихнуть в конец страницы, так страница будет быстрее грузиться.
script В страницу сайта самый низ
style В CSS тоже все в самый низ поставил и убрал теги style с начала и в конце
if(localStorage.getItem(‘popup1’)) document.getElementById(‘popup’).style.display=’none’;
> Анонимный Миша
Большое спасибо за пример, вполне применимое решение.
Главный вопрос, как всплывающие окно применить только для одного браузера, интересует internet exploer
Что именно не работает в Хроме? Сейчас что Хром, что Опера, без разницы, они на одном движке сидят. Анонимный Тестировал скрипт в Опере и не всплывает Popur окошко NMitra Добавьте префиксы -webkit- и -o- См. http://shpargalkablog.ru/2012/03/animaciya-css.html
Некоторые используют скрипты, которые автоматом ставят префиксы. К тому же их (префиксы) скоро отменят. Поэтому я ими пренебрегаю. Но вам не стоит делать как я, особенно если рассчитываете на поддержку старых браузеров. Анна Мухина Не работает.
Есть ли у вас демо-страница с данным примером, чтобы сравнить вашу и мою версию кода? NMitra Покажите свою страницу с кодом. Илья Подскажите, как сделать, чтобы закрывалось по нажатию на фон и «закрыть»? Сейчас закрывается только по esc.
Заранее спасибо Илья Всё нормально заработало, после того, как разместил скрипт самым последним) NMitra Верно, или после html или в head, но это со всеми скриптами так, искл. функции который активизирует window. Анонимный Я поставил все как написано, стили в стили, скрипт в скрипт, штмл в главную страницу, но попап не работает почему то.
Можете посмотреть? сайт belvideo.ru NMitra Здравствуйте, скрипт должен идти после div, можете добавить его перед закрывающимся body Анонимный Добрый день! взял этот попап для виджета вконтакте. Встроил его между . Все нормально работает, но когда подключаю в конце body ваше окно, то получается что в блоке с виджетом основным появляется еще один, а окно соответственно пустое с текстом и кнопкой закрыть. Как исправить. Может нельзя 2 виджета добавлять на сайт?
если надо могу тестовый исходник скинуть куда-нибудь.
Анонимный вопрос решен по виджету вконтакте. Заменить в ID дива и в скрипте на заначение vk_groups1
может пригодится кому)) кстати хорошо бы было бы куки прикрутить. NMitra Вот такие комментарии мне нравятся! С ответом.
localStorage — это и есть куки, только на стороне пользователя. Анонимный Да но если закрыть страницу и открыть заново, опять появляется Ваш попап, с 24 часовыми куками было бы удобнее. Вы не нашли решения? Я просмотрел комментарии, ну в принципе не критично и так круто.
кстати я опять напутал))) у меня браузер portable и очищает куки каждый раз как закрывается. NMitra Поддержка браузерами http://caniuse.com/#feat=namevalue-storage
Я в статье использовала sessionStorage, так как это пример и удобней чтобы он был продемонстрирован каждый раз при заходе на страницу. Анонимный Интересный скрипт. Помогите модифицировать, как сделать чтобы он показывался 1 раз в сутки, и как сделать чтобы он срабатывал постоянно (для тестирования) NMitra «как сделать чтобы он срабатывал постоянно» — убрать
«он показывался 1 раз в сутки» — вместе с display запоминать дату Дмитрий Спасибо получилось! Еще вопросик как его позиционировать на страничке, например в правом верхнем углу?
Если меняю тут ничего не выходит если еще где-то то перекашивает, видать знаний моих в css маловато
#popup display: table;
position: fixed; top: 0; left: 0;
NMitra Не успеваю оперативно отвечать на вопросы. См.
http://shpargalkablog.ru/2012/04/vertical-align.html#table-cell
http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-auto :
#popup figure vertical-align: top;
>
#popup div, #popup figcaption, #popup figure::before margin: 0 0 0 auto;
> Анонимный Здравствуйте, Наталья!
Подскажите, пожалуйста, как в следующих ваших разработках изменить условие «открывается 1 РАЗ» :
а) Отменить совсем.
б) Установить число открываний при загрузке. NMitra Здравствуйте, замените
function okno(e) if (e.target.nodeName != ‘DIV’ e.target.nodeName != ‘FIGCAPTION’ || e.keyCode==27) document.getElementById(‘popup’).style.display=’none’;
if(localStorage.getItem(‘popup1’)) localStorage.setItem(‘popup1’, parseFloat(localStorage.getItem(‘popup1’)) + 1);
> else localStorage.setItem(‘popup1’, ‘1’);
>
>
>
if(parseFloat(localStorage.getItem(‘popup1’)) > 3) < // вместо 3 своё значение
document.getElementById(‘popup’).style.display=’none’;
> V.Pshenichnikov Спасибо! Точно, оперативно.
Unknown спасибо за код
только вопрос
как в кнопку «закрыть» вставить ссылку NMitra Не скажу 🙂 Не есть хорошо это. JACEK А как вставить фото? NMitra Куда вставить?
Анонимный
У меня на сайте модальное окно воспроизводится всего один раз за всё время… Мне нужно, что бы оно воспроизводилось пользователю при каждом новом заходе на сайт.
К примеру: Пользователь посетил мой сайт и ему всплыло это модальное окно (это для социального виджета «лайкнуть страницу в Фейсбуке»), после чего окно не появляется пока пользователь на сайте. Но при повторном возращении на сайт, чтобы всё повторялось опять, пользователь перешёл на сайт – окно появилось… Собственно в точности как у вас сейчас на сайте, я так понимаю, так как у вас окно появляется как только я повторно возвращаюсь к вам на сайт. NMitra Здравствуйте, замените на sessionStorage http://shpargalkablog.ru/2013/06/localStorage.html
if(sessionStorage.getItem(‘popup1’)) document.getElementById(‘popup’).style.display=’none’;
> Арт Здравствуйте, подскажите пожалуйста, а как можно сделать после открытия окна когда человек защёл на сайт, что бы можно было его закрыть, и окно превращалось в ссылку кнопку, при нажатию на которую потом снова бы открывалось окно?) спасибо! NMitra Здравствуйте, так попробуйте ( https://jsfiddle.net/NMitra/panh036s/1/ ):
window.onkeyup = okno;
document.getElementById(‘popup’).onclick = okno;
function okno(e) if (e.target.nodeName != ‘DIV’ e.target.nodeName != ‘FIGCAPTION’ || e.keyCode==27) document.getElementById(‘popup’).setAttribute(‘style’, ‘visibility: hidden !important;’);
localStorage.setItem(‘popup1’, ‘none’);
if (document.getElementById(‘popupOn’).innerHTML == ») oknoOn();
>
>
>
function oknoOn() var theButton = document.createElement(‘button’);
theButton.innerHTML = ‘Ау, я тут’;
theButton.setAttribute(‘onclick’, ‘document.getElementById(«popup»).setAttribute(«style», «visibility: visible; animation: none;»)’);
document.getElementById(‘popupOn’).appendChild(theButton);
>
if(localStorage.getItem(‘popup1’)) document.getElementById(‘popup’).setAttribute(‘style’, ‘visibility: hidden !important;’);
oknoOn();
> Галина В IE окно появляется постоянно NMitra Вы имеете ввиду IE меньше 8 версии?
http://caniuse.com/#feat=namevalue-storage Галина Нет в 11 Галина И как, например, сделать в popup-окне checkbox, чтобы если его поставить,то это окно не выдавалось больше никогда. NMitra В примере на этой странице? Для удобства здесь я сделала sessionStorage (то есть один раз в рамках одной вкладки: можно походить по страницам сайта, вернуться обратно и сообщение не появится). NMitra Подробнее про пример, не проще ли класс задавать? Галина Как при загрузке страницы выдать в отдельном popup-окне какой-то текст с галочкой, чтобы если ее поставить, это окно не выдавалось больше никогда.
Что-то типа:
Больше не показывать окно
. NMitra Пример: https://jsfiddle.net/NMitra/4nmg6r22/
window.onkeyup = okno; // нажатие Esc, см. условие «e.keyCode==27»
document.getElementById(‘popup’).onclick = okno;
Источник: shpargalkablog.ru