Add a login form to your site

Publish a login form on any page, post, or widget on your site. You may 1) use the shortcode builder, 2) insert the login shortcode manually, or 3) use the Login Form widget. Please note: you must have the Registration add-on installed in order to publish a login form on your site.

Use the shortcode builder

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

Insert the shortcode 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.

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 after logging in.
  

  [frm-login redirect="www.example.com"]

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

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.
   
3. Scroll down to the bottom of the page.
   
   Copy the CSS class for your Style.
4. Add class="frm_style_sonaris-style" to your login form shortcode. Replace frm-style_sonaris-style with your Style's CSS class name.
   

   [frm-login class="frm_style_sonaris-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"]

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.
   
3. 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.

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.
   
3. Open the "General" tab. Set the max-width to 600px. This can be adjusted as needed.
   
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.