Popup forms

Note: please use dev version, 7.x-1.x release was made by mistake. API of this module is unstable, it can and will change in the future. We will issue a stable release after we finalize the API.

About

This module provides an easy way for developers to display any Drupal form in a popup (through jQuery UI dialog).
Note: this module does nothing itself and only provides API for module or theme developers.
There are plenty of modules that display something in popups, the most popular of them is Popup (for Drupal 7). The main difference from this kind of modules is that Popup forms does one thing (and does it well): it opens form in a popup.

This module was developed by Code Your Dream.

Features

• The module uses jQuery UI dialog.
• Works well with multi-step forms. Just don't add "Next" button id to 'close_buttons' array to keep popup open.
• Can open https forms from non-secure page and vice-versa.
• Loads form in an iFrame (no problems with form validation or AJAX-driven forms).
• Allows you to pass various parameters to the form callback.
• Gives you access to the $form_state from Javascript after the form is submitted successfully.
• Graceful degradation to non-ajax variant.

Requirements

Module requires jquery.postmessage plugin. Download and place it into libraries directory so that plugin will be at sites/all/libraries/jquery.postmessage/jquery.ba-postmessage.min.js

How to use

1. Implement hook_popup_forms_data() in a custom module:
   

   function mymodule_popup_forms_data {
     return array(
       // Popup form identifier. May (but doesn't necessarily have to) coincide with form callback.
       'popup_form_id' => array(
         // The unique form identifier. The same that you pass to drupal_get_form().
         // If not set, will default to popup form id (array key).
         'form_id' => 'some_form_id',
         // Array of form callback arguments.
         'form arguments' => array(
           'param1' => 'def_value1',
           'param2' => 'def_value2',
         ),
         // Array with names (#name FAPI key) of buttons which should close the popup.
         'close_buttons' => array('delete', 'cancel'),
         // File which should be included.
         'file' => drupal_get_path('module', 'my_module') . '/my_module.pages.inc',
         // Same use as in hook_menu(). Should return TRUE if the current user has access to the form.
         'access callback' => 'user_access',
         // These arguments will be retrieved from GET request and passed to the access callback.
         'access arguments' => array(
           'param1' => 'def_value2',
           'param3' => 'def_value3',
         ),
         // Popup title.
         'title' => t('My form'),
         // If you set this to true, then the non-ajax page for this form will be created automatically.
         // Path for this page will be '/form/%popup_form_id?{form arguments}&destination={path to return after form submit}'.
         'autopage' => TRUE,
       ),
     );
   }
   

2. Call popup_forms_parent_js() in your page callback (from where you want to show the popup) to add the necessary JS and CSS files.
3. Use JavaScript function popupFormsFormShow() to open popup form.
   

       popupFormsFormShow(
         popup_form_id, // Your popup_form_id, declared in hook_popup_forms_data()
         callback, // JS callback (see below)
         form_parameters, // Associative array of form parameters as declared in hook_popup_forms_data()
         dialog_options // JQuery UI dialog options
       );
   

4. After user submits the form, you will receive form execution result in your callback. First param of callback function is $form_state['values'] after form submit.
5. You can use function popup_forms_link() to generate links which will open popup forms.
   For example, the following code will generate a link to the popup form with id 'user_login_form', which will be opened in a popup (or on separate page, in case when js disabled). No custom JS required, but you still have to implement hook_popup_forms_data().

   print popup_forms_link('user_login', t('Login'));
   

   Note that when you use this function, no changes will be made on the parent page after popup is closed.

Examples

Example 1: Display Drupal login form in a popup

In this example login form will be displayed in popup whenever anonymous user clicks login link (with "/user/login" or "/user" href). You may want to show a block with such link on every page.
When user successfully submits popup form, welcome message is displayed and page is reloaded.

example1.module:

/**
 * Implements hook_init().
 */
function example1_init() {
  if (user_is_anonymous() && arg(0) != 'ajax-get-popup-form') {
    popup_forms_parent_js();
    drupal_add_js(drupal_get_path('module', 'example1') . '/example1.js');
  }
}

/**
 * Implements hook_popup_forms_data().
 */
function example1_popup_forms_data() {
  return array(
    'example1_user_login' => array(
      'form id' => 'user_login',
      'access callback' => 'user_is_anonymous',
      'close_buttons' => array('op'),
    ),
  );
}

 
example1.js:

(function($) { 
  Drupal.behaviors.login_popup_example = {
    attach: function(context, settings) {
      $(document).click(function(e) {
        var $target = $(e.target);
        if ($target.is('a') && ($target.attr('href').match('^/user$') || $target.attr('href').match('^/user/login.*$'))) {
          popupFormsFormShow( 'example1_user_login', function(form_state) {
            alert(Drupal.t('Hello, @username!', {
              '@username': form_state.values.name
            }));
            window.location.reload();
          });
          e.preventDefault();
          e.stopPropagation();
          return false;
        }
      });
    }
  }
})(jQuery);

Example 2: Show your own form in popup and pass it a parameter

In this example we display popup form on the page if 'popup-forms-example-show' argument is present in query string (i.e. http://example.org/?popup-forms-example-show).
We also pass random number to form construction handler with JavaSrcipt.

example2.module:

/**
 * Implements hook_init().
 */
function example2_init() {
  if (isset($_GET['popup-forms-example-show'])) {
    popup_forms_parent_js();
    $js = "
      (function($) {
        $(document).ready(function() {
          popupFormsFormShow('example2_example_form', null, {arg: Math.random()});
        });
      })(jQuery);
    ";
    drupal_add_js($js, 'inline');
  }
}

/**
 * Implements hook_popup_forms_data().
 */
function example2_popup_forms_data() {
  return array(
    'example2_example_form' => array(
      'access callback' => TRUE,
      'form arguments' => array(
        'arg' => NULL,
      ),
    ),
  );
}

/**
 * Form construction callback for example popup form.
 */
function example2_example_form($form, &$form_state, $arg) {
  $form['arg'] = array(
    '#type' => 'item',
    '#title' => t('The argument you passed into the form is'),
    '#markup' => check_plain($arg),
  );
  return $form;
}