Thursday, April 24, 2014

Drupal 7 theme two custom forms in a tpl file or a single page


Let's we discuss How to theme two Drupal 7 custom forms in tpl file or in a single page.

First I would like to thank this guy for his post.

Steps :
1. Create menu call back for landing page where do you want to display two forms.
2. Create two forms.
3. Link two forms into theme function.
4. Write logic into hook_theme.

1. First step to create menu call back for landing page.
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.Create Two forms.
// First form.
function custom_salesforce_login_form($form, &$form_state) {
$form['rtc_registered_email'] = array(
'#type' => 'textfield',
'#required' => TRUE,
'#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' => TRUE,
'#title' => t('Registered Email 2'),
);
$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;
}

3. Link two forms into theme function.
 //Link your both forms into theme() function.  You can also pass form elements if its necessary. 
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; 
}

4. Write logic into hook_theme.
 /**
 * Implements hook_theme(). 
 */ 
function moduleName_theme($existing, $type, $theme, $path) {
$items['custom_salesforce_update_form'] = array(
 'render element' => 'form', 
 'template' => 'custom_salesforce_update_form',
 'path' => drupal_get_path('module', 'moduleName') .'/template', );
 $items['custom_salesforce_login_form'] = array( 
 'render element' => 'form', 
 'template' => 'custom_salesforce_login_form',
 'path' => drupal_get_path('module', 'moduleName') .'/template', ); $items['custom_salesforce_login_and_update'] = array(
 'template' => 'custom_salesforce_login_and_update', 
 'path' => drupal_get_path('module', 'moduleName') .'/template',
 'arguments' => array('combine_form' => NULL), ); 
 return $items;
 }

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


5. custom_salesforce_login_and_update.tpl.php
//Print your both forms in the above tpl file.
 <div class="login-form-fields parent">
<?php print $arg_return_couple_form; ?>
 </div> <div class="login-form-fields parent"> 
<?php print $arg_first_time_login_form; ?> 
</div>

Note : Create tpl files for those two forms separately and print form elements as your wish. So totally three tpl files are needed.




2 comments:

Natan Miranda said...

Hey thanks for share. it helped me a lot!

kali dasan said...

You are welcome :)

Post a Comment