• статья
  • pantey

Выводим форму модуля webform в popup окно модуля fancybox

13.11.2012

Итак приступим, задача думаю понятна из заголовка статьи. Для реализации нам понадобится установленный и активированный модуль Fancybox – как его установить можно прочитать вот здесь, сама форма которая реализована модулем webform, как создать свою форму читаем вот здесь и сниппет что бы вытащить форму. Приступим, для демонстрации создадим отдельную страницу, в которой у нас будет идти текст и далее на какое нибудь слово из текста повесим ссылку с классом fancybox, что бы сработало popup окно:

Сам код для ссылки на странице выглядит вот так:

  1. <a class="fancybox fancybox.iframe" href="" title="вывод формы в popup fancybox">вывод формы в popup fancybox</a>

По клику по ссылке видим, что открытие окна срабатывает

Теперь нам необходимо подгрузить в данное окно нашу форму. Для начала давайте посмотрим какой url имеет наша форма, которую необходимо подгружать:

Формы так же являются нодами, поэтому и адрес построения формы индентичен как и для нод, в моем случае url формы

  1. node/103

В вашем случае url будет другой. Пропишем данную ссылку в окно вывода нашей формы, т.е код для ссылки на странице должен выглядеть вот так

  1. <a class="fancybox fancybox.iframe" href="/node/103" title="вывод формы в popup fancybox">вывод формы в popup fancybox</a>

К ссылке с классом fancybox в атрибут href мы вписали ссылку на страницу формы. Давайте посмотрим, что теперь у нас получилось

Как мы видим вместо формы у нас подгружается вся страница. Давайте избавимся от лишнего, для этого нужно обратиться к основам темизации страницы. Перекроем страницу нашей формы, как перекрыть любую страницу читаем вот здесь . Создаём файл с названием

  1. page—urlwebform.tpl.php

Вместо urlwebform подставляете свой url страницы вашей формы. В моём случае название файла выглядит вот так

  1. page—node—103.tpl.php

И копируем в корень нашего шаблона. Пересохраняем настройки оформления, при необходимости чистим кеш и смотрим, что теперь у нас получилось.

И теперь нам необходимо лишь вытащить форму использую вот этот сниппет.

  1. $form = module_invoke('webform', 'block_view', 'id_webform');
  2. print $form['content'];

Сам код сниппета пишем в созданном файле, вместо id_webform указываем свой id для формы. Как узнать id думаю и так знаете firebug в помощь. Сохраняем и смотрим, что теперь у нас получилось:

Выводится то что нужно. На этом всё.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (23)

Profile picture for user Arcad
Гость
26.11.2012

а без этого не обойтись:page—node—103.tpl.php
т.е. можно ли выдернуть нужный нам кусок по ID или Class из node/103 ???

Спасибо.

Profile picture for user pantey
pantey
27.11.2012

это смотря что вы собираетесь вытаскивать. Как вы могли заметить сама форма открывается во фрейме, т.е. в окно выводится страница с указанным url. Здесь мы перекрывали

page—node—103.tpl.php

для того что бы избавить от лишних элементов на странице.

Profile picture for user Arcad
a
20.10.2015

но сама страница тоже ведь изменилась, правильно? Что если я хочу заходить по странице как обычно: со всеми лишними элементами

Profile picture for user pantey
pantey
20.10.2015

тогда вам писать свое решение с использованием Ajax command и API Form.

Profile picture for user Arcad
antonio
29.04.2013

СпасибО!
очень помогло!
Все четко, ясно! и сайт очень даже симпотичный!!!

Profile picture for user Arcad
Артем
29.06.2013

Никак не получается сделать!
Пишет
"Forbidden

You don't have permission to access /page-node-4.tpl.php on this server."

что бы это могло значить ?

Profile picture for user Arcad
Артем
29.06.2013

Все, разобрался )
Отличная статья, спасибо, очень помогла.

Profile picture for user Arcad
Hades
25.12.2013

Спасибо, данный вариант отображения формы отлично работает, но возникла последующая задача. После нажатия кнопки отправки формы - страница с уведомлением открывается в том же фрейме. Как при отправке формы закрывать popup?

Profile picture for user pantey
pantey
25.12.2013

