How to style overall form

Question

Problem

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">
    <div>
        /*form is built in here*/
    </div>
</form>     

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.

Answer 1

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';