I have a lot of pages with standalone forms. Because of webdesign issues I ended up using the form element to style.

The problem is certain actions cause the form-id to change.

<form id="user-profile-form">

 //a failed file upload causes the above to become

<form id="user-profile-form--2">

Which breaks a lot of my css.

An example form HTML profile:

<form id="user-profile-form" accept-charset="UTF-8" method="post" action="/drupalie/user/184/edit" enctype="multipart/form-data">
        /*form is built in here*/

Is there a way to add a CSS class to my form, add a class to the empty div which surrounds all the form elements or as a last resort, prevent the form increment on certain forms.

  • I posted an answer, but next time please at least read the docs, OK? Form API reference is a must-have, no one can remember everything so I strongly suggest bookmarking it and keeping it open during form development. – Mołot Oct 25 '13 at 12:58
  • Aah shoot, sorry I should've checked that. I just assumed it was only used for elements. Thank you for answering anyway! – Dominic Woodman Oct 25 '13 at 13:02
  • It's somehow misleading format of Form API docs... there is "pseudo-element" form listed in it, that represents overall form. But I agree it's easy to miss it - it looks like real elements in the table. – Mołot Oct 25 '13 at 13:12
  • Feature request to documentation team here – Mołot Oct 25 '13 at 13:21

You can add classes you need directly to your form with #attributes. This is example directly from the official documentation:

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

If it's not your code that creates form, you can add this with hook_form_alter(). Just be careful not to overwrite any attributes or classes that might be already in place:

$form['#attributes']['class'][] = 'search-form';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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