Blog

I always get a really good sense of accomplishment when I write a lot of code and it does what I want. I sit back and breath a sigh of relief until someone shows me that I could have done the same thing with 1 line of code. Surely, one line of code can't accomplish 'everything' I want, right? Well, almost.

Included with Drupal is jQuery...obviously...but not so obvious is a jquery function called ajaxForm. The task at hand was to ajaxify the Drupal comments for a Video content type, so that you could comment on the video without the page refreshing and interrupting video playback.

I started writing some custom jQuery, collecting all the form field values into a data array, and using $.post to send the data to a url, which I then created a page callback for using Drupal's menu system.

$('#comment-form input#edit-submit').bind("click", function(e) {  
   var title = $('input#edit-subject').val();
   var body = $('textarea#edit-comment').val();  
   var wall = $('select#edit-friends option').val();  
   var star = $('select#edit-vote-1 option').val();
   
   var data = {
     'title' :title,
     'body'  :body,
     'wall'  :wall,
     'star'  :star

The idea of adding custom CSS or JS to a form is a very simple task. With one call
to drupal_add_css, a form can be themed any which way. A call to drupal_add_js can add
effects to a form for a better user experience.

Adding CSS using drupal_add_css allows for CSS preprocessing, which is the process of
aggregating a bunch of separate CSS files into one file that is then compressed by
removing all extraneous white space. This will save on page load time and will bypass
the limit that IE has on the amount of CSS files that can be imported. Using drupal_add_js
also allows you to cache the JS files as well. Using these two functions in Drupal 5
and Drupal 6 are almost identical. However in Drupal 6, the parameters for each of the
functions are passed in an associative array.

With the release of Drupal 6, the form API was slightly changed as well. Here's a
link to the complete list of changes in the FAPI (Form API): http://drupal.org/node/144132.
A big change in Drupal 6 was the fact that forms were being cached. So adding CSS files and JS
files in hook_form_alter or hook_form would lead to issues if the form was reloaded after failing validation.

I don't know why but there really aren't a whole lot of resources out there for theming forms in Drupal 6. Maybe it is because overall people try their best to avoid Drupal's dreaded forms just because of how cumbersome they can get. It can be difficult to understand the form API at first but again once past the intimidation you'll wonder why you ever avoided them in the first place. I'm going to use Drupal's registration form as an example for this post. The question that will be answered here is "How can I make my registration form look more elgant and friendly?". You want people to sign up for your site...don't scare them away.