Formdazzle!
Provides useful theme suggestions for Drupal forms, making form theming significantly easier and less time-consuming.
formdazzle
Install
composer require 'drupal/formdazzle:^4.0'
composer require 'drupal/formdazzle:^3.0'
composer require 'drupal/formdazzle:^2.1'
Overview
Formdazzle! is a Drupal module that simplifies the challenging task of theming Drupal forms. It automatically adds meaningful theme suggestions to all form elements, including buttons and labels, making it much easier to target specific form elements with custom templates.
While Drupal core only provides basic theme suggestions like input.html.twig and input--textfield.html.twig, Formdazzle extends this with form-specific and element-specific suggestions such as input--textfield--[form-id].html.twig and input--textfield--[form-id]--[element-name].html.twig.
The module also enhances Twig debugging by adding comments to forms for hidden template suggestions that Drupal core doesn't display by default.
Features
- Theme suggestions for all form elements including buttons, textfields, selects, checkboxes, etc.
- Theme suggestions for all form element labels
- Suggestions include both form ID and form element name for precise targeting (e.g., input--textfield--contact-form--first-name.html.twig)
- Enhanced Twig debugging comments showing template suggestions for forms
- Special handling for Webform forms with simplified form ID suggestions
- Special handling for Views exposed forms including View name and display ID in suggestions
- Non-intrusive implementation using pre-render callbacks to run after all form_alter hooks
Use Cases
Styling a specific form field
Create a template file like input--textfield--contact-form--email.html.twig to customize the appearance of just the email field on your contact form, without affecting other textfields.
Theming all fields in a specific form
Create input--textfield--user-login-form.html.twig to style all textfields within the login form, or form-element--user-login-form.html.twig for all form element wrappers.
Custom Webform field templates
For a Webform with machine name 'feedback', create templates like input--textfield--webform-feedback--comments.html.twig to target specific Webform fields.
Views exposed filter theming
Style the exposed filters for a specific View using templates like input--textfield--views--search--page-1.html.twig where 'search' is the View ID and 'page-1' is the display ID.
Debugging form template suggestions
With Twig debugging enabled, view the HTML source to see comments listing all available template suggestions for forms, including suggestions that Drupal core doesn't display by default.
Tips
- Enable Twig debugging in development.services.yml to see all available theme suggestions in your HTML source
- Theme suggestions follow the pattern: [element-type]__[form-id]__[element-name].html.twig
- For Views exposed forms, the pattern uses the View ID and display ID instead of 'views_exposed_form'
- For Webforms, the pattern uses 'webform_[machine-name]' for cleaner suggestions
- The module sets its weight to 10 during installation to ensure it runs after other modules
- No configuration is needed - the module works automatically once enabled
- The module uses pre-render callbacks to ensure suggestions are added after all form alterations are complete
Technical Details
Hooks 3
hook_module_implements_alter
Ensures formdazzle's form_alter implementation runs last, after all other modules have altered the form. This allows Formdazzle to add suggestions to the final form structure.
hook_form_alter
Adds a pre-render callback to all forms. Instead of altering forms directly, Formdazzle waits until the pre-render phase to add theme suggestions, ensuring all other alterations are complete.
hook_preprocess_HOOK (form_element)
Adds theme suggestions to form element labels. The label's #theme property cannot be altered until this function because it is unconditionally created in template_preprocess_form_element().
Troubleshooting 3
Ensure Twig debugging is enabled in your development.services.yml file. Set 'debug: true' under twig.config.
Clear the Drupal cache after creating new template files. Use 'drush cr' or clear cache via admin UI.
The module adds suggestions during the pre-render phase. If a form bypasses normal rendering, suggestions may not be added.