Do you ever need to make your form look compact or perhaps beautify it?

Drupal forms are ugly, as far as I can see. But drupal gives you some flexibility to change them. You can go through some theming part, install a module if you are with drupal 5, or go with javascript in your drupal 6.

If you are with me in drupal 6 and need it for a client, perhaps, then here is what I have done with javascript part. The steps are:

  1. Drupal has already a built-in jquery framework, so you only need to download a jquery plugin by mucur here. Drop it into your theme directory. It may reside in a subfolder, says scripts/jquery.example.min.js
  2. Fire up your favorite code editor, I prefer ConText than notepad.
  3. Open your themename.info from your theme directory, and add a line there: scripts[] = scripts/jquery.example.min.js. It may be the line after "engine = phptemplate" or some stylesheet references there.li>
  4. Create a new javascript file that may become a holder for all your custom scripts. It must begin with a line : "if (Drupal.jsEnabled){" and end with "}" without quotes. And place your custom scripts inside a function "$( function() {" and end with "});" without quotes.

    Here is a complete code to make your drupal contact form look more compact:

    if (Drupal.jsEnabled){
      $( function() {
        // I make it more generic to address all forms with IDs edit-name, such as for comment form, etc.
        // If you prefer your contact form only, then prepend #contact-mail-page before #edit-name
          $('#edit-name').example('Who are you?', {
            hide_label: true
          });
          $('#edit-mail').example('Dou you have a valid email address', {
            hide_label: true
          });
          $('#contact-mail-page #edit-subject').example('A title here would be nice', {
            hide_label: true
          });
          $('#edit-message').example('Spit out what you have in mind right here', {
            hide_label: true
          });
      });
    } // jsEnabled
  5. Go to your administration page, clear up your theme registry by visiting your "admin/build/themes". You must do this to make drupal recognize your new files. Or you can go to "admin/settings/performance" to clear all caches if necessary.
  6. Now go to your contact page. And voila! you have a new clean compact form now.

If you still have trouble seeing your new form, you may hit F5 on your keyboard to clear up browser cache.

You can extend the code to improve your comment form, or whatever the form is. Just find the right ID for each field you'd like to make compact.

Now that you have your forms compact, you can start to beautify it through your CSS, possibilities are there. Another tutorial by Nick Rigby has been on earth for a long time ago and still worth a visit here or a pretty new tutorial by Ronan Berderhere.

The only caveat is that it only works when your client browser enables javascript. If not, it will degrades safely. No core touched, no headaches. Suggestions are welcome. Thanks.

Update:As per May 02 2009, I saw the compact form project page has released a dev version for drupal 6, you may be happy now if you are going with the module:)

drupal compact form