How do I theme a custom form?

Question

I generate a simple module "myformtest" with a simple Class form "MyformtestForm". I want to use a different theme for the form.

I followed this great tutorial. I added a "_theme_suggestions_alter" hook in my "myformtest.module", I activated twig debugging and I loaded the form page.

My "suggestion theme" is present and its name is "form--myformtest-form.html.twig". Then in my module directory:

• I added a sub-directory "templates"
• I added the twig file "form--myformtest-form.html.twig" in the sub-directory "drupal/modules/custom/myformtest/templates"

In the twig file, I added this simple code. (I copied it from the drupal/core/themes/classy/templates/form/form.html.twig and added the h1 html element for override)

<h1>TEST</h1>
<form{{ attributes }}>
    {{ children }}
</form>

I clear caches (drush cr) and I reloaded my form page. But the html element h1 ("TEST") doesn't appear! Where is my mistake?

UP

I did it ! I added the hook theme in my .module file :

function myformtest_theme($existing, $type, $theme, $path)
{
  return array(
    'form__myformtest_form' => array(
      'render element' => 'form',
      'template' => 'form--myformtest-form',
    ),
  );
}

But.... ! When I load my form page, the html element h1 "test" is displayed but not the form :/ I thinked my .twig file override the form.html.twig default theme.

Did I miss something ? Why the form doesn't displayed, how can I fix it ? And how can I pass a custom array from my build method of form Class to my twig template ?

Answer 1

I've just been encountering a similar problem. And solved it like following.

In my MYMODULE.module file:

function MYMODULE_theme($existing, $type, $theme, $path) {

  return [
    'mythemename' => [
      'render element' => 'form',
      'template' => 'my-template-name',
    ],
  ];
}

In the $form:

$form['#theme'] = 'mythemename';

And finally in the my-template-name.html.twig template:

<div class="someclass">
  {{ form }}
</div>

Answer 2

The form element already has a base template.

To override the base template you will need to add twig file in your theme's templates directory.

The template directory in modules exists to provide base templates.

Answer 3

I think you need to copy the content of form.html.twig file to your custom template. Then you can make further changes in your custom template. This way, your form should render on the page.

Answer 4

This is the solution :

I don't understand why copy and past the default form twig content doesn't work. (why attributes and children variables doesn't work)

I dumped all availables twig variables from my custom template (via {{ dump() }} ) . I see I had a array named "element"..I tried this and its work ! the form is displayed.

This is the code of my custom form template :

<h1>TEST</h1>
<form{{ element }}></form>