How to create Multiple Forms in Drupal 7

After spending couple of hours finally I got solution to create multiple custom forms and display on single page with proper UI.
Follow the below steps to create the same-
1. First of all create a menu item in hook_menu() where you want to display forms.
function example_menu() {
  $items['user-login'] = array(
    'title' => 'Multiple Forms on Single Page',
    'page callback' => 'custom_salesforce_user_login_page',
    'access callback' => 'user_is_anonymous',
  );
  return $items;
}

2. Second step is to write a callback function which is written in hook_menu(). Inside this callback, write all the forms which you want to display on one page.
function custom_salesforce_user_login_page() {
  $custom_salesforce_login_form = drupal_get_form('custom_salesforce_login_form');
  $custom_salesforce_update_form = drupal_get_form('custom_salesforce_update_form');
  $combine_form = array('arg1' => $custom_salesforce_login_form, 'arg2' => $custom_salesforce_update_form);
  $output = theme('custom_salesforce_login_and_update', $combine_form);
  return $output;
}

3. Now create these two forms.
First Form-
function custom_salesforce_login_form($form, &$form_state) {
  $form['rtc_registered_email'] = array(
    '#type' => 'textfield',
    '#required' => FALSE,
    '#title' => t('Registered Email'),
  );
  $form['rtc_password'] = array(
    '#type' => 'password',
    '#required' => FALSE,
    '#title' => t('Password'),
  );
  $form['rtc_submit'] = array(
    '#type' => 'submit',
    '#id' => 'salesforce_ret_couple_login',
    '#value' => t('Login'),
  );
  return $form;
}

Second Form-
function custom_salesforce_update_form($form, &$form_state) {
  $form['fth_registered_email'] = array(
    '#type' => 'textfield',
    '#required' => FALSE,
    '#title' => t('Registered Email'),
  );
  $form['fth_create_password'] = array(
    '#type' => 'password',
    '#required' => FALSE,
    '#title' => t('Password'),
  );
  $form['fth_confirm_password'] = array(
    '#type' => 'password',
    '#required' => FALSE,
    '#title' => t('Confirm Password'),
  );
  $form['fth_submit'] = array(
    '#type' => 'submit',
    '#id' => 'salesforce_fth_login',
    '#value' => t('Create Password'),
  );
  return $form;
}

4. Next step is to create a hook_theme() function to theame these forms.
function custom_salesforce_theme() {
  return array(
 // this template is containing theme style for update form
    'custom_salesforce_update_form' => array(
      'template' => 'theme/custom_salesforce_update_form',
      'render element' => 'form',
    ),
 // this template is containing theme style for login form
    'custom_salesforce_login_form' => array(
      'template' => 'theme/custom_salesforce_login_form',
      'render element' => 'form',
    ),
 // this template is containing theme style for both forms
    'custom_salesforce_login_and_update' => array(
      'template' => 'theme/custom_salesforce_login_and_update',
      'arguments' => array('combine_form' => NULL),
    ),
  );
}


Note- Don't forget to create three template files inside theme folder inside your module.
5. Next step to write template preprocessor functions to display individual fields in separate template files.
/**
 * Implements Template Preprocessor For User Login().
 */

function template_preprocess_custom_salesforce_login_form(&$variables) {
  $variables['rtc_registered_email'] = drupal_render($variables['form']['rtc_registered_email']);
  $variables['rtc_password'] = drupal_render($variables['form']['rtc_password']);
  $variables['rtc_submit_form'] = drupal_render_children($variables['form']);
}

Note:- Use these above variable names with "$" inside respective templates and give design as you want. For example use below html code for inside 
custom_salesforce_login_form template.
<html>
<head>
</head>
<body>
<div class="login-form-fields">
<?php print $rtc_registered_email; ?>
</div>
<div class="login-form-fields">
<?php print $rtc_password; ?>
</div>
<div class="login-form-fields">
<?php print $rtc_submit_form; ?>
</div>
</body>
</html>


Follow the same procedure inside custom_salesforce_update_form template for second form also.Just change the variable names as defined below.
/**
 * Implements Template Preprocessor For Update User().
 */

function template_preprocess_custom_salesforce_update_form(&$variables) {
  $variables['fth_registered_email'] = drupal_render($variables['form']['fth_registered_email']);
  $variables['fth_create_password'] = drupal_render($variables['form']['fth_create_password']);
  $variables['fth_confirm_password'] = drupal_render($variables['form']['fth_confirm_password']);
  $variables['fth_submit'] = drupal_render_children($variables['form']);
}


Now we need to display above two forms together on one page. For that just print these two below variables in custom_salesforce_login_and_update template. 
Examples-
<html>
<head>
</head>
<body>
<div class="login-form-fields">
<?php print $arg_return_couple_form; ?>
</div>
<div class="login-form-fields">
<?php print $arg_first_time_login_form; ?>
</div>
</body>
</html>

/**
 * Implements Template Preprocessor For Login and Update User().
 */

function template_preprocess_
custom_salesforce_login_and_update(&$variables) {
  $variables['arg_return_couple_form'] = drupal_render($variables['arg1']);
  $variables['arg_first_time_login_form'] = drupal_render($variables['arg2']);
}

2 comments: