Advanced Drupal 7 Form Element Theming

Posted on Feb. 28, 2013

Ever wanted to give form elements a custom look? Theming entire forms is straightforward, if laborious. But theming individual textboxes, checkboxes and radio buttons is slightly more obscure. Keep reading to find out how to fully customize your form elements, from the input itself to the label.

You might be wondering: can't I just implement a theme_checkbox() function? Well, that might meet your requirements, but this doesn't handle the label at all. Let's set up our theme to give us maximum flexibility.

Learning Drupal? Subscribe to my Drupal articles, tips and tutorials.

Let's start with a use case: Bootstrap likes to have checkboxes inside the label element. I happen to like this markup too. But Drupal places the checkbox next to the label. How can we achieve this without hacking core?

Start by copying over theme_form_element() into the template.php file in your theme. Let's assume the theme is called example. You can find the body here. Be sure to replace the word theme with example.

Now find the switch statement and replace it to look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
if ($element['#type'] == 'checkbox') {
  $variables['rendered_element'] = ' ' . $prefix . $element['#children'] . $suffix . "\n";
  $output .= theme('form_element_label', $variables);
}
else {
  switch ($element['#title_display']) {
    case 'before':
    case 'invisible':
      $output .= ' ' . theme('form_element_label', $variables);
      $output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
      break;

    case 'after':
      $output .= ' ' . $prefix . $element['#children'] . $suffix;
      $output .= ' ' . theme('form_element_label', $variables) . "\n";
      break;

    case 'none':
    case 'attribute':
      // Output no label and no required marker, only the children.
      $output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
      break;
  }
}

Notice we wrapped it with an outer if statement. Here, we a define custom behavior for our checkbox. This allows us to give checkboxes special handling for labels using a custom theme_form_label(). Let's implement that, by copying the existing theme_form_element_label() from here and changing theme to example. But let's make a change. Remove the return statement (and the comment above it) and replace it with:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php
// Bootstrap wants us to add a class to the label as well.
if ($element['#type'] == 'checkbox') {
  $attributes['class'] = 'checkbox';
}

// The leading whitespace helps visually separate fields from inline labels.
if (!empty($variables['rendered_element'])) {
  return ' <label' . drupal_attributes($attributes) . '>' . $variables['rendered_element'] . $t('!title !required', array('!title' => $title, '!required' => $required)) . "</label>\n";
}
else {
  return ' <label' . drupal_attributes($attributes) . '>' . $t('!title !required', array('!title' => $title, '!required' => $required)) . "</label>\n";
}

Last but not least, Bootstrap also likes us to add the class checkbox to the input element itself. Though this isn't necessary for any CSS rules, the guide shows the markup this way. So it's best to be safe. We do this by overriding the theme_checkbox() function. Change the _form_set_class() function call to:

1
2
<?php
_form_set_class($element, array('form-checkbox', 'checkbox'));

And that's it. You now have a fully themed Bootstrap checkbox. More importantly, adding future elements and theming is very quick. You only need to set up all these theme functions once.

Check out the full template.php file for reference.

Comments

BoyMarch 1, 2013, 2:06 a.m.

Good!

Reply
MarcMarch 1, 2013, 7:47 p.m.

Could you guys join http://drupal.org/node/1114398, please? This fixes a lot of broken form theming. It could all be a lot easier if this bugs would not exist.

Reply
henrikakselsenMarch 8, 2013, 3:29 p.m.

dat font!

Reply
Getting A LoanOct. 24, 2018, 2:48 a.m.

loan installments payday loans instant cash loans no credit check payday loans personal loans personal loans for bad credit bad credit catalogues payday loans calculator

Reply
Get A LoanOct. 24, 2018, 3:43 a.m.

best personal loans personal loans bad credit personal loans tribal installment loans payday loans payday loans payday loans credit loan calculator

Reply
Instant Online LoansOct. 24, 2018, 2:57 a.m.

best personal loan loan now best personal loans personal loans

Reply
Direct LendersOct. 24, 2018, 3:38 a.m.

loans in houston payday loans payday loans online no credit check payday loans

Reply
Loan CashOct. 24, 2018, 3:58 a.m.

cash personal loan personal loans bad credit personal loan

