Webform Style Pack

Webform Style Pack adds 10 ready-made form designs and 5 email designs to Webform. Pick a design for all webforms, or a different design per webform, without writing CSS.

Form designs

• Outlined, Filled, Underline, Floating labels, Pill
• Card, Horizontal labels, Compact, Soft, Bold high contrast

Email designs

Notification and confirmation emails get a matching design: Simple, Branded header, Card, Receipt table or Minimal. Submitted values become clean labeled rows, sections become headings, and emails use tables and inline styles so they display well in Gmail, Outlook and Apple Mail.

Features

• No CSS framework, no JavaScript, no extra dependencies.
• Works with any theme, in light and dark color schemes.
• Accessible focus states, error states and color contrast.
• Site-wide default with per-webform overrides, or opt a webform out.
• Accent color, maximum width and full-width submit button options.
• Email logo and footer text.
• Each design loads only its own small stylesheet.

Getting started

1. Install with composer require drupal/webform_style_pack and enable the module.
2. Go to Structure » Webforms » Configuration » Forms » Third party settings and choose a design for all webforms.
3. Or edit one webform and go to Settings » General » Third party settings.

Requirements

Drupal 11.2 or later and Webform 6.3 or later.

Similar projects

Webform style adds per-field spacing and colors. Webform Style Pack provides complete, ready-made designs for the whole form and its emails.