Custom Layouts for Webforms in Drupal

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

• By default, this is how the webform looks for the public. Every field is displayed in its own row:

Step #2. Install and enable Webform layout module

• Download the Webform layout module from this page.

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”.

• Set Alignment to “Horizontal”.
• Click “Save component”.

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:

• Now, drag-and-drop the first 3 fields to the right, so they will now be child items of the layout box.

• 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.

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.