5

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?

3
  • It should be field--field-phone.html.twig for field named field_phone. Copy the template from core/modules/system/templates/field.html.twig into your theme
    – user21641
    Jan 16, 2016 at 20:16
  • That I know, but I want it only for that form, not for everywhere the phone field is used.
    – pjcarly
    Jan 16, 2016 at 21:32
  • I guess I would use hook_form_FORM_ID_alter, find the field and set #theme to 'field__myphone_field' so that you can use field--myphone-field.html.twig template.
    – user21641
    Jan 17, 2016 at 1:18

3 Answers 3

7

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
3
7

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'].'-->';
2
  • 2
    Form ID is doesn't seem to be available inside this function Feb 8, 2018 at 0:58
  • In Drupal 8.5.x it leads to Notice: Undefined index: #id in custom_barrio_theme_suggestions_form_element_alter() (line 48 of themes/custom/custom_barrio/custom_barrio.theme). Sep 5, 2019 at 12:51
0

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'];
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.