4

I'm trying to customize my user login page in my custom theme using the template file page--user--login.html.twig, but am having issues accessing the different form elements. All aspects of the form are located in page.content, but I'd like to edit the content that's being outputted.

For a simple example, the base theme has Username and Password stacked vertically, where I'd like to adjust this to use bootstrap so that they are stacked horizontally on large screen and vertically on mobile.

In Drupal 7, we had a form element in the template file that allowed me to render certain form elements separately, like:

<div class="col-sm-12 col-lg-6">
  <?php print drupal_render($form['name']); ?>
</div>
<div class="col-sm-12 col-lg-6">
  <?php print drupal_render($form['pass']); ?>
</div>

Is there an equivalent for Drupal 8?

I attempted to create a template file for the form (form--user-login.html.twig and form--user-login-form.html.twig) to see if I could alter the form template itself instead of the page the form exists on, but didn't have any luck with that.

I'd prefer to override the current login theme instead of creating a whole new page and form and have to add all the necessary configurations so that a user lands on the correct login page, but have yet to find any way to do so, thanks in advance.

1

2 Answers 2

3

if you overrided correctly element will contain all items in form--user-login.html.twig,

<div class="login-form login-form__wrapper">
    <form{{ attributes }}>
        <div class="login-form__top">
            <h3>hello world</h3>
            <div id="error_messages"></div>
            {{ element.messages }}
            {{ element.name }} {# username element #}
            {{ element.pass }} {# password element #}
            <div class="login-form__help_actions">
                <input id="show_password" class="show_password" type="checkbox" />
                <label class="password-toggle" for="show_password">Show password</label>
                <a href="/user/password" class="forgot-password">Forgot Password?</a>
            </div>
            {{ element.form_build_id }} {# required #}
            {{ element.form_id }} {# required #}
            <div class="login-form__submit">
                {{ element.actions.submit }}
            </div>
        </div>
    </form>
</div>

if the template is not valid, you should try to add it.

function Yourtheme_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {

  if ($hook == 'form' & !empty($variables['element']['#id'])) {
    $suggestions[] = 'form__' . str_replace('-', '_', $variables['element']['#id']);
  }
}

then create form--user-login-form.html.twig in your theme.

do not forget to clear the cache.

3

In addition to Yuseferis answer:

I'm using this function to add theme suggestions for forms in Drupal 10:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for form templates.
 * 
 * Make forms themeable:
 * e.g. => form--user-login-form.html.twig
 */
function YOURTHEME_theme_suggestions_form_alter(array &$suggestions, array $variables) {
  if (!empty($variables['element']['#form_id'])) {
    $suggestions[] = 'form__' . $variables['element']['#form_id'];
  }
}
1
  • oh my god. I was banging my head as to why my Drupal 9 snippet to show form suggestions wasn't working. Thanks for the saving.
    – pierostz
    Nov 18, 2023 at 9:45

Your Answer

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