wp_login_form display no styled form

Question

I've created a custom template for a custom theme, I need to show the vue app that will manage the front end only to logged users. I've used this code inside my functions.php file and it's supposed that I will have a custom login form.

functions.php

<?php 
/*
* Form customizzato per Login sito OH
*/
function custom_login_form(){
    ?>
        <style type="text/css">
            body {
                background-color: #fff !important;
            }
            #login h1 a {
                background-image: url('...');
                background-size: contain;
                height: 86px;
                width: 320px;
                background-position: center center;
                background-repeat: no-repeat;
            }
            #loginform {
                border-radius: 5% !important;
            }
            #nav {
                display: none !important;
            }
            #backtoblog a {
                display: none !important;
            }
            #language-switcher {
                display: none !important;
            }
        </style>
    <?php   
}
add_action('login_enqueue_scripts', 'custom_login_form');

?>

app.php template file

<?php 
/*
* Template name: App
*/
wp_head();

if( is_user_logged_in() ) {

?>
    <div id="app"></div>
<?php

} else {
    wp_login_form();
}

wp_footer();
?>

Is there something wrong in the code or I need to pass params to wp_login_form()?

Answer 1

The form appeared un-styled because the login_enqueue_scripts hook does not run on the front-end/non-admin side ( unless you do do_action( 'login_enqueue_scripts' ) in your template ).

So try using wp_head instead: add_action('wp_head', 'custom_login_form');.

You should also add the custom CSS only on the app page, or when the template being used is app.php. For example, you can add this check at the top in your custom_login_form function:

// Do nothing if the template is not app.php.
// This will work the file is at wp-content/themes/your-theme/app.php.
if ( ! is_page_template( 'app.php' ) ) {
    return;
}