Custom Layouts for Webforms in 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

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sarmad Alsaadi

these are great tutorials, especially the jQuery and the webform layout. Can webform be used as a content type as long as it provides a form

steve

@sarmadalsaadi Yes, by default, Webform is a content type.

Sarmad Alsaadi

Thanks, Ok, but why people use content type and not webform. Is webform more flexible than using content type…… probably content type provide more options like translatability

steve

Yes, that approach sticks much more closely to the Drupal core than Webform does.

Sarmad Alsaadi

Thanks Steve.

5
0
Would love your thoughts, please comment.x
()
x