[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]
Код с всплывающей контактной формой, установленный в коде файла шаблона:
<a href="#contact_form_pop" class="fancybox">заказать звонок</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<?php echo do_shortcode('[contact-form-7 id="420" title="Заказать звонок"]'); ?>
</div>
</div>
[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]
Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке сайта:
<a href="#contact_form_pop" class="fancybox">заказать звонок</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
[contact-form-7 id="420" title="Заказать звонок"]
</div>
</div>
У меня в примере код для формы “Заказать обратный звонок” – в форме всего два поля – имя и телефон, для того, чтобы администратор сайта перезвонил клиенту.
Рассмотрим данный код.
Это код самой кнопки вызова окна с формой, для этой кнопки можно задавать любые стили, и вставлять ее в любом месте шаблона:
<a href="#contact_form_pop" class="fancybox">заказать звонок</a>
Это код самого всплывающего окна, его можно оставить под кнопкой вызова окна, а можно убрать в футер для того, чтобы код контента был чище:
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<?php echo do_shortcode('[contact-form-7 id="420" title="Заказать звонок"]'); ?>
</div>
</div>
В этом коде сама форма вызывается такой функцией:
<?php echo do_shortcode('[contact-form-7 id="420" title="Заказать звонок"]'); ?>
Где прописано – вывести шорткод для Контактной формы, шорткод указан в самой контактной форме при ее создании:
[contact-form-7 id="420" 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 окне:
<a href="#contact_form_pop_1" class="fancybox">Вызываем форму 1</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop_1">
<?php echo do_shortcode('[contact-form-7 id="420" title="Заказать звонок"]'); ?>
</div>
</div>
<a href="#contact_form_pop_2" class="fancybox">Вызываем форму 2</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop_2">
<?php echo do_shortcode('[contact-form-7 id="421" title="Оставить заявку"]'); ?>
</div>
</div>
В данном случае для вызова нескольких форм обратите внимание на эти части кода:
<a href="#contact_form_pop_1" ... <div id="contact_form_pop_1"> ... и для второй формы: <a href="#contact_form_pop_2" ... <div id="contact_form_pop_2"> ... и так далее.
Вместо вывода шорткода формы обратной связи можно выводить любое содержимое, например блоки с текстом или картинками, или же форму для подписки Feedburner, например так выводится форма для подписки через Feedburner на одном из сайтов
<a href="#contact_form_pop" class="fancybox subscribe">ПОДПИСАТЬСЯ</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<div class="subscribe-form">
<div class="subscribe-text">ПОДПИСАТЬСЯ:</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" placeholder="E-mail" class="subscribe-mail" />
<input type="hidden" value="inoutdigest/feed" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="submit" value="ПОДПИСАТЬСЯ" class="subscribe-submit" />
</form>
</div>
</div>
</div>
Можно использовать этот код для своей формы подписки изменив только адрес ленты 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.
Примеры контактных форм в всплывающем окне, которые я делал для своих заказчиков:
Комментарии (112) к “Как сделать форму обратной связи во всплывающем окне для WordPress”
Сергей
Зачем изобретать велосипед, используем бесплатную форму от consultant-web.ru/callme/
Denis Creative
Можно воспользоваться и различными конструкторами, только с помощью CF7 можно создать гибкую форму под свои требования. и плюс создать свой дизайн.
Вадим
Доброго времени суток, Денис. Благодарю за статью, как раз искал для своего проекта такое решение.
А еще вопрос немного не по теме. Через какой плагин Вы выводили галерею фото? Очень красиво.
Denis Creative
Извиняюсь за задержку с ответом.
Галерея создана стандартным способом в админке WordPress, только + установлен плагин Easy Fancybox, который позволяет эту галерею красиво отображать. Постараюсь написать статью на эту тему в скором времени.
игорь
Привет! Я сделал так и всё получилось. Всё круто!
Но если усложнить задачу?
1. Мне надо не текстовая ссылка в качестве кнопки, а шорткод кнопки?
2. Мне надо захватить URL и заголовок страницы, что бы было понятно откуда отправили письмо.
Denis Creative
Как-то пропустил этот вопрос.
1. Можно привязать вызов формы к любым кнопкам и ссылкам, достаточно задать нужный якорь в ссылке, например, href="#contact_form_popquot;
2. Возможные варианты специальных тегов для выведения в письме можно посмотреть здесь http://contactform7.com/special-mail-tags/
Игорь
Можно здесь по подробнее?
Denis Creative
Что именно подробнее?
fxr
Куда именно требуется вставить код ?
Denis Creative
Код нужно вставлять в шаблон сайта, не в Визуальный редактор
Denis Creative
Статья обновилась, есть пример для вывода кода вызова формы в коде файлов, а также для вывода в Визуальном редакторе.
Катерина
Добрый день :)
Поробовала сделать по Вашей инсутркции – все получилось! Только вот после заполнения формы и закрытия окна меня перекидывает на пустую старницу. Это проблема в форме?
Эдуард
Всегда интересовал вопрос, сильно ли подобная фича тормозит загрузку сайта при медленном интернете (например на смартфоне)?
Станислав
Спасибо, все поставил все работает..))
Nazar
Добрый вечер, установил 2 плагина Contact Form 7 и Easy FancyBox, сделал как вы описали. При нажатии на текст ничего не происходит! как настроить правельно Easy FancyBox ??
Alex Bud
Попробуйте подключить новую версию jquery.js, у меня тоже ничего не происходило, подключил новую библиотеку и все заработало)
Denis Creative
Могут быть конфликты скриптов, если в шаблоне используется большое количество сторонних скриптов.
Приходилось сталкиваться с такими проблемами, какие-то скрипты отключать.
Если делать шаблон с нуля, то никаких проблем эти два плагина не вызывают.
Yarik
Здравствуйте. Метод хорош, но в моем случае что-то идет не так, так как при закрытии popup удаляется сам блок (в вашем примере блок с id=”contact_form_pop”), после повторного открытия – в popup помещается вся страница сайта. Интересно, никто не сталкивался с такой проблемой?
Denis Creative
На каком-то из клиентских сайтов была похожая проблема, в шаблоне уже были подключения фансибокса, поэтому помогло подключение другого плагина для фансибокса, например, FancyBox for WordPress.
Денис
тоже самое только с FancyBox for WordPress – перерыл весь код – вроде чисто но блок удаляется
Denis Creative
В некоторых шаблонах могут быть конфликты с другими скриптами, в таком случае нужно искать с какими именно возникают конфликты или искать другие способы для реализации контактной формы в pop-up. Возможно стоит попробовать плагин Easy FancyBox.
Яна
Подскажите пожалуйста как сделать дизайн для этой формы? Задала классы для элементов и отредактировала в css , но почему то не получается.
Denis Creative
Напишите мне на почту mail@denis-creative.com, постараюсь что-то подсказать. Со стилями не должно быть никаких проблем.
Андрей
Всё отлично работает! Спасибо за статью.
Но есть одна проблемка. Если устанавливаю на странице более одной формы, то всплывает всегда та, которая самая верхняя на странице. Например: если установить “Обратная связь” и “Форма заказа” (две абсолютно разные формы сделанные в CF7) на одну страницу, то в любом случае будет всплывать какая-то одна.
В чём проблема?
Андрей
Вопрос решён!
Заменил в и заказать звонок pop на pop2
Denis Creative
Все верно, привязка идет к id формы, поэтому для каждой формы нужен уникальный id, а так можно использовать любое количество форм на одной странице.
Катя
У меня такая проблема: при нажатии на кнопочку отправить в модальном окне, страничка перезагружается, и пользователь не видит сообщения при успешной отправки, но если снова вызвать popup то сообщение видно.
Пробовала прописать script type=”text/javascript” src=”plugins/contact-form-7/includes/js/jquery.form.js” > и в таком случае с модальным окном срабатывает, но с формами на главной странице нет, они вообще перестают работать..
Подскажите, в чем может быть ошибка?
Denis Creative
У Вас там много различных ошибок, будем разбираться! Доступы уже получил.
Евгений
Добрый день, форма работает но есть пара нюансов.
При ее неполном или неправильном заполнении и нажатии кнопки отправить всплывающее окно сворачивается, что вводит пользователя в заблуждение. При повторном нажатии на кнопку форма разворачивается с заполнеными данными и с сообщением о ошибке.
Подскажите как сделать так чтобы форма не сворачивалась при неполном заполнении?
Заранее спасибо.
Denis Creative
Окно не должно закрываться при отправке сообщения. Скорее всего или в шаблоне прописана функция для закрытия popup-формы при нажатии на кнопку Отправить, или Вы такую функцию написали без проверки на успешную отправку сообщения.
Наталья
Спасибо огромное за информацию! Очень помогла. Перед тем, как попала на Ваш сайт, Пыталась установить по инструкциям 4-х ресурсов. Только Ваши помогли! Все работает, как часы! Спасибо!
Виктор
Здравствуйте, я установил Contact Form 7 и Easy FancyBox все работает, но не совсем корректно – при нажатии на ссылку появляется белый квадрат 10х10 и все. Подскажите в чем может быть проблема?
Denis Creative
Может неправильно форму вставили в popup, может стили для формы надо исправить, и еще с десяток возможных причин…
Юлия
Сейчас работаю над проектом, в котором нужно вывести форму подписки в pop up.
В качестве сервиса для подписки использую k-news. Не нашла для него плагинов pop up, которые были совместимы с ним.
Форма сервиса вставляется через шоткод [knews_form].
Как можно взять попап, походящий мне по функциональности и научить его понимать шоткод? Допустим в плагине есть текстовый редактор, но при вставке [knews_form], он выводит на экран [knews_form] вместо формы.
Юлия
К предыдущему вопросу- возможно вам попадались плагины попапов, которые работают с шоткодами?
Denis Creative
Посмотрите пример выше, описанный в статье, – любой шорткод можно вывести через код страницы примерно так
<?php echo do_shortcode('[knews_form]'); ?>В итоге получится примерно такой вид:
<a href="#contact_form_pop" class="fancybox">заказать звонок</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> <?php echo do_shortcode('[knews_form]'); ?> </div> </div>Если Вы вставляете данный код в Визуальном редакторе, тогда используйте такой вид:
<a href="#contact_form_pop" class="fancybox">заказать звонок</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [knews_form] </div> </div>Александр
Здравствуйте! Уже вопрос задавали о том что вместо формы квадратик 10 на 10 пикселей, я вставил все правильно, и стили вообще не задавал, какая еще может быть причина в неправильной работе? Заранее спасибо.
Denis Creative
Попробуйте вместо кода вывода формы вставить любую тестовую фразу, чтобы понять, на каком этапе возникает ошибка. Если фраза будет видна, значит неправильно отрабатывает форма, если не видно в поп-ап окне ни формы, ни тестовой фразы, значит ошибка в вызове фансибокса.
Пример тестовой фразы:
Сергей
Добрый вечер! Тоже с этой проблемой столкнулся, при нажатии на текст открывается окно 10 на 10, пробовал тест с текстом, текст отображается, в чем еще может быть причина?
Denis Creative
Это значит, что форма вставлена неправильно.
Если Вы вставляете код вызова формы в php-файлах шаблона темы, то используйте код:
<?php echo do_shortcode('[contact-form-7 id="420" title="Заказать звонок"]'); ?>Если же Вы вставляете блок вызова формы прям в текстовом редакторе Записи, то используйте такой код:
Итого, должен получиться, если вставлять код прям в визуальном редакторе (в режиме ТЕКСТ) такой код:
<a href="#contact_form_pop" class="fancybox">заказать звонок</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [contact-form-7 id="420" title="Заказать звонок"] </div> </div>Так же важный момент!
Должно быть соответствие якоря ссылки и id формы:
Алексей
Добрый день! Не подскажете как сделать, чтобы всплывающее окно отображалось не по центру браузера? Вообще как менять расположение всплывающего окна?
Denis Creative
Прописать соответствующие стили для окна.
Владимир
Добрый день Денис. У меня проблема в том, что если неправильно заполнены обязательные поля формы – она не выдаёт сообщение об ошибке – просто не отправляет ничего. Если же поля заполнены правильно – всё отправляется и выдаёт в том же окне сообщение об успешной отправке.
Denis Creative
Contact Form 7 или самописная форма обратной связи?
Алёна
У меня не выходит… форма всплывает, а на ней текстом
[contact-form-7 id="36" title="Обратный звонок"]каждый символ уже проверила.. с чем может быть проблема?
Denis Creative
Где Вы вставляете код вызова формы? В визуальном редакторе или в коде?
Станислав
Здравствуйте, у меня есть сайт shtukaturka-sten.od.ua в котором есть кнопка Узнать Больше, которая есть благодаря теме оформления WordPress и в админке этой темы есть поле LINK для этой кнопки:
я туда вписал #contact_form_pop, но я так понимаю нужно поменять класс этой кнопки на FancyBox и добавить где-то на сайте
что-то наподобие этого текста:
[ contact-form-7 id="420" title="Заказать звонок" ]если я все правильно понимаю, то как это реализовать ???
Denis Creative
Лучше поручите эту задачу специалисту, можете найти фрилансера на сайте fl.ru
Серж
При на жатии на кнопку вилазить модальное окно с текстом The requested content cannot be loaded.
Please try again later.
Что может быть?
Denis Creative
Что-то неправильно сделано… Надо смотреть, возможно, неправильная ссылка с якорем стоит (#contact_form_popup)
Евгений
А у меня FancyBox конфликтует c Autoptimize – если включить сжатие javascript – то кнопка перестает работать. А без сжатия сайт грузится долго. Может подскажете, что делать?
Олег
Спасибо за статью. Такой вопрос – как заставить работать связку Contact Form 7 + Easy Fancy Box + Contact Form 7 Dynamic Text Extension ?
Нужно, чтобы по клику форма открывалась в попапе и в нее передавались GET параметры из ссылки.
Denis Creative
По идее, Dynamic Text Extension должен работать без лишних движений.
Возможно Вам поможет эта статья – https://denis-creative.com/special-mail-tags/
Олег
Денис, смотрите, например есть такая ссылка с GET параметрами:
site.ru/contact-form?param1=value1¶m2=value2Как ее вставить в эту конструкцию?
<a href="#contact_form_pop" rel="nofollow">заказать звонок</a>[contact-form-7 id="420" title="Заказать звонок"]
Как я понимаю, ее нужно уместить куда-то в
<a href="#contact_form_pop" rel="nofollow">заказать звонок</a>Как это сделать?
Denis Creative
Попробуйте в форму вставить тег [_url] – этот тег выводит ссылку на страницу, на которой была заполнена форма.
Иван
Добрый день! Отличная статья, очень помогла. Спасибо! Но кое. что не знаю как сделать, как изменить размер шрифта в самих полях, цвет полей и как изменить стиль кнопки отправить? Заранее спасибо!
Иван
Денис, подскажите пожалуйста, очень нужно!
Denis Creative
Нужно просто задать класс для блока, в который Вы помещаете, форму, например .my_form. Это для того, чтобы для разных форм на сайте задавать разные стили.
И с учетом родительского класса задавать стили для всего остального, например:
.my_form form input{font-size: 18px;
color: #333;
border: 1px solid #ccc;
}
.my_form form input.wpcf7-submit{
display: inline-block;
border: none;
padding: 15px 30px;
color: #fff;
background-color: #59d7c5;
}
Иван
Большое спасибо!
Дмитрий
Здравствуйте. Подскажите, пожалуйста. У меня не появляется всплывающее окно.
<a href="http://test.mrorange.tmweb.ru/wordpress/uncategorized/vzyat-na-test/" rel="nofollow">внизу, где "форма заявки"</a>Хотя, например, на
<a href="http://test.mrorange.tmweb.ru/wordpress/seriya-rtt-a200/" rel="nofollow">странице</a>все работает. То есть, когда я вставляю медиафайл и делаю ссылку на него же, то попап появляется, если просто добавляю класс, то ничего не происходит.Буду очень благодарен за ответ.
Denis Creative
Ссылка на окно должна быть в таком формате:
<a class="fancybox" href="#contact_form_pop_1">Вызываем форму 1</a>При этом сам всплывающий блок должен быть помещен в блок с
id=contact_form_pop_1Дмитрий
Все так. Но не появляется всплывающего окна. В адресную строку добавляется якорь и все. Дальше тишина
Denis Creative
На сайте подключено несколько скриптов для pop-up – lightbox и fancybox, посмотрите, попробуйте какой-то скрипт или плагин отключить. Возможно, нужно отключить скрипт в шаблоне сайта.
Дмитрий
Да. Я пробовал тот и другой. С фанси бокс не получилось. Я скачал лайтбокс, отключил фанси и то же самое. Когда вставляю материал – работает. Когда добавляю класс фансибокс, то нет
Denis Creative
Скорее всего это из-за конфликта скриптов, нужно смотреть детально, в том числе скрипты шаблона и плагинов. Такое бывает редко, но на некоторых шаблонах бывает. Так же бывало, что плагин Fancybox for WordPress не срабатывал, а плагин Easy Fancybox работал отлично.
Дмитрий
Та-дам! : ) Easy Fancybox – наш выбор! Читал коменты выше и хотел скачать изи фансибокс, а скачай лайт бокс. Вот невнимательность моя меня всегда подводит..
Большое спасибо, за помощь!
Denis Creative
Пожалуйста, успехов! ;)
Alex
Денис, спасибо за статью. Скажи, а есть простой способ сделать чтобы при удачной отправке сообщения через Contact Form 7 окно Fancybox автоматически закрывалось, желательно через промежуточное окно “ваша заявка отправлена” или какое-то похожее решение?
Пётр
Добрый день!
Очень полезно!
Вопрос такой, с помощью данной фичи можно ведь ещё сделать попап окно при уходе с сайта?! Если кто додумал как, буду благодарен!
Михаил
Просто спасибо!)
Юлия
Очень спасибо! как раз то, что я искала!!!
Павел
Все получилось.
Julse
Благодарю, автора за статью, наконец-то получилось разместить две формы на одной странице!! )
Но вот проблема. После активации плагина Easy FancyBox пропала возможность скролла в браузере Хром, в ФаерФоксе все норм скролится. При отключения плагина в Хроме снова все мышкой скролится нормально, но формы ясное дело не работают. Что это может быть?
Julse
В общем это был видимо какой-то конфликт. Решение стала установка FancyBox for WordPress вместо Easy FancyBox и все заработало без проблем! Еще раз спасибо Автору за такой лайфхак!
Антон
Чтоб без проблем отображать на странице текст шорткода без необходимости его выполнения используйте плагин
https://ru.wordpress.org/plugins/shortcode-shortcode/
Denis Creative
Спасибо за подсказку!
Denis Creative
Плагин не срабатывает внутри
Зато можно обойтись без плагина используя двойные квадратные скобки:
[[contact-form-7 id="420" title="Заказать звонок"]]Алексей
Подскажите, в чём может быть проблема. У меня он работает на главной и на страницах категорий, а на страницах записей нет. В адресной строке к урл добавляется #contact_form_pop, а форма не всплывает. В чём может быть дело?
Denis Creative
Может какой-то плагин подключается со своими скриптами или просто скрипты отдельные подключаются на страницах single.php.
Попробуйте разные плагины для fancybox – Easy Fancybox, FancyBox for WordPress или любой другой.
Алексей
C Fancybox for WordPress у меня вообще нигде не работает. Или он по другому подключается?
Denis Creative
Та, вроде бы, так же, тогда нужно смотреть какие там скрипты в записях подключаются.
Ujin
Надо при нажатии на кнопку заказать в таблице цен открыть всплывающую форму для заказа.
Установил Contact Form 7, Easy Fancy Box (inline content включил), таблица цен через Pricing Table by Supsystic.
Для кнопки «ЗАКАЗАТЬ» нужно прописать link, каким он должен быть?
По описании вызываеться таким кодом:
Но это же я в link не вставлю (вернее пробовал, без результата).
Denis Creative
В линк нужно вставить:
#contact_form_pop.Но учитывайте, что для каждой ссылки будет уникальный id и всплывающее окно для каждой линки будет свое, по идее.
#contact_form_pop_2#contact_form_pop_3Ujin
#contact_form_popкод вставляю в link кнопки в плагине таблицы цен
дальше в страницу вставляю шорткод таблицы цен
оно через шорткод несрабатывает
если сам делаю кнопку то работает!
и html таблицы цен немогу найти чтобы поробывать в него вставить
Denis Creative
Здесь немного все сложнее, лучше обратитесь к фрилансеру, вам быстро помогут и все сделают гораздо быстрее.
Ujin
Подскажите пожалуйста хоть в какую сторону копать/гуглить? Спасибо
Denis Creative
Я, просто, не понимаю, что должно получиться, поэтому сложно что-то подсказать…
Артем
Для форм недавно нашел вот этот плагин ru.wordpress.org/plugins/ucalc/ Но пока Contact Form продолжаю использовать, привычней.
Nefelium
Большое спасибо! То, что искал! Совет очень помог!
Руслан
Привет. Статья в топе гугла и неплохо было бы ее обновить. Там, видимо, классы поменялись у фенси бокса. Так что мануал не работает. Нужен
class="hentry"для окна иclass="fancybox-inline"для кнопки. Спасибо, в любом случае)Denis Creative
Привет, спасибо за информацию, но:
на данный момент (февраль 2018) статья актуальна полностью.
Решил проверить, на сколько все актуально и могло ли что-то измениться, поэтому развернул чистый WordPress, чистый шаблон и плагины только установленные из официальной директории без каких-либо настроек. Всё “из коробки”.
Параметры тестового сайта:
WordPress 4.9.4 running Twenty Seventeen theme.
Contact Form 7, Version 5.0
Easy FancyBox, Version 1.6.2
FancyBox for WordPress, Version 3.0.13
Сначала тестировал с Easy FancyBox, затем с FancyBox for WordPress – всё работает одинаково, только отличается эффект появления поп-ап окна.
Информация в статье актуальна и полностью работоспособна. В редких случаях могут быть конфликты фансибокса с какими-то другими библиотеками, установленными в вашем шаблоне, или используемыми в других плагинах.
Вот скриншот:
1 – вызов формы и форма прописаны в файле header.php
2 – вызов формы и форма добавлены в запись через редактор (Текст)
Руслан
Извини, если дезинформировал. Оказалось у меня старый сайт на WordPress 4.4.14, Easy FancyBox 1.6.2 и Contact Form 7 4.3.1. На нем окно появлялось, вертушка ожидания и выходила ошибка типа “Невозможно отобразить содержимое”.
Я открыл официальный мануал отсюда и сделал, как указано там:
…
Все заработало
Denis Creative
А напиши, еще раз, пожалуйста, какой код ты использовал, а то теги code поломали всё, до сих пор еще для отображения кода в комментариях не нашел нормальный скрипт.
Напиши код внутри [[php]] [[/php]] – только в одинарных скобках [пхп][/пхп]
Руслан
<a href="#contact_form_pop" class="fancybox-inline">Contact Us</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop" class="hentry" style="width:460px;max-width:100%;"> [contact-form-7 id="87" title="Contact form 1"] </div> </div>Это из мануала плагина. Я сделал по твоему. Когда не заработало, добавил
class="hentry"для окна и исправил наclass="fancybox-inline"для кнопкиDenis Creative
Спасибо, может кому-то еще пригодится.
Александр
это все устарело( а как по новому прописать закрытие формы?