Could this be used to display a webform in a pop-up?

jamesmcd - June 14, 2009 - 17:02
Project:Popups API (Ajax Dialogs)
Version:6.x-2.0-alpha5
Component:User interface
Category:support request
Priority:normal
Assigned:Unassigned
Status:active
Description

I have created a new webform, with two fields on it, one a request box and the second an email address field.

I have a link in the helper text of a cck form for this.

At present when a user clicks it it loads a new website page to display the form

would it be possible to use this module to create a smaller pop up equivalent with just the webform fields showing?

Ideally the pop up would then close upon submission

Thanks

#1

design.er - July 6, 2009 - 23:09

Yeah, it would be awesome! I'm also looking for this feature. :)
I'll help to test it and report everything back to the community.

Regards,
Stefan

#2

corona ronin - July 7, 2009 - 05:05

I am also interested. Does this require creation of a custom module to invoke the functions listed in the readme.txt? Very cool stuff!

#3

pinkradical - July 16, 2009 - 08:35

Hi

I spent most of yesterday trying to get a webform in a popup working in a really nice way and I have done it with pretty cool results.

My requirements, and therefore solution, are a bit complex but with more basic requirements I am sure you could simplify my solution.

So here goes:
Basically I wanted a node to provide a link to a feedback form (ie a popups link to a webform). Upon submission the popup would close. Some sort of acknowledgment of the submission was also required.
To complicate things I also needed to do some pre-processing of the webform prior to it being shown (the actual form to show depends on the context, and certain webform values may need pre-setting).
It also had to degrade nicely so everything worked well for non-JS browsers (this was a pain to do, the solution works but I'm only 90% happy with it - but hey, I can live with that).

So on the node there is the usual link with the popup calls

  $link_options = array('attributes' => array(
    'id' => 'feedback-link',
  ));
    $output .= l('Give feedback', 'feedback/<webform name>/'.$node->nid, $link_options);
  popups_add_popups(array('#feedback-link'=>array(
    'hijackDestination' => FALSE,
    'width'             => '480px',
//    'doneTest'          => 'node/'.$node_nid,
  )));

Note:

  • in my link I substitute the name of the webform depending upon the type of feedback I want. We will get to that bit next.
  • I also pass in the nid of the calling node. If JS is guarenteed to be enabled you should not need this but if it isn't then is provides a redirect back to the original page afterwards.
  • I do not use doneTest for my method as it buggers up any acknowledgement message. However, if you call the webform directly then you could cancel it with doneTest or it may even work with the defaults. I'll let you play with that one.

Now, I don't call my webforms directly (as explained above, I want to frig about with them first) so the link is handled by a menu callback in a custom module I wrote.

//  hook_menu
  ...
  $items['feedback/%'] = array(
    'title'            => 'Feedback',
    'page callback'    => 'feedback_form_page',
    'page arguments'   => array(1),
    'access callback'  => TRUE,
    'type'             => MENU_CALLBACK,
  );
  ...

I also have a callback menu to handle the form completion stuff - acknowledgement and closedown in a JS independent manner.
  ...
  $items['feedback/done'] = array(
    'title'            => 'Thank you',
    'page callback'    => 'feedback_done_page',
    'access callback'  => TRUE,
    'type'             => MENU_CALLBACK,
  );
  ...

So for the webform callback function I just select the appropriate webform, do some validation, frig about with some of the webform default values and then show the webform. I also save the redirect url temporarily in the session in case it is needed later.

function feedback_form_page($form_name) {
  ...
  // get the nid argument, I have this as an optional path argument
  $ref_nid = arg(2);
  // you want to check the nid passed in is valid, if not default it (look at HTTP_REFERER or whatever)
  $redirect = 'node/'.$ref_nid;
  // save the back page referer
  $_SESSION['popup-referer'] = $redirect;
  ...
  // show the webform
  return node_view($form_node, FALSE, TRUE);
}

As an aside you can set defaults in the webform like this:
  ...
  $form_node->webform['components'][<component index>]['value'] = $my_defalt_value;
  ...

So that gets our webform popping up nicely. Next we have to make it go away when done. There are several methods here but the best approach I found to give a post submission acknowledgement and to be functionally downgradable to non-JS was to set the webform to redirect to my second menu callback function when done. With

internal:feedback/done

in the webform Confirmation message or redirect URL entry.
Incidentally, I tried setting this in my function prior to showing the webform with
  $form_node->webform['confirmation'] = 'internal:feedback/done';

but it didn't work so you need this on the webform config.

The problem with putting a redirect in the webform is that you loose the acknowledgement so this needs to be done in the feedback/done menu callback function. We also need to get the user back to their original page. My solution was to generate a simple page that would appear in the popup after the webform submission (or would be shown if there is no JS). For the JS popup case I auto-kill the popup after a couple of seconds thus leaving the user at their original page (no reload). For the non-JS, non-popup case the page is displayed with a back button that takes the user back to their originating page.

This is how I do it:

function feedback_done_page() {
  // get the redirect from the session
  $redirect = $_SESSION['popup-referer'];
  // show the notice page
//  drupal_set_message... or whatever to show the message
  ...
  // show the back link
    $o .= l('Back', $redirect, array('attributes'=>array(
      'id'      => 'link-back',
    )));
  // set a timer to auto-close the popup after a couple of seconds (js page)
  $o .= '<script language=javascript type="text/javascript">';
  $o .= 'timer=setTimeout("Popups.close()",2500)';
  $o .= '</script>';
  return $o;
}

And that's it (hope I remembered everything). It works really well.

Cheers

#4

starbow - July 16, 2009 - 20:46
Status:active» fixed

Cool. So the answer is yes. And I suspect most use cases will be simpler that pinkradica's solution.

#5

System Message - July 30, 2009 - 20:50
Status:fixed» closed

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

#6

alextronic - September 18, 2009 - 01:41
Status:closed» active

Hey pinkradical, that was great.

Can you please upload the module file? I can't seem to put it all together.
I'd love to try your solution but I'm not much of a programmer and I have to try the combination AjaxPopups/Webforms.

Thanks in advance

(BTW I set the thread "active" just in case more solutions appear here.)

Alex

#7

alextronic - September 22, 2009 - 15:29

pinkradical? anyone?

 
 

Drupal is a registered trademark of Dries Buytaert.