Would it be possible to open a webform inside colorbox?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

twooten’s picture

I'm also very interested in this.

I built a path to a webform and tried both /colorbox/form/[webform_form_id]?width=500&height=500 and like this for paths [path]?width=500&height=500&iframe=true".

Colorbox opened up and gave the message "Request unsuccessful: Not Found"

Thanks,
Tim

hutch’s picture

Try a path like

<a class="colorbox-load" href="/node/99?width=500&height=500&iframe=true">my webform</a>

(where '99' is the node id)
Ensure that you have colorbox-load enabled in colorbox configuration and that you have not got node/* disabled for colorbox.
The next problem is how to get rid of stuff you don't want in the colorbox like sidebars, you do that in your theme. There are lots of different ways of doing that, read the theming docs thoroughly.
A quick way to get started is to copy page.tpl.php to page-node-99.tpl.php in your theme and edit that. Not perfect but a start ;-)

UNarmed’s picture

Thanks for the information. I ended up doing something like that but now i am having trouble closing the colorbox once the form is submited haha. Maybe it is just not ment to be =/

lelizondo’s picture

There's an excellent module for that, webform_dialog,you'll probably want to tweak it a little but it works.

philalonso’s picture

Did anyone find a way to close the colorbox after the Webform submitted?

ami7878’s picture

Version: 6.x-1.0-beta7 » 6.x-1.0-beta9

After looking into the code of "colorbox.module" I found that it will only return access as TRUE for the following forms: 'contact_mail_page', 'user_register', 'user_login', & 'user_login_block'. This is why you cannot open a webform using the link for forms, as documented in the README.txt file:
The links to open a form needs the class "colorbox-load". The URL should look like this.
"/colorbox/form/[form_id]?width=[with_in_pixel]&height=[height_in_pixel]".

I changed the code a bit and have now access also to webforms:

--- colorbox.module	2011-03-11 16:12:31.000000000 +0200
+++ colorbox.module	2011-03-11 16:58:54.000000000 +0200
@@ -112,8 +112,13 @@ function _colorbox_form_page_access($for
       $access = user_is_anonymous();
       break;
     default:
-      // All other forms get no access.
-      $access = FALSE;
+      $formis = explode('_', $form_id);
+      if ($formis[0] == 'webform') {
+        $access = node_access('view', node_load($formis[3]));
+      } else {
+        // All other forms get no access.
+        $access = FALSE;
+      }
   }
 
   return $access;

After doing that, I needed to process the webform, thus changing the relevant function in 'colorbox,pages.inc':

--- colorbox.pages.inc	2011-03-11 16:12:16.000000000 +0200
+++ colorbox.pages.inc	2011-03-11 16:15:58.563175000 +0200
@@ -28,7 +28,12 @@ function colorbox_form_page($form_id) {
     case 'user_pass':
       module_load_include('inc', 'user', 'user.pages');
     default:
-      $form = drupal_get_form($form_id);
+      $formis = explode('_',$form_id);
+      if ($formis[0] == 'webform') {
+        $form = drupal_get_form($form_id, $node=node_load($formis[3]), array(), TRUE, FALSE);
+      } else {
+        $form = drupal_get_form($form_id);
+      }
       if (!empty($form)) {
         print $form;
       }

Now, I can use the following to have colorbox pop and submit a webform properly:

<a class="colorbox-load" href="/colorbox/form/webform_client_form_12?width=500&height=350">Form</a>
Barfly’s picture

Hello,

Any idea to make it works with drupal7 module?

BrightBold’s picture

It looks like that the ability to enable any form was removed because it was a security flaw (per #778102: colorbox-form security issue). But it would be great if this flaw could be solved in some other way — clearly there is a lot of desire for colorboxing forms other than the 5 allowed ones. I can't see that allowing Webforms would be a security flaw (but I'm no expert) so it would be great if ami7878's fix could be submitted as a patch so it could potentially be committed to D6 and ported to D7.

In the meantime, I took the sample module from #847840: Allow other forms to be called through colorbox and modified it with the first half of ami7878's code in #6 for use with Drupal 7, like this:

/**
* Implementation of hook_colorbox_form_access()
* Allowing any Webform to be loaded with Colorbox
*
* Code utilizing hook from aufumy in http://drupal.org/node/847840
* Webform implemtation code by ami7878 in http://drupal.org/node/940220
*/

