A webform’s layout can be controlled by PHP.

Say I want to take this webform…

Webform – before: the student’s name is on 3 separate lines

…and put the 3 Student’s name fields (Student’s first name, Student’s middle name & Student’s last name) on the same line together like this…

Webform – after: the student’s name is now on 1 line

To do this, I add the following PHP to my theme’s (“genchstyle”) template.php…

/*
*School Application Form
*/
/*This hook_theme function tells Drupal to find and use the following function
function genchstyle_theme($existing, $type, $theme, $path) {
  return array(
    'webform_form' => array(
      'render element' => 'form',
    ),
  );
}
/*This function outputs the 3 name fields, wrapped in div classes that will display them inline
function genchstyle_webform_form($variables) {
  $firstname = '<div class="grid_3 alpha">' . drupal_render($variables['form']['submitted']['students_first_name']) . '</div>';
  $middleinit = '<div class="grid_3">' . drupal_render($variables['form']['submitted']['students_middle_name']) . '</div>';
  $lastname = '<div class="grid_3">' . drupal_render($variables['form']['submitted']['students_last_name']) . '</div>';
  $everything_else = drupal_render_children($variables['form']);
  return $firstname . $middleinit . $lastname . $everything_else;
}

To make this work, I had to also change the width of each of the 3 fields and place the field labels above each field, using the Drupal admin interface (e.g., webform>Student’s first name>edit)…

Edit fields’ lengths

Width & Label Display

The form is still pretty ugly. This is just a practice exercise, but if it were for a real project, I’d probably create a variable for each field so I could control their placement. Even if I did this, I’d still need the $everything_else variable as it is not just rendering the remaining fields in the above example: it’s also rendering the “Next Page” button.