Custom Layouts for Webforms in Drupal

| Drupal
Custom Layouts for Webforms with Webform Layout Module for Drupal 7

One of our users asked for a way to customize the layout of his Drupal 7 webforms.

Webform Layout is a module that extends Webform's features by providing more control over the design.

In this post, I'll share with you how to use Webform Layout module. Let's start...

Step #1. Build your webform

Create your webform. If you’re new to Webform module, we have a tutorial that will help you get started.

In this example, I built a simple form with 4 components:

  • Name
  • Email
  • Subject
  • Message
Creating a webform in Drupal 7
  • By default, this is how the webform looks for the public. Every field is displayed in its own row:
A completed Drupal 7 webform

Step #2. Install and enable Webform layout module

Download the Webform Layout Module

Install Webform layout module:

  • Go to Modules.
  • Click "Install new module" and upload the file you just downloaded.
  • After the installation is done, click on "Enable newly added modules".
  • Look for "Webform layout" box and check it.
  • Scroll down and click "Save configuration".

Step #3. Create a Layout box component

Webform Layout will add a new component type named "Layout box" that will help us to group other components.

  • Edit your webform.
  • Add a new component and type a name.
  • Choose "Layout box" as type.
  • Click "Add".
Adding layout boxes in the Webform Layout Module
  • Set Alignment to "Horizontal".
  • Click "Save component".
Set the alignment inside Webform Layout Module

Step #4. Set the layout box as parent

In this example, I want to display Name, Email and Subject fields in the same row.

  • Drag-and-drop the layout box up to the top:
Drag-and-drop the layout box
  • Now, drag-and-drop the first 3 fields to the right, so they will now be child items of the layout box.
drag-and-drop the first 3 fields in the Webform Layout Module for Drupal 7
  • Click Save when you're done.
  • Repeat step 3 and 4 if you need to group more elements.

Step #5. End result

Preview your webform to see layout box in action. Name, Email and Subject are displayed in the same row.

A completed webform using the Webform Layout Module

Note: if you are using Bartik or another theme without responsive support, you may require a custom width value for the grouped components, so the all combined widths will fit in the layout box.

A custom width value in the Webform Layout Module

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.