Formdazzle!
Provides useful theme suggestions for Drupal forms, making form theming significantly easier and less time-consuming.
formdazzle
インストール
composer require 'drupal/formdazzle:^4.0'
composer require 'drupal/formdazzle:^3.0'
composer require 'drupal/formdazzle:^2.1'
概要
Formdazzle!は、Drupalフォームのテーマ設定という困難なタスクを簡素化するモジュールです。ボタンやラベルを含むすべてのフォーム要素に意味のあるテーマサジェスチョンを自動的に追加し、カスタムテンプレートで特定のフォーム要素をターゲットにすることが非常に簡単になります。
Drupal Coreはinput.html.twigやinput--textfield.html.twigのような基本的なテーマサジェスチョンしか提供しませんが、Formdazzleはinput--textfield--[form-id].html.twigやinput--textfield--[form-id]--[element-name].html.twigのようなフォーム固有および要素固有のサジェスチョンでこれを拡張します。
また、このモジュールはTwigデバッグを強化し、Drupal Coreがデフォルトで表示しない非表示のテンプレートサジェスチョンに関するコメントをフォームに追加します。
Features
- ボタン、テキストフィールド、セレクト、チェックボックスなど、すべてのフォーム要素に対するテーマサジェスチョン
- すべてのフォーム要素ラベルに対するテーマサジェスチョン
- フォームIDとフォーム要素名の両方を含む正確なターゲティング用サジェスチョン（例：input--textfield--contact-form--first-name.html.twig）
- フォームのテンプレートサジェスチョンを表示するTwigデバッグコメントの強化
- 簡略化されたフォームIDサジェスチョンによるWebformフォームの特別処理
- サジェスチョンにView名とdisplay IDを含むViews exposed formの特別処理
- すべてのform_alterフックの後に実行されるpre-renderコールバックを使用した非侵入的な実装
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.