Problems with Password Protected Page Customization

I have password protected pages but the field is not marked with a box. I found in the documentation that you can customize them using this code:

<?php add_filter( 'the_password_form', 'custom_password_form' ); function custom_password_form() { global $post; $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID ); $o = '<form class="protected-post-form" action="' . get_option('siteurl') . '/wp-pass.php" method="post"> ' . __( "This post is password protected. To view it please enter your password below:" ) . ' <label for="' . $label . '">' . __( "Password:" ) . ' </label><input name="post_password" id="' . $label . '" type="password" size="20" /><input type="submit" name="Submit" value="' . esc_attr__( "Submit" ) . '" /> </form> '; return $o; } ?>

When I add it to my theme’s function.php file it does add a box around the password field but then when I enter the password it does not display the protected content.

Here is one of the pages that is password protected https://cmproficiency.com/cmpro-community/cmpro-tutorials-active/. I do not have the above code on the function.php file right now because I need people to be able to access the content.