Multistep Registration Form

Question

while googling and reading documentation and API, I've seen multiple solutions for "combining" 2 forms into one, and thus creating a multistep form.

What I want though, not even sure if it's doable, is to "split" my (huge) user registration form into 2 steps, where the value of one field (the only one in step 1) would determine which fields should show up in step 2.

I wouldn't like to drop the entire registration form and re-create it in code or in another way and somehow re-implement the whole user registration process. Is that possible?

EDIT: to avoid misunderstandings, what I need to do is an "actual" multistep form, with submitions between steps, and not some front-end handling. That is, I want the whole thing to be javascript independant.

EDIT2: to clarify even further, the task is figure out how/if possible to pretty much split any "edit" form to 2 parts. The current question does ask about the user/edit and/or user/register form specifically, but in order to come up with a more generalized solution, one might also want to split a node/edit form in to 2 parts. That's what I am really asking about. Splitting an entity/edit form in to 2 (or more) steps.

Answer 1

One way to do this would be to use the Conditional Fields module (disclaimer: noted as not ready for production for D7). The way to do it with your own code would be to use the States API (the Conditional Fields module is just a GUI to States API, basically).

Using Conditional Fields, you can set it so that, for example, based on the value selected for Field A, a number of fields would be shown or not shown as per your requirements.

EDIT: To split the form into two steps, you can use the Field Group module, which provides a "multipage steps" feature. To configure this, you will need to create a fieldgroup of type multipage for each page you want to have on the user registration form, and then place the appropriate fields under each page (on the user account manage fields screen).

Note: The Conditional Fields and Field Group module will display everything as one giant page if Javascript is disabled. I don't know any way around this.

Answer 2

Take a look at the Profile2 module. When I first encountered it, I was a little confused about its purpose and why 18k+ sites found it so useful :-p Turns out it is great for storing and organizing user information when you have many fields associated with each user.

The Profile2 module creates and maintains new profile entities attached to user accounts. For the uninitiated, in Drupal 7 an entity is a set of information, usually with fields attached. Nodes are entities, users are entities, relations are entities, etc. Profile entities behave similar to new nodes, except that they are attached to user accounts. Users are able to edit their profiles on a separate page from the actual account page, or as part of the account page itself (depending on the settings you choose).

For your project, here's what I'd recommend:

1. Install and enable Profile2. This automatically creates a new default "Main" profile.

2. Edit the settings for the "Main" profile at admin/structure/profiles/manage/main. Uncheck "Show during user account registration" and check "Provide a separate page for editing profiles".

3. Add the additional user fields you want at admin/structure/profiles/manage/main/fields. If there are still more fields than should be stored and edited on a single page, create an additional profile type at admin/structure/profiles/add, or use Field group (Javascript based) to break the form down into groups.

4. Install and enable Rules. Create a Rule that directs new user accounts to the profile edit page: profile-main/[account:uid]/edit. If you needed additional profiles to break down the form further, add additional Rules directing the user to those pages by reacting to the event "After saving a new profile".

Rule export code:

{ "rules_direct_new_accounts_to_profile_edit_page" : {
    "LABEL" : "Direct new accounts to profile edit page",
    "PLUGIN" : "reaction rule",
    "REQUIRES" : [ "rules" ],
    "ON" : [ "user_insert" ],
    "DO" : [ { "redirect" : { "url" : "profile-main\/[account:uid]\/edit" } } ]
  }
}

