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
- 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.
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
@sarmadalsaadi Yes, by default, Webform is a content type.
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
Yes, that approach sticks much more closely to the Drupal core than Webform does.
Thanks Steve.