function cbox_webform_colorbox_form_access($form_id) {
	$access = FALSE;
	// Allow access for webforms
	$formis = explode('_', $form_id);
	if ($formis[0] == 'webform') {
		$access = node_access('view', node_load($formis[3]));
	}
	// Allow access for the Constant Contact form
	elseif ($form_id == 'newsletter_signup') {
		return user_access('access newsletter signup');
		}
	return $access;
}

But I don't know enough about module development (I'm a themer – my only creds are that I attended the Intro to Module Development session at Drupal Con, and I'm good at copy-paste) to figure out how to accomplish the second part of the code in #6 in a module (I tried overriding it like a theme function by copying the colorbox_form_page($form_id) function and appending cbox_webform_ to the beginning of the function name, but that didn't seem to work. So I was forced to hack colorbox.pages.inc as ami7878 describes — the code was the same in Drupal 7 so this worked perfectly.

Is it easy to override that function in a separate module so we wouldn't have to hack Colorbox (and then accidentally break my site when I upgrade the module)? Or can we not do it without a hook and I need to wait and see if this patch gets committed?

Ciraxis’s picture

any new suggestions to resolve that problem?

mstrelan’s picture

It seems to me that webform can implement hook_colorbox_form_access() however since webforms each require a node argument they can't be loaded via colorbox_form_page(). Colorbox_form_page() ought to provide a hook, or a default implementation for webform, or allow extra arguments some how.

BrightBold’s picture

Version: 6.x-1.0-beta9 » 6.x-1.x-dev

I'd really love to see this get added to Colorbox — it would be great to be able to add additional webforms without hacking the module. I don't (yet, at least) have the developer skills to code this but I'm hoping someone else will take interest and work on it.

Murz’s picture

subscribe

BrightBold’s picture

Title: Open webform » Allow webforms to open in Colorbox

Changing title for better clarity.

virtuali1151’s picture

Yes... same here...this would be a huge bonus...

shiftymic’s picture

really hoping this can work in Drupal 7 soon!

arisaves’s picture

Wonder if I can apply solution #8 - I have a modified user_pass form that was generated by another module -- it lives at user/password, but has a different form id. I want to display this as the "request new password" form. Feel like this might be a start, but ran into problems applying it. Is this avail. as a patch?

Murz’s picture

For newer webform module we must also change those function in colorbox.pages.inc, because function drupal_get_form() for webform needs the $node object as second argument:

/**
 * Menu callback for colorbox_form_page.
 */
function colorbox_form_page($form_id) {
  $GLOBALS['devel_shutdown'] = FALSE; // Prevent devel module from spewing.
  
  if(strpos($form_id,'webform_client_form_')===0) {
    $nid=substr($form_id,20);
    $param=node_load($nid);
  } else $param=NULL;

  switch ($form_id) {
    case 'contact_site_form':
      module_load_include('inc', 'contact', 'contact.pages');
    case 'user_pass':
      module_load_include('inc', 'user', 'user.pages');
    default:
      $form = drupal_get_form($form_id,$param);
      if (!empty($form)) {
        print drupal_render($form);
      }
  }

  exit;
}
Murz’s picture

Also we must add hook_colorbox_form_access for webform forms.
I have attached my patch for apply over 7.x-1.2 version of color box, with it all must works normally.

arisaves’s picture

Oooh! Would I be able to outfit the above patch for D6?

Murz’s picture

Status: Active » Needs review
FileSize
1.55 KB

Here is patch for colorbox 6.x-1.x

chadsten’s picture

I'm being dense..how would I call a Webform exactly? I patched the module and whatnot, just unsure how exactly to 'do' it.

<a class="colorbox-load" href="/colorbox/form/webform_client_form_1?width=500&amp;height=350">Form</a> didn't seem to work.

Augusto182’s picture

