Get access to free tutorials, exclusive content and more.

How to Add a Login Form to Your WordPress Sidebar with FSE

Are you looking to enhance your WordPress website’s user experience? A well-placed and user-friendly login form can make a world of difference. With WordPress and Ninja Forms, adding a login form to your WordPress sidebar using Full Site Editing is a breeze.

In this guide, we’ll walk you through the process step-by-step.

What is Full Site Editing (FSE)?

Full Site Editing ( Gutenberg ) is the new block editor introduced in WordPress 5.0. It allows you to create content using a variety of blocks instead of code making it easier to build and design your website. One of the blocks you can use is the Ninja Forms block, which allows you to add any form created with Ninja Forms to your posts and pages.

How to add a login form to your WordPress sidebar

To start, you’ll need to install and activate the User Management add-on. After User Management is installed and activated, the next step is to customize your login form. After that, you’ll add the new login form to your site’s sidebar template using Full Site editing.

Step 1: Customize your Login Form

From your WordPress Dashboard, navigate to Ninja Forms > Add New to access the form templates. Choose the ‘Login Form.’ This template comes pre-loaded with all the necessary fields for a login form, saving you time and effort.

Completed login form template

Now that you’ve generated your basic form, it’s time to customize it to suit your needs. With Ninja Forms, you can easily add, remove, or modify fields.

Step 2: Add the login form to a sidebar with FSE

The final step is to add your customized login form to your sidebar using Full Site Editing. From your WordPress Dashboard, navigate to Appearance > Editor > Templates.’ Here, you can create a new template or edit an existing one.

How to build a Sidebar

  1. Go to Appearance → Site Editor.
  2. Click your site icon in the top left corner and choose Templates from the menu.
  3. Select the Blank template.
  4. Click on the + block inserter button and insert a Columns block.
  5. Set a two-column layout and select 70/30.

To add a new block, click on the plus icon. In the block library, search for Ninja Forms and select it. In the dropdown menu, select your login form. You can then position this block in the sidebar area of your template.

Adding login form to a sidebar created with the column block

Once you’ve added the form to your template, click Update to save your changes. Now, your login form will appear in the sidebar of any page that uses this template.

Level up Your Website’s User Experience: Adding a Login Form to Your WordPress Sidebar

And there you have it! You’ve successfully created a user-friendly login form and added it to the WordPress sidebar using Full Site Editing. This simple addition will significantly enhance your website’s user experience, encouraging users to log in and engage with your content.

Did you know you can do more with the User Management add-on than just create login forms?  You can register users, update user profiles and allow users to view and edit their own WordPress form submission too! Want to find out how? Read these articles to learn more:

Want to stop looking for a WordPress user registration plugin that’s lightweight but fully customizable? This WordPress user management tool is for you! Easily create WordPress user registration forms and much more.
Get the User Management add-on today. Individually or as part of the Pro or Elite membership. To learn more about how you can use User Management in your everyday workflow, visit our User Management documentation.