Drupal 8 WebForm模板自定义求助：TWIG、SASS及自定义模块

Hey there! Great start with that hook_form_alter() attempt—let's break this down step by step to get you customizing WebForm exactly how you want, using both code and Twig/Sass.

First, let's confirm your module has the required files to work properly. Create these files in a folder named webform_example inside modules/custom/:

webform_example.info.yml #

This tells Drupal about your module and its dependencies:

name: WebForm Example
type: module
description: Customizations for the Contact WebForm
core_version_requirement: ^8 || ^9 || ^10
package: Custom
dependencies:
  - webform:webform

webform_example.module #

This is where your hook implementations will live (we'll update this next).

Your code was close, but there are a couple of tweaks needed for Drupal 8+:

• The third parameter is $form_id, not $id
• WebForm submission form IDs follow the pattern webform_submission_[webform_machine_name]_add_form
• Use \Drupal::t() for translation (or use the StringTranslationTrait for cleaner code)

Update your webform_example.module with this corrected code:

<?php

use Drupal\Core\Form\FormStateInterface;

/**
 * Implements hook_form_alter().
 */
function webform_example_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  // Target the exact submission form for your "contact_form" WebForm
  if ($form_id === 'webform_submission_contact_form_add_form') {
    // Update the name field's title
    $form['elements']['name']['#title'] = \Drupal::t('Full Name');
  }
}

Pro tip: Use the Devel module's dpm($form_id) to print the exact form ID if you're unsure what to target!

To tweak the HTML structure of your WebForm, you can override Twig templates in your custom module:

1. Create a templates folder inside your webform_example module.
2. Copy the base template from the WebForm module (found in modules/contrib/webform/templates/) to your templates folder.
   • For the entire form: Copy webform.html.twig and rename it webform--contact-form.html.twig (targets only your contact form)
   • For a specific field: Copy webform-element.html.twig and rename it webform-element--name--contact-form.html.twig (targets only the "name" field in your contact form)
3. Edit the copied template to adjust HTML, add classes, or rearrange elements as needed.

Don't forget to clear Drupal's cache after adding templates—Drupal needs to pick up the new template suggestions. You can enable Twig Debug mode (in sites/default/services.yml) to see all available template suggestions for your form/elements.

To style your WebForm with Sass, follow these steps:

1. Create a css folder in your module, and add a webform-example.scss file with your custom styles (e.g., .webform-submission-contact-form-add-form .form-item-name { margin-bottom: 2rem; }).
2. Compile your Sass to CSS (use tools like Gulp, Webpack, or Drupal's Sass Compiler module if you prefer a UI-based approach).
3. Create a webform_example.libraries.yml file to define your stylesheet:

webform-custom-styles:
  version: 1.x
  css:
    theme:
      css/webform-example.css: {}

4. Attach the library to your form. Add this to your webform_example.module:

/**
 * Implements hook_page_attachments().
 */
function webform_example_page_attachments(array &$attachments) {
  // Only attach styles when viewing your contact form's submission page
  $current_route = \Drupal::routeMatch()->getRouteName();
  $current_webform = \Drupal::routeMatch()->getParameter('webform');
  
  if ($current_route === 'entity.webform_submission.add_form' && $current_webform?->id() === 'contact_form') {
    $attachments['#attached']['library'][] = 'webform_example/webform-custom-styles';
  }
}

• Always clear Drupal's cache after making code/template/library changes—this is the #1 fix for "why isn't my change showing up?"
• Check WebForm's built-in UI first: You can adjust labels, styles, and form display directly from the WebForm edit page (under "Form display" and "Settings") without writing code.
• Use dpm($form) (with Devel enabled) to inspect the form array and confirm field keys before modifying them.

内容的提问来源于stack exchange，提问作者adrien jolion