Hello.

I aply the patch related in #18 to my 7.x-1.2 webform module.

Now i get the form in overlay... but what about the validation error messages?

How to load this messages too in the overlay

Help me!!!

Murz’s picture

chadsten, you should turn on "Enable Colorbox load" in Extra settings of admin/config/media/colorbox page.
After this adding class="colorbox-load" should work, no additional actions needed.

Augusto182, I have the same problem too and don't know how can solve it :(

arisaves’s picture

This is excellent - thank you!

Augusto182’s picture

Good news everybody. :)
(See reply #22)
validation error messages in the overlay?
easy...
using form alter add a markup, and fill this markup
with some message you want to display...

this require you disable all webform validation functions...
the validation script must be run in the the submit function...
and if is neccesary, in the end of submit function... use drupal_goto to reload
the form with the validation messages

(goood night)

laraz’s picture

@Augusto182 can you explain it better, I don't understand, thank you.

Murz’s picture

I have updated patch for fixing webform warning:
Warning: Missing argument 4 for webform_client_form() in function webform_client_form()

ivadenis’s picture

Version: 6.x-1.x-dev » 7.x-1.x-dev

Guys,

Could someone please explain step by step how to put webform in colorbox for D7 please?
I'm a bit confused! I managed to open an actual web page in colorbox, but that doesnt look nice...

Thank you very much!

Médéric’s picture

Hello everybody,

I tried this on D7, it works as describe before. I mean if the user don't fill the mandatory field you are redirected on the normal page and you lose your colorbox.
Also for the redirection after submit the form. It didn't go back to the previous page.
Augusto182 describe something for fix it on the #25 but I didn't get it...

For the first part here is the step by step:

1 - Get the Colorbox (7.x-1.3) and Webform (7.x-3.17) module and active them.
2 - On the colorbox configuration check the "Enable Colorbox-load" (/admin/config/media/colorbox)
3 - Edit the file colorbox.module via ftp in sites/all/module/colorbox
in function _colorbox_form_page_access($form_id) (line 109) add:

// Allow access for webforms
  $formis = explode('_', $form_id);
  if ($formis[0] == 'webform') {
    $access = node_access('view', node_load($formis[3]));
  }

4 - Edit the file colorbox.page.inc at the same location
in function colorbox_form_page($form_id) add:

if(strpos($form_id,'webform_client_form_')===0) {
    $nid=substr($form_id,20);
    $param=node_load($nid);
  } else $param=NULL;

and modify :

default:
      $form = drupal_get_form($form_id,$param,NULL); // ADD $param and NULL
      if (!empty($form)) {
        print drupal_render($form);
      }

5 - Create a Webform and check is id when is displayed (something like webform-client-form-*number*)
6 - Change the webform link with colorbox stuff:
<a class="colorbox-load" href="/colorbox/form/webform_client_form_*number*?destination=/*path-of-the-webform*&width=800&height=600">
/!\ In the href use the "_" insted of the "-" for the id of your webform /!\

Thanks to Murz for the code,
Hope it help,

mirkvartir’s picture

Status: Needs review » Needs work

Добрый день!
у меня один вопрос, я создаю модуль форму заявки с drupal forms api, как я должен связать мой модуль к colorbox?

Murz’s picture

Status: Needs work » Reviewed & tested by the community

Médéric, thanks for testing, will be good to see this patch integrated in module.
Did you have any ideas how we can stay in colorbox frame on form submit?

iLLin’s picture

@Murz: You could change your webform to an ajax submit. Here is an example:

function webform_overrides_form_alter(&$form, &$form_state, $form_id) {  
  switch ($form_id) {
    case 'webform_client_form_2216':
      $form['actions']['submit']['#ajax'] = array(
        'callback' => 'webform_overrides_rsvp_js_submit',  // Your callback function
        'wrapper' => 'webform-client-form-'. $form['#node']->nid,
        'method' => 'replace',
        'effect' => 'fade',
      );
  }
}
Médéric’s picture

Hello everybody,

Finally I try something else and it's enough good for me...

1 - in the temple.php :

function YOURTHEME_preprocess_page(&$variables, $hook) {
  if ( isset($_GET['ajax']) && $_GET['ajax'] == 1 ) {
      $variables['theme_hook_suggestions'] = array('page__ajax');
      debug('hello');
    }
}

2 - Create the file page--ajax.tpl.php and add it to the template folder with this code

   <?php print render($page['content']); ?>

This will display only the content of the page, here we want display only the form in the colorbox.

3 - The link for the colorbox:

<a class="colorbox-load" href="/*path-of-the-webform*?width=800&height=600&iframe=true&ajax=1" >

The "ajax=1" is the condition for use the template

Like this your form will stay in the colorbox after submit event if they don't fill the mandatory fields. But it will redirected in the colorbox if the form is valid.
So I add some jquery for colse the colorbox if the form is valid
in the .js of your template add:

$('.webform-client-form').live('submit',function(){
            var filled = true;
            $('.required').each( function(i){
                if(!$(this).val()){
                    filled = false;
                }
            });
            if(filled){
                parent.jQuery.colorbox.close();    
            }
        })

We need to check if the required filed are filled or not then close the colorbox.

NOTE: I keep the module modifications form the previous post.

I hope it's enough clear ^^'

danielbrittain’s picture

Digging this up, Did anyone ever get to the bottom of putting any webform in a colourbox in drupal 7, keep getting the "Request unsuccessful: Forbidden" message.

iLLin’s picture

I have added support for webforms in the 2.x-dev version here:

http://drupal.org/project/colorbox_node

You just need to add two classes to your link to make it work for any node or webform. It will dynamically alter your webform to be ajax if displaying through the colorbox.

GBurg’s picture

I have a very nice solution, that requires no coding and has an ui benefit. Namely, that you can report to the user that the form has been submitted correctly.

<a href="[webform-url]?width=500&height=500&iframe=true&template=colorbox&destination=/node/[nid]?template=colorbox" class="colorbox-load">Open form</a>

The trick is that after submitting the form, not the default redirect for the form is used, but is overriden by the destination parameter. The template=colorbox makes sure that the colorbox template is loaded. the node that is loaded can be a node of the type story, just stating a message.

Another solution is to set the destination of the webform to a node with the ?template=colorbox variable

The next step would be to add a js that catches when the form is submitted and load the default destination of a form in the parent window. Then all our troubles are truly solved :)