Reply
LoansOct. 24, 2018, 4:05 a.m.

payday loans payday loans online loans direct lenders only loans in tulsa

Reply
PaydayOct. 24, 2018, 4:33 a.m.

personal loans cash online loans personal loans loans personal

Reply
longchamp bagsDec. 2, 2018, 9 a.m.

I just wanted to send a quick note to appreciate you for all of the pleasant secrets you are writing at this website. My particularly long internet investigation has at the end of the day been compensated with reliable facts to exchange with my friends. I 'd assume that most of us readers actually are very endowed to exist in a really good community with many wonderful professionals with good plans. I feel truly happy to have encountered your entire weblog and look forward to so many more enjoyable minutes reading here. Thanks a lot again for a lot of things. longchamp bags [url=http://www.long-champ.us.com]longchamp bags[/url]

Reply
auto club insuranceDec. 8, 2018, 12:39 p.m.
Reply
KimBemDec. 2, 2018, 9:20 a.m.
Reply
Paper Writer FreeDec. 2, 2018, 10:36 a.m.
Reply
jordan 13Dec. 4, 2018, 9:57 a.m.

Thanks a lot for giving everyone an extremely special chance to check tips from this site. It can be very beneficial plus jam-packed with a great time for me and my office mates to visit your site particularly three times in a week to study the latest guidance you have. And of course, I am certainly fascinated with all the superb ideas served by you. Certain 1 ideas in this posting are really the most impressive I have had. jordan 13

Reply
Free Paper WriterDec. 4, 2018, 10:26 a.m.
Reply
Buy College EssayDec. 4, 2018, 12:50 p.m.
Reply
ManBemDec. 4, 2018, 1:12 p.m.

https://essaywriter2018.com/ - essay writer

Reply
KimBemDec. 4, 2018, 3:13 p.m.
Reply
EvaBemDec. 4, 2018, 3:19 p.m.
Reply
YeezyDec. 4, 2018, 6:43 p.m.

Yeezyhttp://www.yeezy.com.co/ Yeezyshttp://www.yeezys.us.com/ Yeezy Shoeshttp://www.yeezysupply.us.com/ Yeezy Boost 350http://www.yeezy-shoes.us.com/ Yeezy Boost 350http://www.yeezy-boost350.com/ Yeezy Boosthttp://www.yeezyboost350.us.com/ Yeezy Blue Tinthttp://www.yeezybluetint.com/ Yeezy 500http://www.yeezy500utilityblack.com/ Yeezy 500 Utility Blackhttp://www.yeezy500utilityblack.us/ Nike Air VaporMaxhttp://www.vapor-max.org.uk/ Salomon UKhttp://www.salomon-shoes.org.uk/ Salomon Shoeshttp://www.salomons.me.uk/ Salomon UKhttp://www.salomonspeedcross4.org.uk/ Off White Jordanhttp://www.offwhitejordan1.com/ Vapor Maxhttp://www.nikevapormax.org.uk/ Nike Element 87http://www.nikereactelement87.us.com/ React Element 87http://www.nikereactelement87.us/ Nike Air Vapormax Plushttp://www.nikeplus.us/ Nike Outlethttp://www.nike--outlet.us/ Nike Outlet Storehttp://www.nikeoutletstoreonlineshopping.us/ Nike Outlet Storehttp://www.nikeoutletonlineshopping.us/ Nike NBA Jerseyshttp://www.nikenbajerseys.us/ Air Max Nikehttp://www.nikeairmax.us/ Air Max Nikehttp://www.max2017.us/ Jordan Shoes 2018http://www.jordan-com.com/ Jordan 11 Concordhttp://www.jordan11-concord.com/ Cheap Yeezy Shoeshttp://www.cs7boots1.com/ Wholesale Cheap NBA Jerseyshttp://www.cheapnba-jerseys.us/ Birkenstock UKhttp://www.birkenstocksandalsuk.me.uk/ Basketball Jerseyhttp://www.basketball-jersey.us/ Balenciagahttp://www.balenciaga.me.uk/ Balenciagahttp://www.balenciagauk.org.uk/ Balenciaga UKhttp://www.balenciagatriples.org.uk/ Balenciaga UKhttp://www.birkenstocks.me.uk/ Balenciagahttp://www.balenciagatrainers.org.uk/ Nike Air Max 270http://www.airmax270.org.uk/ Adidas Yeezyshttp://www.adidasyeezyshoes.org.uk/ Adidas Yeezyhttp://www.adidasyeezyshoes.org.uk/

