Add AJAX popup multistep form

Question

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(&$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' => 'radios',
    '#title' => t('form type'),
    '#options' => array(
       t('one form'),
       t('two form'),
       t('three form')
    ),
  );

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

  return $form;
}

function redirect_custom_reg_user_register_form_submit($form, &$form_state) {
  drupal_set_message(t('The form has been submitted. personal="@username"', array('@username' => $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' => array(
      'modalSize' => array(
        'type' => 'fixed',
        'width' => 500,
        'height' => 400,
        'addWidth' => 20,
        'addHeight' => 15
      ),
      'modalOptions' => array(
        'opacity' => .5,
        'background-color' => '#246'
      ),
      'animation' => 'fadeIn',
      'modalTheme' => 'CToolsSampleModal',
      'throbber' => theme('image', array(
        'path' => ctools_image_path('ajax-loader.gif', 'ctools_ajax_sample'),
        'alt' => t('Loading...'),
        'title' => 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'));
  // .....................
  // .....................
}

Answer 1

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' => 'Simple Form',
    'page callback' => 'regone_form',
    'access callback' => TRUE,
    'type' => 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' => array(
      'modalSize' => array(
        'type' => 'fixed',
        'width' => 500,
        'height' => 400,
        'addWidth' => 20,
        'addHeight' => 15
      ),
      'modalOptions' => array(
        'opacity' => .5,
        'background-color' => '#246'
      ),
      'animation' => 'fadeIn',
      'modalTheme' => 'CToolsSampleModal',
      'throbber' => theme('image', array(
        'path' => ctools_image_path('ajax-loader.gif', 'ctools_ajax_sample'),
        'alt' => t('Loading...'),
        'title' => 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' => $links, 'title' => t('Actions')));

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

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