Simple way to style forms

I'm new to Drupal, but with a fair amount of background in html, css, cherrypy and google app engine. It hasn't been easy getting to know my way around the new framework. Things that were a piece of cake for me in html & css, and even easier in a python framework often took me days in Drupal. No doubt an experienced Drupal coder could have worked up a solution in minutes. But that doesn't change the fact that the framework doesn't come easily to beginners.

One example is building a custom form. The webforms module didn't have quite what I needed, so I had no choice but to roll up my sleeves and build something from scratch. It seemed way overkill to have to learn the form API and the basics of writing custom modules to get that simple task accomplished. And it didn't help that while the documentation for Drupal is far better than for some other frameworks (cherrypy included), it usually started two or three steps past what a newbie needs to know.

Another example is figuring out how to style the first form I built in Drupal. All I wanted was to add a bit of css code to my HTML output. To get a simple thing like that done, I had to spend a few days hunting around and trying things out. From the relevant pages I could find, it looked at first like I'd have to go through all kinds of hoops: modify my theme's template.php file, add a custom php template file, code a theme override function, etc.

Fortunately (after browsing through the code written for some of the more popular custom modules available at drupal.org/project/Modules) I found a very simple way to handle the latter task. In the interest of saving time for other newbies who are working on the same problem, here's what I figured out (I'm assuming here that you've already built the module that will serve up your custom form):

1. in the custom module function that builds your form (i.e. the function to which your menu callback points, or that you invoke with drupal_get_form if you're building your form via the nodeapi hook), define any needed class or id attributes for the form elements you want to style, as in the following example:

function custom_form_callback() {
  $form['customer_name'] = array(
    '#type' => 'textfield',
    '#title' => t('Customer Name'),
    '#size' => 50,
    '#attributes' => array('class' => 'name-textbox'),
  );
  $form['country'] = array(
    '#type' => 'radios',
    '#title' => t('Country'),
    '#options' => array(t('Canada'), t('USA')),
    '#attributes' => array('id' => 'custom-form-radios'),
  );
  ...
  $form['submit'] = array(
    '#type' => 'submit';
    '#value' => t('Submit'),
  );
  return $form;
}

2. add the following line to the top of your form callback function:

  drupal_add_css(drupal_get_path('module', 'name_of_custom_module') .'/name_of_custom_module.css');

3. in the same subdirectory where your custom module resides, create the file 'name_of_custom_module.css' and populate it with whatever styling you require, as for instance:

  .name-textbox {
    font-size: large;
    color: green;
  }

  #custom-form-radios div{
    display:inline;
  }

That's it. Your form should now display with the styling you defined. In most cases you can get the same result even without defining any class or id attributes. Just inspect the source code for your form, pick out the class attributes that Drupal automatically adds when building forms, and build your css file around those class names, as in the following example:

  #custom-form-callback form-radios div{
    display:inline;
  }

I added the attribute arrays to my form callback function just to show what you'd need to do if you had more than one element of the "radios" type and wanted to format each of them differently.