Yeezy

Reply
ManBemDec. 4, 2018, 9:03 p.m.

https://loanswithbadcredit2018.com/ - cash america payday advance https://creditloansguaranteedapproval2018.com/ - credit loans guaranteed approval https://writemyessay2018.com/ - write my essay

Reply
JaneBemDec. 5, 2018, 1:07 a.m.
Reply
adidas nmdDec. 5, 2018, 1:17 a.m.

My wife and i ended up being quite happy when Emmanuel could finish up his preliminary research via the ideas he got through the web pages. It is now and again perplexing just to find yourself offering solutions which usually some others may have been trying to sell. And we do know we now have the writer to be grateful to for this. The illustrations you have made, the straightforward web site navigation, the relationships you aid to foster - it is many overwhelming, and it's leading our son in addition to our family feel that this issue is pleasurable, and that is very essential. Many thanks for all the pieces! adidas nmd

Reply
Buying EssaysDec. 5, 2018, 1:37 a.m.
Reply
Assignment DefineDec. 5, 2018, 2:53 a.m.
Reply
Buying An EssayDec. 5, 2018, 3:02 a.m.
Reply
JaneBemDec. 5, 2018, 3:10 a.m.
Reply
AnnaBemDec. 5, 2018, 5:09 a.m.

[url=https://propecia5.com/]propecia[/url] [url=https://sildenafilcitrategenericviagra.com/]viagra sales[/url] [url=https://accutane40.com/]accutane[/url] [url=https://tadalafil20mg.com/]tadalafil 20[/url] [url=https://valtrex500.com/]generic valtrex[/url]

Reply
Writing Essay OnlineDec. 5, 2018, 6:58 a.m.
Reply
Pay For Essay OnlineDec. 5, 2018, 7:04 a.m.
Reply
Write College EssayDec. 5, 2018, 8:57 a.m.
Reply
Homework ChartsDec. 5, 2018, 9:58 a.m.
Reply
ManBemDec. 5, 2018, 10:05 a.m.

https://cashadvance911.com/ - cash advance https://wellsfargoautoinsurance.com/ - auto insurance coverage https://usaaautoinsurancequote.com/ - usaa insurance company

Reply
EvaBemDec. 5, 2018, 10:33 a.m.
Reply
KimBemDec. 5, 2018, 11:57 a.m.
Reply
Write My ThesisDec. 5, 2018, 12:25 p.m.
Reply
EvaBemDec. 6, 2018, 11:49 a.m.
Reply
longchampDec. 6, 2018, 10:55 a.m.

I'm commenting to make you understand of the fantastic encounter my friend's daughter developed browsing your webblog. She figured out a good number of details, which include how it is like to have an incredible giving mindset to get folks quite simply know just exactly a variety of specialized issues. You truly did more than her desires. Thanks for rendering these beneficial, healthy, explanatory and also cool tips on your topic to Emily. longchamp

Reply
My Homework HelpDec. 6, 2018, 11:37 a.m.
Reply
Assignment Of LeasesDec. 6, 2018, 12:21 p.m.
Reply
JaneBemDec. 6, 2018, 12:27 p.m.
Reply
ManBemDec. 6, 2018, 1:38 p.m.

https://onlineloans2018.com/ - best online loans https://essaywritingservice2018.com/ - essay writing services https://paydayloansnocreditcheck2018.com/ - online payday loans no credit check

Reply
Writers EssayDec. 6, 2018, 1:53 p.m.
Reply
LonnieThymnDec. 6, 2018, 3:09 p.m.

[url=http://cialisnnq.com]buy cialis[/url] buy cialis [url=http://levitrarrr.com]levitra[/url] levitra [url=http://cialisrrr.com]buy cialis[/url] buy cialis [url=http://viagranorx.com]buy viagra[/url] buy viagra

Reply
JaneBemDec. 6, 2018, 4:13 p.m.
Reply
Help My EssayDec. 6, 2018, 7:06 p.m.
Reply
Writer EssayDec. 6, 2018, 7:45 p.m.
Reply
MichaelGahDec. 6, 2018, 8:15 p.m.

[url=http://sildenafil2018.icu]buy sildenafil[/url] buy sildenafil [url=http://viagranorx.com]sildenafil generic[/url] sildenafil generic [url=http://viagranorx.com]viagra tablets[/url] viagra tablets [url=http://levaquin2018.icu]buy levaquin[/url] buy levaquin

Reply
JaneBemDec. 6, 2018, 8:48 p.m.
Reply
WriteDec. 6, 2018, 8:50 p.m.
Reply
GeorgepayncDec. 7, 2018, 1:46 a.m.

[url=http://sildenafil2018.icu]sildenafil 100mg[/url] sildenafil 100mg [url=http://viagranorx.com]sildenafil 100mg[/url] sildenafil 100mg [url=http://viagranorx.com]generic sildenafil 100mg[/url] generic sildenafil 100mg [url=http://viagranorx.com]viagra 100mg[/url] viagra 100mg

Reply
GeorgepayncDec. 7, 2018, 3:28 a.m.

[url=http://sildenafil2018.icu]sildenafil 100mg[/url] sildenafil 100mg [url=http://viagranorx.com]sildenafil 100mg[/url] sildenafil 100mg [url=http://viagranorx.com]generic sildenafil 100mg[/url] generic sildenafil 100mg [url=http://viagranorx.com]viagra 100mg[/url] viagra 100mg

Reply
GeorgepayncDec. 7, 2018, 3:30 a.m.

[url=http://sildenafil2018.icu]sildenafil 100mg[/url] sildenafil 100mg [url=http://viagranorx.com]sildenafil 100mg[/url] sildenafil 100mg [url=http://viagranorx.com]generic sildenafil 100mg[/url] generic sildenafil 100mg [url=http://viagranorx.com]viagra 100mg[/url] viagra 100mg

Reply
GeorgepayncDec. 7, 2018, 3:32 a.m.

[url=http://sildenafil2018.icu]sildenafil 100mg[/url] sildenafil 100mg [url=http://viagranorx.com]sildenafil 100mg[/url] sildenafil 100mg [url=http://viagranorx.com]generic sildenafil 100mg[/url] generic sildenafil 100mg [url=http://viagranorx.com]viagra 100mg[/url] viagra 100mg

Reply
GeorgepayncDec. 7, 2018, 3:41 a.m.

http://sildenafil2018.icu - sildenafil 100mg sildenafil 100mg http://viagranorx.com - sildenafil 100mg sildenafil 100mg http://viagranorx.com - generic sildenafil 100mg generic sildenafil 100mg http://viagranorx.com - viagra 100mg viagra 100mg

Reply
Homework ChartsDec. 7, 2018, 5:12 a.m.
Reply
JaneBemDec. 7, 2018, 7:17 a.m.
Reply
Essay WritingDec. 7, 2018, 7:27 a.m.
Reply
LonnieThymnDec. 7, 2018, 8:38 a.m.

[url=http://cialisnnq.com]tadalafil[/url] tadalafil [url=http://cialisnnq.com]cialis generic[/url] cialis generic [url=http://cialisrrr.com]cialis generic[/url] cialis generic [url=http://cialisrpr.com]cialis generic[/url] cialis generic

Reply
EvaBemDec. 7, 2018, 7:26 p.m.
Reply
DanielwaypeDec. 7, 2018, 7:31 p.m.

[url=http://viagranorx.com]viagra without a doctor prescription[/url] viagra without a doctor prescription [url=http://viagranorx.com]viagra without doctor prescription[/url] viagra without doctor prescription [url=http://viagranorx.com]viagra without a doctor prescription usa[/url] viagra without a doctor prescription usa [url=http://viagranorx.com]viagra connect[/url] viagra connect

Reply
KiaBemDec. 7, 2018, 8:02 p.m.
Reply
carinsuranceDec. 7, 2018, 8:28 p.m.
Reply
low car insuranceDec. 7, 2018, 8:59 p.m.
Reply
JasonbepDec. 7, 2018, 9:44 p.m.

http://cialisrrr.com - cialis 20mg cialis 20mg http://cialisrrr.com - cialis generic cialis generic http://cialisrrr.com - buy cialis buy cialis http://cialisrrr.com - cialis tablets cialis tablets http://cialisrrr.com - buy cialis online buy cialis online

Reply
JasonbepDec. 7, 2018, 9:44 p.m.

http://cialisrrr.com - cialis 20mg cialis 20mg http://cialisrrr.com - cialis generic cialis generic http://cialisrrr.com - buy cialis buy cialis http://cialisrrr.com - cialis tablets cialis tablets http://cialisrrr.com - buy cialis online buy cialis online

Reply
JasonbepDec. 7, 2018, 9:44 p.m.

http://cialisrrr.com - cialis 20mg cialis 20mg http://cialisrrr.com - cialis generic cialis generic http://cialisrrr.com - buy cialis buy cialis http://cialisrrr.com - cialis tablets cialis tablets http://cialisrrr.com - buy cialis online buy cialis online

Reply
JasonbepDec. 7, 2018, 9:44 p.m.

http://cialisrrr.com - cialis 20mg cialis 20mg http://cialisrrr.com - cialis generic cialis generic http://cialisrrr.com - buy cialis buy cialis http://cialisrrr.com - cialis tablets cialis tablets http://cialisrrr.com - buy cialis online buy cialis online

Reply
JasonbepDec. 7, 2018, 9:44 p.m.

http://cialisrrr.com - cialis 20mg cialis 20mg http://cialisrrr.com - cialis generic cialis generic http://cialisrrr.com - buy cialis buy cialis http://cialisrrr.com - cialis tablets cialis tablets http://cialisrrr.com - buy cialis online buy cialis online

Reply
low car insuranceDec. 8, 2018, 6:24 a.m.
Reply
insurance quotesDec. 8, 2018, 6:45 a.m.
Reply
rental car insuranceDec. 8, 2018, 6:48 a.m.
Reply
car insurancesDec. 8, 2018, 7:28 a.m.
Reply
best insuranceDec. 8, 2018, 7:53 a.m.
Reply
usaa car insuranceDec. 8, 2018, 7:59 a.m.
Reply
nj auto insuranceDec. 8, 2018, 8:56 a.m.
Reply
amica auto insuranceDec. 8, 2018, 9:43 a.m.
Reply
usaa car insuranceDec. 8, 2018, 10:10 a.m.
Reply
off whiteDec. 8, 2018, 11:51 a.m.

Thanks a lot for giving everyone a very brilliant chance to discover important secrets from this blog. It can be very excellent and packed with fun for me and my office co-workers to search your web site at the least three times in 7 days to read through the fresh stuff you have got. And lastly, I'm just certainly amazed with the eye-popping hints you give. Selected 2 facts on this page are in reality the finest we have ever had. off white

Reply
EvaBemDec. 8, 2018, 1:36 p.m.
Reply
insurance quotesDec. 8, 2018, 1:37 p.m.
Reply
KimBemDec. 8, 2018, 1:47 p.m.
Reply
cheap car insuranceDec. 8, 2018, 3:49 p.m.
Reply
KimBemDec. 8, 2018, 5:06 p.m.
Reply
KimBemDec. 8, 2018, 5:52 p.m.
Reply
nationwide insuranceDec. 8, 2018, 5:54 p.m.
Reply
KiaBemDec. 8, 2018, 8:03 p.m.
Reply
JaneBemDec. 8, 2018, 10:55 p.m.
Reply
car insurance pricesDec. 9, 2018, 12:54 a.m.
Reply
geico insuranceDec. 9, 2018, 1:09 a.m.
Reply
insurance companiesDec. 9, 2018, 1:40 a.m.
Reply
KiaBemDec. 9, 2018, 3:35 a.m.
Reply
car insurancesDec. 9, 2018, 4:56 a.m.
Reply
texas auto insuranceDec. 9, 2018, 5:08 a.m.
Reply
aarp insurance autoDec. 9, 2018, 5:39 a.m.
Reply
car insurance cheapDec. 9, 2018, 6 a.m.
Reply
auto insurancesDec. 9, 2018, 7:20 a.m.
Reply

Post New Comment