Add AJAX popup multistep form I am trying to build an AJAX popup for my custom built multi-step form using the form API. I have examined the module "Modal forms" and wondering if i should use that module or just create the AJAX functionality from scratch. Could someone one please give me an example of how I can add AJAX popup functionality to my form?  

Here is an illustration of what I would like to achieve:



I have been looking at the Chaos tool suite module example:

ctools_include('ajax');
ctools_include('modal');

// Add CTools' javascript to the page.
ctools_modal_add_js();

// Create our own javascript that will be used to theme a modal.


I have found this code snippet. I am trying to get it to work in my module. 

Here is the code I found

function redirect_custom_reg_menu_alter(&amp;$items) {
  if (isset($items['user/register'])) {
    $items['user/register']['page arguments'] = array(
      'redirect_custom_reg_user_register_form'
    );
  }
}

function redirect_custom_reg_user_register_form() {
  $form = array();
  // Add the form fields for the registration form.
  // ....  
  $form['name']['formtype'] = array(
    '#type' =&gt; 'radios',
    '#title' =&gt; t('form type'),
    '#options' =&gt; array(
       t('one form'),
       t('two form'),
       t('three form')
    ),
  );

  $form['submit'] = array(
    '#type' =&gt; 'submit',
    '#value' =&gt; 'Submit'
  );

  return $form;
}

function redirect_custom_reg_user_register_form_submit($form, &amp;$form_state) {
  drupal_set_message(t('The form has been submitted. personal="@username"', array('@username' =&gt; $form_state['values']['username'])));
}


Here is the code from the modal example in Chaos tool suite module:

switch ($option) {
  case 0:
    drupal_set_message('patient');
    $form_state['redirect'] = 'patient/form';
    break;

  case 1:
    drupal_set_message('student');
    break;

  case 2:
    drupal_set_message('doctor');
    break;
}


Here is the example from the Chaos tools which creates a custom modal display:



Here is the code that I have extracted from the tutorial.
From the comment this seems to be used to theme the custom modal:

function ctools_ajax_sample_page() {
  $sample_style = array(
    'ctools-sample-style' =&gt; array(
      'modalSize' =&gt; array(
        'type' =&gt; 'fixed',
        'width' =&gt; 500,
        'height' =&gt; 400,
        'addWidth' =&gt; 20,
        'addHeight' =&gt; 15
      ),
      'modalOptions' =&gt; array(
        'opacity' =&gt; .5,
        'background-color' =&gt; '#246'
      ),
      'animation' =&gt; 'fadeIn',
      'modalTheme' =&gt; 'CToolsSampleModal',
      'throbber' =&gt; theme('image', array(
        'path' =&gt; ctools_image_path('ajax-loader.gif', 'ctools_ajax_sample'),
        'alt' =&gt; t('Loading...'),
        'title' =&gt; t('Loading')
      )),
    ),
  );

  drupal_add_js($sample_style, 'setting');

  // .....................
  // .....................

  // This displays the widget.
  $button_form  = ctools_ajax_sample_ajax_button_form();
  $links[] = l(t('Wizard (no modal)'), 'ctools_ajax_sample/nojs/animal');
  $links[] = ctools_modal_text_button(t('Wizard (default modal)'), 'ctools_ajax_sample/nojs/animal', t('Pick an animal'));
  // .....................
  // .....................
}
Here is the answer to my question by using the chaos tools:

// this creates the url that can be entered to reach this form
function ctools_ajax_sample_menu() {
  $items['ctools_ajax_sample/simple_form'] = array(
    'title' =&gt; 'Simple Form',
    'page callback' =&gt; 'regone_form',
    'access callback' =&gt; TRUE,
    'type' =&gt; MENU_CALLBACK
  );

  return $items;
}

function regone_form() {
  global $user;

  ctools_include('ajax');
  ctools_include('modal');

  // Add Ctools' JavaScript to the page.
  ctools_modal_add_js();

  $sample_style = array(
    'ctools-sample-style' =&gt; array(
      'modalSize' =&gt; array(
        'type' =&gt; 'fixed',
        'width' =&gt; 500,
        'height' =&gt; 400,
        'addWidth' =&gt; 20,
        'addHeight' =&gt; 15
      ),
      'modalOptions' =&gt; array(
        'opacity' =&gt; .5,
        'background-color' =&gt; '#246'
      ),
      'animation' =&gt; 'fadeIn',
      'modalTheme' =&gt; 'CToolsSampleModal',
      'throbber' =&gt; theme('image', array(
        'path' =&gt; ctools_image_path('ajax-loader.gif', 'ctools_ajax_sample'),
        'alt' =&gt; t('Loading...'),
        'title' =&gt; t('Loading')
      )),
    ),
  );

  drupal_add_js($sample_style, 'setting');

  ctools_add_js('ctools-ajax-sample', 'ctools_ajax_sample');
  ctools_add_css('ctools-ajax-sample', 'ctools_ajax_sample');

  $links = array();
  $links[] = ctools_modal_text_button(t('Wizard (custom alex modal)'), 'ctools_ajax_sample/nojs/animal', t('Pick an animal'), 'ctools-modal-ctools-sample-style');

  $output  = theme('item_list', array('items' =&gt; $links, 'title' =&gt; t('Actions')));

  // This deals with theming of the modal box.
  $output .= theme('ctools_ajax_sample_container', array('content' =&gt; '&lt;h1&gt;' . t('Sample Content') . '&lt;/h1&gt;'));

  return array('markup' =&gt; array('#markup' =&gt; $output));
}