Custom registration twig template

Question

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 ?

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.