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']);
}
