How can I add a separate template for the user login form?

Question

So I want to create a separate user login page for my website.

I create a twig file called page--user--login.html.twig which is great for the outer container. I still want to edit the form divand or the block div. But with debugger on It doesn't give me suggestions for creating a custom form or block twig file just for just the login form.

I can create individual form elements for the login but I want to edit the form div or block div itself without affecting anything else.

Any suggestions?

Answer 1

You can add a theme name suggestion in a hook_theme_suggestions_HOOK_alter:

function mytheme_theme_suggestions_form_alter(&$suggestions, $variables) {
  if ($variables['element']['#form_id'] == 'user_login_form') {
    $suggestions[] = 'form__user_login_form';
  }
}

If you want to add suggestions for form elements you need some more code. See the file themable_forms.module from the module Themable forms. This is the only code file in this module and it is a good example how you can approach this in form alter, preprocess form element and theme suggestions hooks.