Webform Style adds styling options such as margin, padding, and background color directly to individual form fields within the Webform module. This allows users to easily adjust the appearance of forms without needing to write custom CSS.
Webform Style extends the [Webform](https://www.drupal.org/project/webform) module by adding easy styling options like margin, padding, and background color to form fields — no custom CSS required.
Features
Webform Style is a lightweight add-on for the Webform module that allows site builders to apply visual styling directly to individual form fields. This eliminates the need for writing custom CSS or using custom templates for common layout and style changes.
Key functionality includes:
Add or update margin, padding, and background color directly from the field edit screen.
New options are available under the "Additional" tab for each field.
Makes forms more visually appealing and user-friendly without requiring front-end development knowledge.
Use cases:
Quickly adjust form spacing and layout to improve UX.
Match form appearance to site branding.
Apply color cues to highlight important sections of a form.
Post-Installation
Once installed and enabled:
1. Ensure the Webform module is already installed and active.
2. Go to any existing or new webform.
3. Edit a field and navigate to the "Additional" tab.
4. You’ll find options to set margin, padding, and background color.
5. No additional configuration pages are required.
These settings are saved per field, and are applied automatically to the rendered webform using inline styles.
Additional Requirements
Webform Module: This module depends on the [Webform](https://www.drupal.org/project/webform) module. Please install and enable it before enabling Webform Style.
Recommended Modules/Libraries
There are no specific required libraries, but the following modules may enhance your experience:
Webform UI/UX Enhancers: Modules that improve the layout or accessibility of webforms can work well in tandem with Webform Style.
Similar Projects
While the Webform Layout and Webform Custom Style modules offer some layout or styling control, Webform Style focuses on field-level visual customization (e.g., spacing and background color) directly through the admin UI, offering more granular control without custom code.
Community Documentation
A demo or walkthrough video will be available soon.
Want to contribute documentation or a tutorial? Open a PR or contact the maintainer.
Consider using [DrupalPod](https://www.drupalpod.com/) to test the module locally in seconds.