- Updates & Support
allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture”
title=”How to Build a Custom Login Page”
Publish a WordPress login form on any page, post, or widget on your site. You may:
Insert login shortcode with a block
- In the block editor, click the (+) add block button, scroll to the Widgets category and search for the Shortcode block. You can also type “Shortcode” in the search, and it should show up.
- You may insert the following shortcode on a page or post.
Insert the custom login form manually
You may insert the following shortcode on a page, post, or text widget to display a login form.
This shortcode will display a login form on the front-end of your site.
- label_username: Change the label of the username field.
- label_password: Change the label of the password field.
- label_remember: Change the label on the remember me checkbox
[frm-login label_remember="Remember Me"]
- label_lost_password: Change the text on the “Forgot your password?” link.
[frm-login label_lost_password="Lost password?"]
- label_log_in: Change the text on the login button.
- label_log_out: Change the label of the logout link.
Field value parameters
- value_username: Insert a default value into the username field.
- value_remember: Check the remember me checkbox by default.
- username_placeholder: Set placeholder text in the Username field.
- password_placeholder: Set placeholder text in the Password field.
CSS class parameters
- class: Apply a Formidable Style or your own CSS class to the login form. If no class is specified, the default Formidable style will be used.
- class_remember: Replace the default classes on the Remember Me checkbox.
- class_lost_password: Replace the default classes on the Lost Password link.
Show elements parameters
- remember: Show the checkbox to remember your users. Defaults to show it. Hide with remember=0.
- show_lost_password: Add a ‘Forgot your password?’ link to the login form.
- show_labels: Hide the Username and Password field labels.
- show_messages: Prevent failed login messages from showing in the login form. By default, messages will appear in the form when login fails.
- layout: Show the fields either horizontally or vertically.
[frm-login layout=h or layout=v]
- redirect: Redirect users to an internal page after logging in. WordPress security measures require that the redirected page is on the same site. Note: If the redirect doesn’t work, you could try removing in the URL. Security settings on some hosting providers see this as an external link and block the redirect.
- logout_redirect: Redirect users to an internal page after logging out. WordPress security measures require that the redirected page is on the same site. Note: If the redirect doesn’t work, you could try removing in the URL. Security settings on some hosting providers see this as an external link and block the redirect.
- slide: Set your form to be hidden and require a click to show it.
- style: Use Formidable styling on your form. This is on by default. Disable Formidable styling with style=0.
Use the shortcode builder
These instructions are meant to be used when using the Classic Editor. If you are using the Block Editor, please follow these instructions instead.
- Go to a WordPress page or post.
- Click on the ‘Formidable’ button above the content box.
- Click the ‘Login Form’ menu item.
- Configure the settings you would like for your login form.
- Click the ‘Insert into Post’ button.
You may use the ‘Login Form’ widget to add a login form to your sidebar or footer.
- In your WordPress Admin, go to ‘Appearance’ → ‘Widgets’.
- Drag the ‘Login Form’ widget into the sidebar or footer.
- Set the title, labels, styling, and other settings.
If you don’t want this login widget to display on all pages, you may install the Display Widgets plugin for additional widget settings.
After publishing the login form, configure the Global Registration Settings by going to Formidable → Global Settings → Registration. Then select the page where you have added the [frm-login] shortcode.
Create a login form style
We recommend creating a Style that is specific to your login form. Follow the instructions below to create a Style for your login form.
- Go to Formidable → Styles.
- Create a new Style.
- Open the “General” tab. Set the max-width to 600px. This can be adjusted as needed.
- Open the “Buttons” tab. Set the width to 100%. Adjust the button colors to match your site’s colors. Don’t forget to adjust the “Hover” and “Click” colors as well.
- Configure other style settings as needed.
- If you are publishing your login form with a shortcode, you can now set the Style to the one you just created.
Set the login style
Follow the steps below to set the Style for your login form.
- Go to Formidable → Styles.
- Select the Style you would like to apply to your login form.
- Scroll down to the bottom of the page. Copy the CSS class for your Style.
- Add class=”frm_style_formidable-style” to your login form shortcode. Replace frm_style_formidable-style with your Style’s CSS class name.
Do not include the period in the class name
How to set placeholders
You may use the following shortcode to remove the field labels from your login form and set placeholders instead:
[frm-login show_labels=”0″ username_placeholder=”Username” password_placeholder=”Password”]
If you’d like to redirect a user to a different page after log in, depending on where they started, you can do so using a custom link to the login page. Add the redirect_to param to the URL and set it to the page to which you want to redirect the user after log in.
Add reCAPTCHA to login page
If you’re using the [frm-login] shortcode to create your login form, it will honor any captcha settings from other plugins that you have configured to work with the regular WordPress login form. However, there isn’t yet a way to add a recaptcha with Formidable Forms.