By OliverMcc on

I'm trying to add a class attribute to the user-login-block form. I've used the following code in template.php:

function theme_user_login_block($form) {

$form['#attributes']['class'] = 'test';

dsm($form);

$output = drupal_render($form);

return $output;

}

The output of the DSM function indicates that the class has been added to the attribute property of the form array but the class does not appear in the form element html. Here is the beginning of the form html:

 <form action="/mycommunity/node?destination=node"  accept-charset="UTF-8" method="post" id="user-login-form">

i would have expected the class attribute to be included in this part of the form html. Am i missing something?

many thanks for any help

update: code tags included - thanks Amanda!

⋅ Categories: Drupal 6.x

Comments

mndonx’s picture

mndonx commented

Hi there -
I believe the correct way to write it is:

$form['#attributes'] = array('class' => 'classname');

Also, don't forget to wrap any code you post here in <code> tags so it prints properly!

- Amanda

OliverMcc’s picture

OliverMcc commented

thanks Amanda,

i tried that but got the same result. Maybe the
element can't take a class??

mndonx’s picture

mndonx commented

Hmm, I think you could be right.

Would you consider wrapping your form in a div instead? 

  $form['#prefix'] = '<div class="myclass">';
  $form['#suffix'] = '</div>';

This doesn't actually wrap around <form></form>, but rather all the content inside of the form tags.... which also makes me think that that form tag doesn't get messed with, only the contents. But I'm definitely not an expert on FAPI!

mpaler’s picture

mpaler commented

using hook_form_alter

eg:

function your_module_form_alter(&$form, $form_state, $form_id) {
  switch($form_id) {
    case 'id of target form':
      $form['#id'] = 'new_id_of_form';
    break
  }
}

this will be rendered as

<form blah blah id="new_id_of_form">

See page 232 of the Pro Drupal Development book.

Civicsolar
http://www.civicsolar.com

christowm’s picture

christowm commented

Hi folks,

I know this is an old post, but for those that are running into the same problem. The fix is to append the value since 'class' is a nested array. So the correct code to add a value would be:

$form['#attributes']['class'][] = 'test';

Note the empty bracket after the class variable. That will do the trick.

Regards,
Mitch

rcodina’s picture

rcodina commented

Thanks!

dany525’s picture

dany525 commented

hi how are you i wanna know how do from edit the divs on a form of drupal?

MRPRAVIN’s picture

MRPRAVIN commented

'#attributes' => array('class' => array('your_class_one', 'your_class_two')),

sfelder’s picture

sfelder commented

Just what I was looking for. Didn't know class needed to be its own array.

PatrickMichael’s picture

PatrickMichael commented

using

themename_preprocess_form(&$variables) {
  $variables['element']['#attributes']['class'][] = 'my-class';
}

ksm($variables['element']['#attributes']['class']) shows the class has been added but not to the form output

Any idea how to do this in D8?

chrisrockwell’s picture

chrisrockwell commented

It might work for you, but $variables['attributes'] is a Drupal\Core\Template\Attribute which has an addClass method (as well as setAttribute). Using these methods I was able to successfully set classes/attributes:

if ($variables['element']['#type'] == 'radio' && strpos($variables['element']['#id'], 'edit-purchased-entity-0-variation') !== FALSE) {
    $variation = \Drupal\commerce_product\Entity\ProductVariation::load($variables['element']['#return_value']);
    $variables['attributes']->setAttribute('data-js-pricing-length', $variation->getAttributeValue('attribute_length')->label());
  }
authintmedia’s picture

authintmedia commented

I hope this helps anyone. Working with D 8.7

use Drupal\Core\Form\FormStateInterface;

/**
 * Implements hook_form_alter().
 */

function THEME_NAME_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id)
{
   if ($form_id == 'user_login_form') {
        $form['#attributes']['class'][] = 'AWESOME-FORM';
    }
pjudge’s picture

pjudge commented

Hi. This appears to add the new class to a wrapping div around the form (the block), not the form itself. Is there a way to get the class added to the form element?

halth’s picture

halth
Primary language Portuguese, Brazil
Location Brazil
commented

Check this out guys https://drupal.stackexchange.com/questions/273540/add-class-to-form-tag-in-in-views-exposed-form-via-template-preprocess-views-exp

Maybe you aren't dealing with a views exposed form (as in my case) but this may still be applicable to you.

--
Heitor Althmann
Drupal Developer

joris_lucius’s picture

joris_lucius
Primary language Dutch
commented

After some searching and dumping, this code helped me alter all fields on Drupal's default user edit page / form:

/**
 * Implements hook_form_FORM_ID_alter().
 * We use this to style fields on default user/{user}/edit page
 *
 * @param $form
 * @param FormStateInterface $form_state
 * @param $form_id
 */
function MYTHEME_form_user_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  //dump($form);
  $form['account']['name']['#attributes']['class'][] = 'form-control';
  $form['account']['mail']['#attributes']['class'][] = 'form-control';
  $form['account']['current_pass']['#attributes']['class'][] = 'form-control';
  $form['account']['pass']['#process'][] = 'lus_form_user_register_form_process_pass';
  $form['account']['field_picture']['#attributes']['class'][] = 'form-control';
  $form['language']['preferred_langcode']['#attributes']['class'][] = 'form-control';
  $form['actions']['submit']['#attributes']['class'][] = 'btn btn-success btn-lg';

}
/**
 * Custom function to style password and password-repeat fields on default user/{user}/edit page
 *
 * @param $element
 * @param FormStateInterface $form_state
 * @param $complete_form
 * @return mixed
 */
function MYTHEME_form_user_register_form_process_pass(&$element, FormStateInterface $form_state, &$complete_form) {
  $element = PasswordConfirm::processPasswordConfirm($element, $form_state, $complete_form);
  $element['pass1']['#placeholder'] = t('Your new password');
  $element['pass2']['#placeholder'] = t('Repeat your new password');
  $element['pass1']['#attributes']['class'][] = 'form-control';
  $element['pass2']['#attributes']['class'][] = 'form-control';
  return $element;
}

This article helped me with the password / repeat-password fields

https://www.lucius.digital/en

EmiliaC’s picture

EmiliaC commented

On Drupal 8 i managed to add the class inside the <form> tag like this:
 

/**
 * Implements template_preprocess_form().
 */
function my_theme_preprocess_form(&$variables) {
  if ($variables["attributes"]["id"] === "form-id") {
    $variables['attributes']['class'] = 'my-class';
  }
}

 

Gaurav.Singh’s picture

Gaurav.Singh commented

add class array and it should work
 

$form['element']['#attributes'] = array('class' => array('class1', 'class2'));