Можно через Rules перенаправлять на текущую страницу. Или через заму форму - в настройках поставить редирект на любую страницу

Profile picture for user Arcad
Hades
25.12.2013

Вы похоже не поняли. Меня устраивает открывающееся уведомление. Мне нужно открыть его в родительском окне.
Форма: Форма
После отправки: После отправки

ps: вопрос рою уже больше 10 часов. пока пришёл к выводам, что для отправки формы нужно создать callback JS функцию и переписать Submit, но знаний в этой области практически нет.

Profile picture for user Arcad
Hades
25.12.2013

Прошу прощения за огромные изображения. Думал автоматически обработаются сайтом.

Profile picture for user Arcad
Hades
25.12.2013

Через form_alter привязал к кнопке атрибут "onClick" и удалось добиться закрытия окна:

function THEME_form_alter(&$form, &$form_state, $form_id) {
	if ($form_id == 'webform_client_form_ID') {
		$form['actions']['submit']['#attributes']['onClick'] = 'javascript:parent.jQuery.fancybox.close();';
	}
}
Profile picture for user Arcad
Hades
25.12.2013

Но в родительском окне остается все как было. Осталось понять как добавить редирект.

Profile picture for user Arcad
Hades
25.12.2013

Так и не нашёл решения под поставленную мной задачу... поэтому решил пойти другим путём.
Оставил сообщение формы как есть. Изменил шаблон и стили в "page--node--done.tpl.php". Это универсальный файл шаблонов для всех страниц /node/##/done. Что бы изменить ссылку "Вернуться к форме" изменил файл шаблона Webform "webform-confirmation.tpl.php" и в нём заменил атрибуты ссылки на class="button", href="javascript:;" onClick="parent.jQuery.fancybox.close();", название на "Close window".
Таким образом после отправки формы пользователь ознакамливается с итоговой информацией и самостоятельно закрывает окно.
Итог

Profile picture for user Arcad
Денис
10.04.2014

Спасибо за статью. У меня только маленький вопрос. Я сделал как у Hades выше. После заполнения формы и нажать отправить. Проходит секунды 4, потом выходит форма "спасибо за отправку". Но вот как сделать чтобы в эти 4 секунды показывалась анимация как при загрузке формы изначально. А то ощущение что ничего не происходит.

Profile picture for user pantey
pantey
10.04.2014

использовать

$.fancybox.showLoading();
Profile picture for user Arcad
Денис
11.04.2014

А можно поподробней, как это реализуется у меня с JS пока не очень. Спасибо.

Profile picture for user pantey
pantey
11.04.2014

добавить событие по клику по элементу... Что-то вроде этого

$('#id_form input[type=button]').click(function(){
$.fancybox.showLoading();
});
Profile picture for user Arcad
Fto
23.04.2014

Скажите пожалуйста а как вы сделали форму на этом сайте, ссылка слева "Написать администратору", которая содержит ссылку:

Написать письмо

странно, я не увидел в ней классов и других опций, как описано в данной статье
как я понял она открывается в fancybox, но как?
и как вы сделали автоматическое закрытие формы после отправки сообщения?
Спасибо!

Profile picture for user Arcad
NosoR
05.05.2014

Присоединяюсь к пользователю FTO. Интересует- как работает форма с сылкой "Написать администратору"?

Profile picture for user Arcad
zheka2
02.08.2015

К вопросу как закрыть окно после обработки. Сделал так, может кому пригодится:
На странице на которую перенаправляется пользователь после успешного заполнения добавил скрипт

(function ($) {
    $(document).ready(function() {
        parent.jQuery.fancybox.close();
        parent.window.location.href = Drupal.settings.basePath + 'thanks';
    });
} (jQuery));

Т.е. закрываем окно fancybox и перенаправляем родительское окно на страницу с "окончательным" приветствием

Profile picture for user Arcad
Роман
01.07.2016

Спасибо за инструкцию!
Возникла проблема. По ID моей формы в popup ничего не отображается.

$form = module_invoke('webform', 'block_view', 'node-889');
print $form['content'];

Не могу понять в чем проблема. Целая нода отображается нормально, до перекрытия.

Profile picture for user pantey
pantey
01.07.2016

в настройках boost попробуйте указать не кешировать страницу ответов на комментарий

comment/reply/*

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии