Form theming - How to change divs to table, tr and tds.

Posted by kmkivist on December 2, 2012 at 6:03pm

Hello,

I've been practicing Drupal theming for a couple of days now and I somehow got it I guess. But I'm having a hard time to find out where I can theme (or change stucture) forms and their fields. I installed Webform module and created a custom contact form within my site. I were also able to rearrange my fields manually by editing webform-form.tpl.php file and using drupal_render().

At the moment my Drupal renders the form by using divs. Something like this:

<div>
  <div class="form-field-1">
    <label>
    <input>
  </div>
  <div class="form-field-2">
    <label>
    <input>
  </div>
</div>

I'd like to change it to use table, tr and td tags but I can't find a way to do it. I've tried to Google this with no success.

Maybe you can point me to the right direction. Thank you!

Comments

=-=

Posted by VM on December 2, 2012 at 6:49pm

why would you want to use a table for data that isn't tabular? Using tables for layout purposes isn't necessary. You utilize divs and CSS.

If you want to adjust the layout through a UI, investigate the display suite module.

I should have said that it's

Posted by kmkivist on December 2, 2012 at 8:04pm

I should have said that it's not important why I want to, but how. What if I want to add additional divs there then? For example I want to add an extra div between label and input tags. How to do it? Or even more generally, how can I change the structure?

Question two. I guess there's some way how can I add some custom classes for those divs my Drupal generates automatically? Some hook or something maybe?

Thank you in advance :)

=-=

Posted by VM on December 2, 2012 at 11:06pm

one method would be to use a custom tpl.php file and print your fields manually with your own markup. You can also research utilizing preprocess function to alter the output before it's rendered.

Here's a tutorial I put

Posted by Jaypan on December 3, 2012 at 1:37am

Here's a tutorial I put together on theming forms in Drupal 7: http://www.jaypan.com/tutorial/themeing-drupal-7-forms-including-css-and-js

And one I put together on theming forms with checkboxes/radios in D7: http://www.jaypan.com/tutorial/themeing-drupal-7-forms-tables-checkboxes...

You may also want to look at the D6 version of the second tutorial, as it gives a fairly in-depth look at theming a table manually, and even though it's for D6, many of the principles are still relevant for D7.

Jaypan We build websites

One way would be to fake it

Posted by Cory Goodwin on December 3, 2012 at 4:47am

One way would be to fake it with CSS. Use the display table, table-row, and table -cell.

--
Hire me and Follow me on Twitter