In this tutorial I am going to show you a way you can leverage the power of the Drupal Form API to display form fields in the layout you want. To illustrate this, I will alter a form (the comment form) and arrange the Name and Subject fields in two columns.

What I am going to show you works just as well when you create your own forms, but for the sake of working with something already existing, I chose to use hook_form_alter() to make the respective modifications rather than create a new form from scratch. So I expect you’ll grasp the concept anyhow.

A quick word about the #prefix and #suffix properties. You can apply them to almost all Form API elements and they allow you to define markup that appears before (#prefix) and after (#suffix) the form element itself. So in this example, we’ll use these to add a couple of divs to anchor the fields in the position we like.

I’ll use hook_form_alter() to modify the comment form on the Article nodes like so:

function hook_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    case 'comment_node_article_form':
    // here comes the rest of the php stuff
      break;
  }
}

This function we’ll check for the right form and if it finds it, allow us to modify it. So the next step is to retrieve the name of the form elements around which we’d like the divs. Using the krumo() function of the Devel module I found that the respective names are 'author' and 'subject'.

So now all we have to do is define the #prefix and #suffix properties by inserting the following code in the middle of the function above, right below where it says here comes the rest of the php stuff:

$form['author']['#prefix'] = '<div class="first">';
$form['author']['#suffix'] = '</div>';
$form['subject']['#prefix'] = '<div class="last">';
$form['subject']['#suffix'] = '</div><div class="clearfix"></div>';

As you can probably understand for yourself, we are opening a div with the class of first right before the 'author' element and closing it right after. Next, we open another div with the class last before the 'subject' element and we close it right after. Since we are going to float these, we’ll also add another div after the 'subject' element with the clearfix class (I suppose you already know what that should be).

What’s left to do is define the first and last classes in our stylesheet and everything should be in order:

.first {
  float:left;
  width:45%;
}
.last {
  float:right;
  width:45%;
}

You can of course define these however you want - after all it is about your own layout. And that’s it.

Make sure you clear your cache so the hook gets called and it should be fine. And don’t forget, this also works when creating your own custom form.