Créer un formulaire multi-step pour Drupal de manière simple et rapide !

Dans ce post, je souhaite partager une manière simple et rapide de créer un formulaire multi-step en Drupal depuis un hook_menu.

Création du Formulaire

function mymultistep_menu() {

  $items['mymultistep/form'] = array(
    'title' => t('My Multistep form'),
    'description' => t('My Multistep form'),
    'type' => MENU_CALLBACK,
    'page callback' => 'mymultistep_form',
    'access arguments' => array('access content'),
  );
  return $items;

}

function mymultistep_form() {

  return drupal_get_form('mymultistep_my_form');

}

Création du $item hook_menu et récupération du formulaire

Définition du Formulaire

Dans la définition, nous faisons une vérification du value $form_state['storage'] pour établir si on montre les champs de la première étape ou de la deuxième.

Pour l'exemple on crée qu'un champ et deux étapes

function mymultistep_my_form($form, $form_state) {
  // On montrerai l'ètape deux si $form_state['storage']['page_two'] est SET
  if (isset($form_state['storage']['page_two'])) {
    return mymultistep_my_form_page_two();
  }
  // On montrerai l'ètape une si $form_state['storage']['page_two'] n'est pas SET

  $form['first'] = array(
    '#type' => 'textfield',
    '#title' => t('First name'),
    '#default_value' => (isset($form_state['values']['first'])) ? $form_state['values']['first'] : 'First Name',  // replacement
    '#description' => "Please enter your first name.",
    '#size' => 20,
    '#maxlength' => 20,
  );

  //Vider le formulaire et revenir au début
  $form['clear'] = array(
    '#type' => 'submit',
    '#value' => 'Reset form',
    '#validate' => array('mymultistep_my_form_clear'),
  );

  //Soumission du formulaire vers la 2ème étape. Dans le hook_form_submit on ferai la gestion des values
  $form['next'] = array(
    '#type' => 'submit',
    '#value' => 'Next >>',
  );
  return $form;
}

Définition du formulaire

Fonction pour gérer l'étape deux

function mymultistep_my_form_page_two() {
  
  $form['description_demande'] = array(
    '#type' => 'textfield',
    '#title' => 'Description de la demande',
  );

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

Fonctionne pour gérer l'étape deux

Option vidage du formulaire

Vider le formulaire et les étapes pour revenir au début (reconstruction du formulaire)

function mymultistep_my_form_clear($form, $form_state) {  
  unset ($form_state['values']);  
  unset ($form_state['storage']); 
  $form_state['rebuild'] = TRUE;
}

Vidage du formulaire

Validation des différentes étapes du formulaire

function mymultistep_my_form_validate($form, &$form_state) {
  // Validation de la 2ème étape
  if (isset($form_state['storage']['page_two'])) {
    $description_demande = $form_state['values']['description_demande'];
    if (!$description_demande) {
      form_set_error('description_demande', t('Please enter a description.'));
    }
    return;
  }
  
  $first_name = $form_state['values']['first'];
  if (!$first_name) {
    form_set_error('first', t('Please enter your first name.'));
  }

}

Validation des étapes

Soumission du formulaire et gestion des étapes

function mymultistep_my_form_submit($form, &$form_state) {
  // Handle page 1 submissions
  if ($form_state['clicked_button']['#id'] == 'edit-next') {
    $form_state['storage']['page_two'] = TRUE; 
    $form_state['storage']['page_one_values'] = $form_state['values'];
    $form_state["rebuild"] = TRUE;   
  }
  else {   
    drupal_set_message('Your form has been submitted');
    unset ($form_state['storage']); 
    $form_state['redirect'] = 'node'; 
  }
}

Submission du formulaire et des étapes

Le blog