Form in modal dialog: Template suggestions have weird random suffix

Drupal Answers Asked by Travis Miller on October 1, 2020

My custom module has the following form route in mymodule.routing.yml:

  path: 'library/add-to-slideshow-modal/{library_asset_nid}'
    _form:  'Drupallibrary_assetsFormAddAssetToSlideshow'
    _title: 'Add to Slideshow'
    _permission: 'access content'

And I have a link (in another form) which opens this form in a modal dialog:

$asset_display_title = $this->node->field_la_display_title->value;
$modal_form_url = Url::fromRoute('library_assets.add_asset_to_slideshow_modal', [
    'library_asset_nid' => $this->node->id(),

$form['actions']['add_asset_to_slideshow'] = [
    '#type' => 'link',
    '#title' => $this->t('Add to Slideshow'),
    '#url' => $modal_form_url,
    '#attributes' => [
        'class' => [
        'data-dialog-type' => 'modal',
        'data-dialog-options' => json_encode(['title' => $asset_display_title, 'width' => 600]),

All of this is working – the form modal appears when I click on the "Add to Slideshow Link"; it validates correctly; the form submit handler works properly, etc.

But I’m having problems theming the form. When I inspect the contents of the modal to see the template suggestions, I see this:

   * form--add-asset-to-slideshow--pv65ooQgrPE.html.twig
   x form.html.twig

The pv65ooQgrPE part is different every time – it seems to be randomly generated (maybe a hash of some kind?).

I obviously can’t create a template file if the filename is essentially random every time.

I tried omitting the suffix, and creating a template named form--add-asset-to-slideshow.html.twig – but that doesn’t work.

What’s going on here? Is this an intentional feature of Drupal? (If so, where is the documentation? I’ve been unable to find it.)

Most importantly, though: what’s the proper way to theme my form, in this situation?


One Answer

  1. Create a .module in your module folder ex : library_assets/library_assets.module

  2. in the .module file use this HOOK to create a new form suggestion that will be dynamically equal to form--{form-id}.html.twig

 1. Implement {module_name}_theme_suggestions_form_alter
function library_assets_theme_suggestions_form_alter(array &$suggestions, array $variables) {
  //Get the form id
  // ! - you must replace the '-' with '_' in the suggestion name otherwise it won't work.
  $form_id = str_replace('-', '_', $variables['element']['#id']);

  // adding a new suggestion to the form template
  $suggestions[] =  'form__'.$form_id;
  1. now clear the cache and inspect the code again and you'll find a new theme suggestion = form--{form-id}.html.twig enter image description here

Answered by Marwen Amri on October 1, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP