Using PHP to Control Layout of a Drupal Webform

A webform’s layout can be controlled by PHP.

Say I want to take this webform…

Webform - before

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

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

Edit fields’ lengths

Width & Label Display

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.

2 thoughts on “Using PHP to Control Layout of a Drupal Webform

  1. Natalia

    Hi there! Thank you very much for this tutorial! It was very handy. One thing though. This is pretty much equivalent to overriding webform-form.tpl.php as it will first display whatever we are trying to override, and then everything else.
    What if I don’t want to override just in the beginning, but some fields in the beginning of the form, some after certain other elements, and some on next page but without changing the order and rewriting every single field by hand ? Do you think it might be possible ? I am stuggling with this today, as I have a form that has more than 100 fields, and, obviously :), I don’t feel like re-rendering every single element.Thank you in advance and thanks again for the post!

    Reply
  2. abonham2012 Post author

    Natalia,

    Sorry for the delayed response: it’s been crazy here! Using fieldsets in your webform would let you group together individual fields that you don’t plan to change. So you might have something like…

    field1
    field2
    fieldsetA (contains field3, field4 & field 5)
    field6
    fieldsetB (contains field7, field8, field9 & field10)

    You should then be able to render the fieldsets similar to how we rendered the fields. Off the top of my head, I’m not sure of the precise syntax/path for webform fieldsets. It might be $variables[‘form’][‘submitted’][‘fieldsetA’]. Scrutinize the fieldset using the Theme Devel module: it will guide you.

    There may be a better solution – I’ll let you know if I find one.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s