How do I create a form in a modal dialog with Drupal 7?

Question

There seems to be many solutions for implementing a modal dialog including Ctools, Colorbox, Simple dialog, and Ctools Auto-modal. I'm not sure which is the best to use for simple coding through the Form API to create popup forms in a modal dialog.

The big issue seems to be validation. Are there any best practices for creating a modal form in Drupal?

Answer 1

A good example for using forms on modal dialogs is in Ajax Login/Register module. You could see the module code and understand how it works(ajax_register is using ctools_modal).

Or you can render the form manually and use ctools only for the responses. For example:

mymodule.module:

function mymodule_form($form, &$form_state) {
  ...
  ctools_include('ajax');
  ctools_add_js('ajax-responder');

  $form['#prefix'] = '<div id="container">';
  $form['#suffix'] = '</div>';
  $form['actions']['submit']['#ajax'] = array(
    'callback' => 'mymodule_ajax_callback',
    'wrapper' => 'container',
  );
  ...
}

function mymodule_ajax_callback($form, $form_state) {
  if (!form_get_errors()) {
    $commands   = array();
    $commands[] = ctools_ajax_command_reload();

    return array('#type' => 'ajax', '#commands' => $commands);
  }

  return $form;
}

Now, you can anywhere render this form and show popup (using Twitter Bootstrap or Lightbox):

<a href="#container" data-toggle="modal">Show Form</a>
<div style="display:none;"><?php print drupal_render(drupal_get_form('mymodule_form')); ?></div>