frjo’s picture

Status: Reviewed & tested by the community » Fixed

@iLLin, thanks for contributing the colorbox_node module. I have added a link to it on the Colorbox project page.

If there are things I can fix in colorbox module to make things easier for colorbox_node module please let my know.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

cocoonfx’s picture

Status: Closed (fixed) » Active

I am struggling with this. I am new to Drupal and everything listed doesn't work for drupal 7.

All I want to do is to show my webform (#webform-client-form-17) into a lightbox or colorbox fired from a link. It seems you fire the whole page into a light box but not the page.

I don't want to write a module as this should be straight forward to do...

iLLin’s picture

Status: Active » Closed (fixed)

Please read the comments before re-opening a closed issue. You can find what you need with this module: http://drupal.org/project/colorbox_node

chawkyan’s picture

I achieved the similiar thing by using colorbox and edit the theme.

Put this code inside the node.tpl.php where you want the link to be fired to show the colorbox

<?php if (isset($content['webform'])): ?>
        <a class="colorbox-inline" href="?width=500&height=500&inline=true#webformcontent">Show Form</a>

        <div style="display:none">
            <div id="webformcontent">
                <?php
                   print render($content['webform']);
                ?>
            </div>
        </div>
    <?php endif; ?>

You still need to show the webform in your node, but use css to hide it.
So the css will be something like this

.webform-client-form {display:none;}  /* hide the form inside node */
#webformcontent .webform-client-form {display:block;} /* show the form inside colorbox */

For colorbox, you need to enable Colorbox inline (Configuration > Media > Colorbox > Extra Settings)

One problem is that I don't know how to show the comfirmation message or error message inside colorbox after clicking submit button.

Hope this help :)