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
- 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.
About the author
