What would be the best way to make a custom registration twig template ?

I have implemented the hook :

function THEMENAME_theme_suggestions_form_alter(array &$suggestions, array $variables) {
    $suggestions[] = 'form__' . $variables['element']['#form_id'];

Si I get form twig template suggestions such as form--user-register-form.html.twig

Then I can call every value I want using "element" :

{{ element.field_name }}

My only problem is that I'm facing error with fields validation with ajax i.e for the picture field, when uploading a picture I got an error message that the picture size overpass the php limitsize from the server (which is obviously not the case).

So I have to call {{ children }}in my twig template to get it working properly. The only bad point is that calling {{ children }} actually call the whole form ......

Am I doing something wrong ? Is it the best way to accomplish stuff above ? Is it {{ children }} that I have to call to get the form working ?

1 Answer 1


For simple forms ...

... you can theme a form template by using {{ element }} instead of {{ children }}, see How to Create twig template files in drupal 8 for customizing user login,profile edit and forget password forms?.

But this is not always the best approach, because it's difficult to include all form elements and metadata the form needs to operate.

For complex forms ...

... it might be easier to add an additional template level, which only has to render the inner form elements, not the complete form:

 * Implements hook_form_FORM_ID_alter() for \Drupal\user\RegisterForm.
function mytheme_form_user_register_form_alter(&$form, FormStateInterface $form_state) {
  $form['#theme'] = 'user_register_form';

The custom template needs to be registered in hook_theme. See How to render specific form elements from the *.theme file for a step-by-step example.

  • "But this is not always the best approach, because it's difficult to include all form elements and metadata the form needs to operate." Yes, this is exactly my problem and the best way I have is to call {{ children }} which actually call the entire form. In another way, is it possible to know which metadata are needed from the form to operate so I can call them myself.
    – Aporie
    Nov 9, 2017 at 12:40
  • Probably libraries and settings in #attached. But I never tried to locate all of the metadata, because there is an easier solution by theming only the inner part of the form (which BTW is what ends up rendered in {{ children }} of the form template). - In Drupal this is always the same problem, finding the right level in the myriads of nested templates.
    – 4uk4
    Nov 9, 2017 at 13:27
  • Ok, so I finally succeed to implement an over theme to theme the inner part of the form, but my only problem is all data are coming in an empty array and no way to get them ... I tried {{ 0.field_name }} {{ [].field_name }} {{ [0].field_name }}. Any idea ?
    – Aporie
    Nov 9, 2017 at 16:14
  • {{ form.field_name }}, if you followed the step-by-step example. form here is the render element defined in step 1. This is common practice in Drupal, but don't let this confuse you, the name form is also used for the theme hook of the outer template.
    – 4uk4
    Nov 9, 2017 at 16:30
  • Arfff I had made a mistake on the hook_theme function. Thanks you a lot for your patience.
    – Aporie
    Nov 9, 2017 at 16:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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