2

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?

  • 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 '16 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 '16 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 '16 at 1:18
5

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
  • Note that this currently does not work for targeting checkboxes in different forms. – Kevin Jun 19 '17 at 18:17
3

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 line

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

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.

  • 2
    Form ID is doesn't seem to be available inside this function – Michael Mallett Feb 8 '18 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). – Jean-Luc Barat Sep 5 at 12:51

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.