Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

How to Add a WordPress Login Form

Last Updated: September 15, 2022

Knowledge Base → WordPress User Registration Forms → How to Add a WordPress Login Form
— Requires User Registration add-on —
Subscribe on YouTube

Publish a WordPress login form on any page, post, or widget on your site. You may:

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
  • Insert the login shortcode with a block
  • Insert the login shortcode manually
  • Use the shortcode builder
  • Use the Login Form widget

Insert login shortcode with a block

  1. 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.
    Publish form Block Add Shortcode Editor
  2. You may insert the following shortcode on a page or post.
    [frm-login]

    Login form Insert Shortcode Block

Insert the custom login form manually

You may insert the following shortcode on a page, post, or text widget to display a login form.

[frm-login]

This shortcode will display a login form on the front-end of your site.
Login Form

Label parameters

  • label_username: Change the label of the username field.
    [frm-login label_username="Username"]
  • label_password: Change the label of the password field.
    [frm-login label_password="Password"]
  • 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.
    [frm-login label_log_in="Login"]
  • label_log_out: Change the label of the logout link.
    [frm-login label_log_out="Logout"]

Field value parameters

  • value_username: Insert a default value into the username field.
    [frm-login value_username="Username"]
  • value_remember: Check the remember me checkbox by default.
    [frm-login value_remember=1]
  • username_placeholder: Set placeholder text in the Username field.
    [frm-login username_placeholder="Username"]
  • password_placeholder: Set placeholder text in the Password field.
    [frm-login password_placeholder="Password"]

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.
    [frm-login class="class_name_here"]
  • class_remember: Replace the default classes on the Remember Me checkbox.
    [frm-login class_remember="class_name_here"]
  • class_lost_password: Replace the default classes on the Lost Password link.
    [frm-login class_lost_password="class_name_here"]

Show elements parameters

  • remember: Show the checkbox to remember your users. Defaults to show it. Hide with remember=0.
    [frm-login remember=0]
  • show_lost_password: Add a 'Forgot your password?' link to the login form.
    [frm-login show_lost_password="1"]
  • show_labels: Hide the Username and Password field labels.
    [frm-login show_labels="0"]
  • show_messages: Prevent failed login messages from showing in the login form. By default, messages will appear in the form when login fails.
    [frm-login show_messages="0"]

Miscellaneous parameters

  • 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 https://www in the URL. Security settings on some hosting providers see this as an external link and block the redirect.
    [frm-login redirect="yoursite.com/page"]
  • 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 https://www in the URL. Security settings on some hosting providers see this as an external link and block the redirect.
    [frm-login logout_redirect="yoursite.com/page"]
  • slide: Set your form to be hidden and require a click to show it.
    [frm-login slide=1]
  • style: Use Formidable styling on your form. This is on by default. Disable Formidable styling with style=0.
    [frm-login 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.

  1. Go to a WordPress page or post.
  2. Click on the 'Formidable' button above the content box.
    Publish Form Add Form
  3. Click the 'Login Form' menu item.
  4. Configure the settings you would like for your login form.
    Add WordPress Login Form
  5. Click the 'Insert into Post' button.

Add a login widget

You may use the 'Login Form' widget to add a login form to your sidebar or footer.

  1. In your WordPress Admin, go to 'Appearance' → 'Widgets'.
  2. Drag the 'Login Form' widget into the sidebar or footer.
    Login Widget
  3. Set the title, labels, styling, and other settings.
    Register Widget

If you don't want this login widget to display on all pages, you may install the Display Widgets plugin for additional widget settings.

Global 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.
Login Form Registration Global Pages

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.

  1. Go to Formidable → Styles.
  2. Create a new Style.
    Register Style Select
  3. Open the "General" tab. Set the max-width to 600px. This can be adjusted as needed.
    Register Style General Register Style Button

  4. 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.
  5. Configure other style settings as needed.
  6. 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.

  1. Go to Formidable → Styles.
  2. Select the Style you would like to apply to your login form.
    Register Style Select Register Style Class Arrow

  3. Scroll down to the bottom of the page. Copy the CSS class for your Style.
  4. Add class="frm_style_formidable-style" to your login form shortcode. Replace frm_style_formidable-style with your Style's CSS class name.
    [frm-login class="frm_style_formidable-style"]

    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"]

Dynamic redirects

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.

https://yoursite.com/login-page/?redirect_to=/special-page

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.

Troubleshooting

Wrong redirect after login

If you are redirected to another page after logging in, it is likely due to a plugin conflict like a security plugin, coming soon plugin, or another plugin that forces login like Jetpack. You can either disable it or change the settings to prevent the redirect.

If you are using Jetpack, go to its Settings → Security page and disable the Allow users to log in to this site using WordPress.com accounts option to prevent the [frm-login] shortcode from redirecting.

PHP Alternative

FrmRegShortcodesController::do_login_form_shortcode( array() );

The [frm-login] shortcode maps to a function. To call the shortcode function directly, use this PHP alternative.

Related Articles

  • How to Enable User Registration in WordPress How to Enable User Registration in WordPress
    Read More
    WordPress custom login page How to Build a WordPress Custom Login Page
    Read More
    How to create a login and registration form in WordPress How to Create a Login and Registration Page in WordPress
    Read More
  • How to Create a Custom Login Form in WordPress How to Create a Custom Login Form in WordPress
    Read More

Related Topics

  • Create a WordPress Reset Password page
  • WordPress User Registration Forms
  • Insert login shortcode with a block
  • Insert the custom login form manually
    • Label parameters
    • Field value parameters
    • CSS class parameters
    • Show elements parameters
    • Miscellaneous parameters
  • Use the shortcode builder
  • Add a login widget
  • Global Settings
  • Create a login form style
  • Set the login style
  • How to set placeholders
  • Dynamic redirects
  • Add reCAPTCHA to login page
  • Troubleshooting
    • Wrong redirect after login
  • PHP Alternative
  • Related Articles
  • Related Topics
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form. Maybe you need to log in?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews