How to theme forms and add custom classes wherever we want in Drupal 7
In this article we are going to talk about theming forms. What exactly about it? Since theming forms can be a huge topic, I will stick to inserting your own custom classes wherever you can in a given form.
Have you ever needed a form element to have some special class you could target in your css? Or even yet, have you ever used a css framework like Bootstrap that tells you: ok, you need the form element to have class X in order to pick up these nice styles? Well, it can be a bit tricky to find exactly where you need to go, hook into what, override what theme function etc.
So in this tutorial I'm going to show you how to get your classes into 5 different form "places":
- the
<form>
tag itself - the submit button
- the element input itself
- the form element wrapper
<div>
- the element label
Before we go further, this tutorial assumes you are already familiar with Drupal hooks and know how to implement one at the basic level. We are going to talk about form_alter
hooks a lot which means that you can use more than one for the job: for instance hook_form_alter() or hook_form_FORM-ID_alter(), whichever best suits your need. You can read more about hooks in this section.
Comments
Optional use drupal_html_class()
One can use
function drupal_html_class($class)
to make sure the $class used is clean, valid CSS id that uses lower-case only without spaces.Really detailed and useful
Really detailed and useful explanation. Thanks.
There's a module for that...
Since the time of this nice writeup, someone was kind enough to allow this to be done by none developers as well, through the well known Field UI.
I found it while desperately searching for a quick solution for a HUUUGE entity form.
It's only a sandbox, but so far so good...
https://www.drupal.org/sandbox/gbirch/2210563
Override theme function only in context of the form
Thanks a lot. It all works fine. But sometimes, I would like to override theme function only in context of certain form. Do you have any article or advice to that?
i check it with my form but can't success
i am trying this code in my module but it is not change class of a form am i right any thing wrong here?
$form['title'] = array(
'#attributes' => array(
'class'=>'col-md-6'
)
);
#attributes class doesn't seem to append in D8
I know this tut is for D7, but after kinting my $form the structure looks to be the same.
$form['field_dates']['#attributes']['class'][] = 'my-custom-class';
However the code above does not seem to add a class no matter what I try. Any thoughts?
How to override the -- Drupal\uc_cart\Form;
I want to change the form uc cart form of ubbercart by overriding the builtform function for the uc cart class
how to use the class in jquery
i how like to know how,you can use this class define in the form in JQuery to manipulate the form.
for example if i want to hide the value of '#title' that was created in the form.
4. Form element wrapper <div>
This can also be handled using #theme_wrappers, instead of implementing your own theme_form_element (which will be triggered for all the form elements)
Strange behavior with Drupl 8
Hi;
Since D7 and D8 share the 'same' concept of Hook to alter DOM and behaviors, i'm posting my thread.
i'm experiencing such 'strange' behavior with D8 (v8.7.10) when trying to add the bootstrap 4 'form-inline' class to the default 'Search Form' form tag with this simplest snippet :
My concern is that the 'form-inline' class is NOT merged with the FORM tag classes as expected but merged with classes of the BLOCK wrapping the form ! and here the rendered block in question:
i not in the position to qualify myself as an expert of Drupal, but it seems to me like a bug. If NOT how to deal with that ?
Add new comment