Override form element twig template

Question

I want to override the twig template for specific fields on a form which I created via the Contact module in Drupal 8.

However, I can't find any documentation, and the suggestions in the HTML comments also doesn't show me anything useful.

Basically I want to override, a custom field (field_phone) and a standard field (Sender name) on a specific contact form the following values:

• form-element.html.twig
• form-element-label.html.twig
• input.html.twig

Is that possible? And what are the file name suggestions?

Answer 1

The Drupal Themable Forms module adds some helpful theme suggestions for form elements that are missing from core.

The added theme suggestions for form elements are:

  form-element--[form-id]--[element-type].html.twig
  form-element--form-id--[form-id].html.twig
  form-element--type--[element-type].html.twig
  form-element.html.twig

Answer 2

No need to install an extra module, you could just add the suggestions by yourself:

file: MYMODULE.module

function MYMODULE_theme_suggestions_form_element_alter(array &$suggestions, array $variables, $hook) {
  if ( $variables['element']['#id'] === 'FORMID') {
    $suggestions[] = $hook . '__custom';
  }
}

this will make Drupal look for a twig file named 'form-element--custom.html.twig'

$hook is 'form_element' in this case, as we are explicitly hooking into it, the function name is 'MYMODULE_theme_suggestions_HOOK_alter', but you could just choose any arbitrary name for the template file, i just tried to stick to the Drupal naming conventions.

To find out the FORMID for your specific form just add the following line as the first line of the function and then inspect the element in the browser, there you will see an html comment with the name of the form.

  print '<-- FORMID:'.$variables['element']['#id'].'-->';

Answer 3

A more generic approach:

function MYTHEME_theme_suggestions_form_element_alter(array &$suggestions, array $variables, $hook) {
  $suggestions[] = $hook . '__' . $variables['element']['#id'];
  $suggestions[] = $hook . '__' . $variables['element']['#type'];
}