This has the benefit of being able to separate the account settings (e-mail, username, password) from the information about the user (the profile fields). Using this configuration, you can achieve the desired multi-step user registration form without writing a line of code. The only caveat that you should be aware of is that a user can leave the workflow after creating an account without creating a profile (even though Rules automatically directs them to the profile edit page, there's nothing keeping them from clicking a link to another part of the site). Additional Rules may be necessary to require the user to complete the profile before using the rest of the site.

Answer 3

Have you looked into the Chaos Tools form wizard implementation found here. I have done something similar for a registration form following those instructions and integrating some profile2 fields in the multistep form as well. Had to create a custom module that had the page callbacks and also handled the form fields. I can get into more detail about how I handled it if this is a path you're wanting to follow.

Answer 4

Here's a totally different approach to adding an "actual" multi-step form that may or may not work for you. I did something similar to the following on a site I built.

On this site, users had four possible roles. They could have any combination of the roles: all 4, none, or role A and B but not C and D, etc. Each role has its own set of associated profile fields that should only be shown to users of that role.

On the user registration form, I allowed users to select their roles with checkboxes. Then, using the Rules module, I awarded the roles upon account registration to each user. I also used Rules to automatically created a set of nodes for each user upon account registration. These nodes are special content types that contain the profile questions for each role. They are linked to the user account via the Relation module.

Then, I built a set of views and laid out the user profile with the Panels module so that it shows the fields from the different nodes for the roles on the user profile page. This was a very complex set up, but it allows me to give users separate edit links to the different parts of their profile, ensures that only users with the appropriate role will be asked to fill in certain parts of the profile, and works without Javascript.

Answer 5

I'm just starting in Drupal and working on something similar but I have not really pursued it - I used the Workflow module what it does is I am able to add a (workflow) field to the registration form to link to another view. There maybe some issues on the data but I was thinking that all I had to do was play around with the registration state (promote it). As mentioned I am just a beginner and I have not really seen this working in totality. but I think you should look into this as a possible solution.

Answer 6

a. for multistep node form, use msnf. it works great! b. for creating multistep (server side) user registration i haven't found any module to fit my needs so i had to do it myself. here's what i did:

my setup: email_registration + ife + asaf

/**
 * Implements hook_form_FORM_ID_alter().
 */
function custom_form_user_register_form_alter(&$form, &$form_state, $form_id) {
    // initialize step
  if (empty($form_state['step'])) {
    $form_state['step'] = 1;
  }

    // adjust form for step 1
  if ($form_state['step'] == 1) {
        // hide default submit button
    $form['actions']['submit']['#access'] = FALSE;
        // add custom button
    $form['actions']['next'] = [
      '#value' => 'Next step',
      '#type' => 'submit',
      '#validate' => [
                // step 1 validation callback
        '_custom_user_register_form_step1_validate',
                // only if you use ife
        'ife_form_validator'
      ],
            // step 1 submit callback
      '#submit' => ['_custom_user_register_form_step1_submit'],
            // limit validation only for fields below
      '#limit_validation_errors' => [
                // add all fields that should be validated in step 1
        ['field_phone'],
        ['mail'],
      ],
    ];

        // hide all fields that belong to step 2
    $form['field_age']['#access'] = FALSE;
  } else if ($form_state['step'] == 2) {
        // hide fields that belong to step 1
    $form['field_phone']['#access'] = FALSE;
    $form['account']['#access'] = FALSE;
        // limit validation only for fields below
    $form['actions']['submit']['#limit_validation_errors'] = array(
            // add all fields in step 2
      array('field_age'),
    );

        // add custom validation callback for step 2
    $form['#validate'][] = '_custom_user_register_form_step2_validate';
        // only if you use ife
    $form['actions']['submit']['#validate'][] = 'ife_form_validator';

        // add custom submit
    array_unshift($form['#submit'], '_custom_user_register_form_step2_submit');
  }
}

and the callbacks:

function _custom_user_register_form_step1_validate(&$form, &$form_state) {
  // validate here
}

function _custom_user_register_form_step1_submit(&$form, &$form_state) {
  // increase step
  $form_state['step'] = 2;
  // store step 1 values for later use
  $form_state['storage'] = $form_state['values'];
  // rebuild form
  $form_state['rebuild'] = TRUE;
}

function _custom_user_register_form_step2_validate(&$form, &$form_state) {
  // validate here
}

function _custom_user_register_form_step2_submit(&$form, &$form_state) {
  // add values from $form_state['storage'] to $form_state['values'] 
}