0

I want to add custom class name to fields in user login form other than default class name. For example,

  • user-name-field for Username field
  • password-field for Password field
  • click-me-button for Submit button
  • creat-account-link for Create new account
  • request-password for Request new password

how to do this programmatically?

3
  • Could you post details of the code you're currently using, and exactly which parts of it aren't working please?
    – Clive
    Oct 17, 2013 at 9:24
  • Please don't use code blocks for things that are not code. I agree that class names may be considered code. I edited your question with that assumption in mind.
    – Mołot
    Oct 17, 2013 at 9:41
  • I used following code in theme's template.php file function THEME_NAME_form_alter(&$form, &$form_state, $form_id, $element) { if ( TRUE === in_array( $form_id, array( 'user_login', 'user_login_block') ) ) { $form['name']['#attributes']['class'] = array('class1', 'class2'); $form['pass']['#attributes']['class'] = array('class3', 'class4');}} Now class names are assigned to text field. I want to assign class name to Create new account and Request new password links separately. How can I do this?
    – dhinesh
    Oct 18, 2013 at 6:32

2 Answers 2

1

Alter the login form using hook_form_alter(). And use #attributes to add custom classes to fields.

0

Create a custom template file (e.g. block--user--login.tpl.php). Then you can add custom classes to the

<div id="user-login-block-container">
    <form action="<?php print $form['#action']; ?>" method="post" id="<?php print $form['#id']; ?>"
      accept-charset="UTF-8">
    <div class="form-item form-type-textfield form-item-name customclass">
        <?php print render($form['name']); // Name field ?>
    </div>
    <div class="form-item form-type-password form-item-pass customclass">
        <?php print render($form['pass']); // Password field ?>
    </div>
    <input type="hidden" name="form_id" value="user_login_block"/>

    <div class="form-item form-actions form-wrapper" id="login_button">
        <input value="Login" type="submit" class="submit-button customclass" title="Login"/>
    </div>
    </form>
</div>

Then put in the template.php of your theme, the function:

yourtheme_preprocess_page(&$vars, $hook) {
$user_login = user_login_block(array());

$form = drupal_build_form('user_login_block', $user_login);

$form['name']['#required'] = false;
$form['pass']['#required'] = false;

$vars['form'] = $form;

Finally include the template file in your page.tpl.php:

<?php include 'block--user--login.tpl.php'; ?>
1
  • I used following code in theme's template.php file. function THEME_NAME_form_alter(&$form, &$form_state, $form_id, $element) { if ( TRUE === in_array( $form_id, array( 'user_login', 'user_login_block') ) ) { $form['name']['#attributes']['class'] = array('class1', 'class2'); $form['pass']['#attributes']['class'] = array('class3', 'class4');}} Now class names are assigned to text field. I want to assign class name to Create new account and Request new password links separately. How can I do this?
    – dhinesh
    Oct 18, 2013 at 6:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.