Login Form
Use Login Form to add a front-end login and logout form with configurable fields, icons, and post-submit redirects.
Usage​
Use Login Form to add an AJAX-powered login form to any layout. The module renders username and password inputs with optional icons, a Remember Me checkbox, and a forgotten password link, then signs the user in through wp_signon(). When the visitor is already authenticated, the module switches to a logout button that ends the session and follows the configured redirect.
Use Login Form on membership pages, restricted-content gates, course portals, and custom account areas where the standard wp-login.php page does not match the site design. It fits inline header logins, dedicated sign-in pages, and any layout that needs a styled, themer-friendly alternative to the default WordPress login screen.
Module Settings​
The Login Form module settings control the form layout, input labels and icons, redirect behavior, and the appearance of the login and logout buttons.
General Tab​
The General tab sets the form structure, the username and password fields, and the icon styling shared by both inputs.
Layout Default: Stacked
Sets how the username and password inputs are arranged.
- Stacked: Stacks each input on its own row with optional labels, the Remember Me checkbox, and the forgotten password link.
- Inline: Places the inputs and submit button on a single row. Labels are hidden in this layout, and the Remember Me and forgotten password options are not available.
Show Input Label Default: Yes
Shows or hides the visible labels above the username and password inputs. This field is available when Layout is set to Stacked. Selecting Yes also reveals the Labels group in the Style tab.
Show Remember Login Default: Yes
Shows or hides the Remember Me checkbox below the inputs. This field is available when Layout is set to Stacked.
Remember Me Text
Remember Me Text Default: Remember Me
The label displayed next to the Remember Me checkbox when Show Remember Login is set to Yes.
Show Forget Password Link Default: Yes
Shows or hides a link to the WordPress lost password screen. This field is available when Layout is set to Stacked.
Forget Text Position
Forget Text Position Default: Beside Remember Me
Sets the placement of the forgotten password link when Show Forget Password Link is set to Yes.
- Beside Remember Me: Displays the link inline next to the Remember Me checkbox.
- Below Login Button: Displays the link on its own line below the login button.
Forgotten Password Text
Forgotten Password Text Default: Forgotten Password
The text used for the forgotten password link when Show Forget Password Link is set to Yes.
Name Field
The Name Field section controls the username input label and its optional icon.
Name Field
Name Field Text Default: Username
The text used for the username field label and placeholder.
Icon Supports: Field Connections
Adds an optional icon inside the username field.
Color
Color Supports: Field Connections
The color applied to the username field icon.
Password Field
The Password Field section controls the password input label and its optional icon.
Password Field
Password Field Text Default: Password
The text used for the password field label and placeholder.
Icon Supports: Field Connections
Adds an optional icon inside the password field.
Color
Color Supports: Field Connections
The color applied to the password field icon.
Icon
The Icon section controls placement and sizing for the username and password field icons. This section is available when an icon is selected for either field.
Icon
Icon Position
Places the icon before or after the input text.
- Before: Aligns the icon to the start of the input.
- After: Aligns the icon to the end of the input.
Size Default: 16
The size of the field icons. Accepts px, em, or rem values.
Top Spacing
The vertical offset of the icon inside the input. Use this to fine-tune alignment when the icon does not sit centered with the field text.
Style Tab​
The Style tab controls the appearance of labels, inputs, and the shared button typography for the login and logout buttons.
Labels
The Labels section is available when Show Input Label is set to Yes in the General tab.
Labels
Padding Supports: Responsive, Link Values
The inner spacing around each input label.
Color Supports: Field Connections
The text color of the input labels.
Typography Supports: Responsive
The font settings for the input labels.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Inputs
The Inputs section controls the appearance of the username and password text inputs.
Inputs
Padding Supports: Responsive, Link Values
The inner spacing of the username and password inputs.
Color
The text and placeholder color of the inputs.
Typography Supports: Responsive
The font settings for the input text.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Background Color Supports: Field Connections
The background color of the inputs.
Background Hover Color Supports: Field Connections
The background color used when the inputs are hovered or focused.
Border
The border style, width, radius, and color for the inputs.
Border settings
Border settings control border style, width, color, radius, and related responsive border controls where available.
Border Hover
The border style used when the inputs are hovered or focused.
Buttons
The Buttons section controls the shared padding, text color, and typography applied to both the login and logout buttons.
Buttons
Padding Supports: Responsive, Link Values
The inner spacing of the login and logout buttons.
Color Supports: Field Connections
The text color of the login and logout buttons.
Text Hover Color Supports: Field Connections
The text color of the login and logout buttons on hover and focus.
Typography Supports: Responsive
The font settings for the login and logout button text.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Login Button Tab​
The Login Button tab sets the submit button text, the post-login redirect, and the button-specific icon, layout, background, and border styling.
Button Text Default: Login
The label displayed on the login submit button.
Redirect To Default: URL
Determines where the visitor is sent after a successful login.
- URL: Redirects to the URL set in Redirect URL.
- Current URL: Reloads the current page.
- Referrer URL: Sends the visitor back to the page they came from.
- Show Message: Replaces the form with a success message.
Redirect URL
Redirect URL Supports: Field Connections
The destination URL used after login when Redirect To is set to URL.
Link settings
Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.
Success Message
Success Message Default: You are logged in successfully!; Supports: Field Connections
The confirmation message displayed after login when Redirect To is set to Show Message. Uses the WordPress Classic Editor WYSIWYG.
Button Icon
The Button Icon section adds an optional icon to the login button and controls its placement and visibility.
Button Icon
Button Icon Supports: Field Connections
The icon displayed alongside the login button text.
Button Icon Position Default: Before Text
Places the icon before or after the button text when an icon is selected.
- Before Text: Displays the icon to the left of the button label.
- After Text: Displays the icon to the right of the button label.
Button Icon Visibility Default: Always Visible
Controls when the button icon is shown.
- Always Visible: Keeps the icon visible at all times.
- Fade In On Hover: Hides the icon until the button is hovered.
Button Style
The Button Style section controls the width and alignment of the login button.
Button Style
Button Width Default: Full Width
Sets the width of the login button.
- Auto: Sizes the button to fit its content.
- Full Width: Stretches the button to fill its container.
Button Align
Button Align Default: Left; Supports: Responsive
The horizontal alignment of the login button when Button Width is set to Auto.
Button Background
The Button Background section controls the default and hover background colors of the login button.
Button Background
Button Background Color Supports: Field Connections
The background color of the login button.
Button Background Hover Color Supports: Field Connections
The background color of the login button on hover and focus.
Button Border
The Button Border section controls the border styling of the login button.
Button Border
Button Border Supports: Responsive
The border style, width, radius, and color of the login button.
Button Border Hover Color Supports: Field Connections
The border color of the login button on hover and focus.
Logout Button Tab​
The Logout Button tab controls the button shown to authenticated visitors and the redirect that runs after logout.
Show Logout Button Default: Yes
Shows or hides the logout button for authenticated visitors. Selecting Yes reveals the button text, redirect URL, and the button icon, style, background, and border sections.
Button Text
Button Text Default: Logout
The label displayed on the logout button.
Redirect URL
Redirect URL Supports: Field Connections
The destination URL used after logout.
Link settings
Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.
Button Icon
The Button Icon section adds an optional icon to the logout button and controls its placement and visibility. This section is available when Show Logout Button is set to Yes.
Button Icon
Button Icon Supports: Field Connections
The icon displayed alongside the logout button text.
Button Icon Position Default: Before Text
Places the icon before or after the button text when an icon is selected.
- Before Text: Displays the icon to the left of the button label.
- After Text: Displays the icon to the right of the button label.
Button Icon Visibility Default: Always Visible
Controls when the button icon is shown.
- Always Visible: Keeps the icon visible at all times.
- Fade In On Hover: Hides the icon until the button is hovered.
Button Style
The Button Style section controls the width and alignment of the logout button. This section is available when Show Logout Button is set to Yes.
Button Style
Button Width Default: Full Width
Sets the width of the logout button.
- Auto: Sizes the button to fit its content.
- Full Width: Stretches the button to fill its container.
Button Align
Button Align Default: Left; Supports: Responsive
The horizontal alignment of the logout button when Button Width is set to Auto.
Button Background
The Button Background section controls the default and hover background colors of the logout button. This section is available when Show Logout Button is set to Yes.
Button Background
Button Background Color Supports: Field Connections
The background color of the logout button.
Button Background Hover Color Supports: Field Connections
The background color of the logout button on hover and focus.
Button Border
The Button Border section controls the border styling of the logout button. This section is available when Show Logout Button is set to Yes.
Button Border
Button Border Supports: Responsive
The border style, width, radius, and color of the logout button.
Button Border Hover Color Supports: Field Connections
The border color of the logout button on hover and focus.
Advanced tab​
The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.
See the Advanced tab section for more information.