How to Create a WordPress Login Popup Modal (Step by Step)

Adding a WordPress login popup modal to your site can make logging in smoother for your users. It allows visitors to sign in without leaving their current page, which boosts their overall experience.

We’ve seen several successful websites use this feature to keep users engaged and improve site interaction. It’s a simple yet effective way to streamline the login process.

In this article, we’ll walk you through the steps to create a WordPress login popup modal.

Why Create a WordPress Login Popup Modal?

If you run an online store, sell online courses, or have a membership website, then you likely allow users to register and log in to your website.

Usually, when users click the login link, they are taken to the default WordPress login page or another custom login page on your website. Once users are logged in, they are redirected again to another page.

Unfortunately, this can be inconvenient for users.

A modal login popup lets you display the form without sending users to a different page. Once logged in, you can redirect users to any page you want. As the process is quicker and more polished, it can help improve user experience and boost your conversions.

With that in mind, we’ll show you how to easily create a modal login popup in WordPress using a free plugin and premium plugins. You can simply click the links below to jump ahead to your preferred method:

Ready? Let’s dive right in!

Method 1: Create a Modal Login Popup Using Login/Signup Popup

For the first method, we will be using the Login/Signup Popup plugin, a free plugin that lets your users easily log in or register on your site.

First, you’ll need to install and activate the Login/Signup Popup plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can go to Login/Signup Popup » Settings from the WordPress admin panel.

Under the ‘General’ settings, you can enable registration, auto login user or sign up, and handle password resets.

Besides that, the plugin also lets you select the WordPress user role that will be assigned to newly registered users. By default, it will assign the ‘Subscriber’ role.

If you scroll down, you’ll see more settings. For instance, you can add a redirect URL when a user logs in or registers.

Don’t forget to click the ‘Save’ button if you made any changes.

Next, you can switch to the ‘Style’ tab and edit your login/signup popup modal. The plugin lets you change the popup position, width, height, background color, text color, and more.

After that, you can also customize the form fields in the popup modal.

Simply go to Login/Signup Popup » Fields from your WordPress dashboard. Here, you can activate different form fields, edit their labels, make them required fields, and more.

Besides that, there’s also an option to add more fields to your login/signup popup.

Simply click the ‘+ Add Field’ button at the top and select additional form fields to add to your login modal popup.

After you’ve customized the form fields, you can now add the modal login popup to your website. The plugin offers different ways of adding the popup to your site.

1. Add Login Popup Modal to Menus

First, you can head to Appearance » Menus from your WordPress dashboard.

After that, you can see the ‘Login/Signup Popup’ menu items. Simply select the items you wish to show and click the ‘Add to menu’ button.

For more details, please see our guide on how to add a navigation menu in WordPress.

2. Add Login Popup Modal as Anchor Links

Next, you can add #login or #register at the end of your website URL and place the login popup as an internal link.

For example, your URL might look like this:

<a href="www.mywebsite.com#login">Login</a>

To do this, you can edit a post or a page.

Once you are in the content editor, you’ll want to click the 3 dots and select the ‘Edit as HTML’ option.

After that, you can add the internal link to the login anchor text.

You can learn more by following our guide on how to add anchor links in WordPress.

3. Use Shortcodes to Add Login Popup Modal

Another way of adding the login/signup popup is by using shortcodes.

You can simply enter the [xoo_el_action] shortcode anywhere on your site to create a link/button to open the popup.

For instance, you can head to Appearance » Widgets and add a shortcode widget block to show the login popup in the sidebar of your website.

When you are done, simply click the ‘Update’ button.

Now, you can visit your website to see the login popup in action.

Method 2: Create a Modal Login Popup Using WPForms & OptinMonster

For this method, you will need the WPForms and OptinMonster plugins.

WPForms is the best WordPress contact form plugin, and you’ll need at least their Pro plan to access the ‘User Registration’ addon.

OptinMonster is the best WordPress popup plugin on the market. It helps you convert website visitors into subscribers and customers.

At WPBeginner, we have used it several times to create interactive popups and have had an excellent experience. For more details, see our complete OptinMonster review.

Keep in mind that you will need at least the Pro plan to access the the tool’s MonsterLinks feature that we show in this article.

Using WPForms to Create a User Login Form

First, let’s install and activate the WPForms plugin. For more details, you can see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you’ll need to head to WPForms » Settings from your WordPress dashboard and enter the license.

You can find the key in your WPForms account area.

Next, let’s head over to WPForms » Addons to install and activate ‘User Registration Addon.’

After activating the add-on, you’ll want to go to WPForms » Add New and create a new form.

On the next screen, you’ll first need to name your form.

Then, you’ll choose a prebuilt form template from the template gallery. You can use the search bar to easily find the ‘User Login Form’ template.

Once you’ve found it, you can click the ‘Use Template’ button.

This login form template has email and password fields that will work similarly to the default WordPress login form.

You can drag and drop any additional fields from the left side of the screen as needed.

Next up, you can click on the ‘Password’ field, and it will show the field options on the left side.

You can add the code given below to the description box of the ‘Password’ field to display options like ‘forget password’ and ‘user registration.’

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

After that, you need to click on the ‘Save’ button to store your changes, and you’re ready to publish the form.

To get started, you can simply click the ‘Embed’ button.

A popup window will open with options to add your login form.

Go ahead and select the ‘use a shortcode’ option. It will appear as a link in the window, not a button.

You should now see an embed code for your form.

Here, you’ll want to copy the shortcode and save it for use later.

Using OptinMonster to Create a Modal Popup

At this point, your login form is ready. The next step is to create the modal popup using OptinMonster.

First, you’ll need to visit the OptinMonster website and sign up for an account.

Next, you will need to install and activate the OptinMonster plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

The plugin acts as a connector between your WordPress site and OptinMonster.

Upon activation, you should see the welcome screen. Go ahead and click the ‘Connect Your Existing Account’ button.

A new window will now open.

Simply click the ‘Connect to WordPress’ button.

Once connected, you’re ready to create your modal popup.

Simply go to OptinMonster in the WordPress admin area and click on the ‘Create Your First Campaign’ button.

On the next screen, you’ll choose a campaign and a template.

Since we’re creating a pop-up modal, let’s select ‘Popup’ as the campaign type.

As for the template, OptinMonster offers lots of prebuilt templates so you can quickly adjust one if needed.

Once you’ve selected a template, a popup window will open. It will ask you to add a name to your campaign.

After entering a name, you can click the ‘Start Building’ button.

With that done, you will be redirected to the OptinMonster campaign builder.

You can add different blocks to your template from the menu on your left. So, go ahead and add the WPForms block.

After that, you should see WPForms block options in the menu on your left.

You can select the login form that you just created from the ‘Form Selection’ dropdown menu.

If you don’t see your form, then simply select the ‘Add Shortcode Manually’ option and enter the shortcode you copied earlier when creating the form in WPForms.

Don’t worry if you can’t preview your form in the campaign builder; the form will appear when you publish the campaign.

Next, you can head to the ‘Display Rules’ tab. OptinMonster offers powerful targeting options.

From here, you’ll want to select the ‘MonsterLink™’ (On Click)’ display rule.

After selecting the option, you should see MonsterLink as the display rule.

Go ahead and click the ‘Copy MonsterLink Code’ button, then keep the link somewhere safe. You will need it later.

You can now head to the ‘Publish’ tab at the top.

Simply change the ‘Publish Status’ from ‘Draft’ to ‘Publish.’

Don’t forget to click the ‘Save’ button at the top and exit the campaign builder.

Then, just ensure that the ‘Status’ is set to ‘Published’ under the ‘Visibility & Status’ section.

To activate the status, you’ll want to click the ‘Save’ button at the top right corner and go to the ‘Publish’ section.

Adding Modal Login in WordPress

Now, you can create a new WordPress page or edit an existing one.

Once you are in the content editor, you can click the ‘+’ button and add a ‘Custom HTML’ block.

After that, you’ll need to paste the MonsterLink in the custom HTML block. It should look something like this:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Since this is a login form and not an email optin, you will want to change the link text in the code that says ‘Subscribe Now’ to anything you want. For this tutorial, we changed it to ‘log in or register,’ as you can see in the code snippet above.

You can also add the code above to your WordPress menus, sidebar, or any other area on your site.

Just make sure to save the changes to the WordPress page and visit your site to see the modal login in action.

Bonus Tip: Track User Journey in WordPress Lead Forms

Now that you’ve learned how to create a login popup modal in WordPress let’s learn how to track user journeys for your WordPress forms.

Tracking the user journey can help you understand why some users fill out forms while others don’t. It reveals the steps users take on your site before submitting a form, giving you insight into their behavior and activity.

Knowing what encourages users to complete forms lets you recreate that process to get more leads and grow your business. While Google Analytics can show some user activity, it doesn’t link the behavior directly to the specific user who submitted the form.

That’s where WPForms comes in. It’s a popular form builder plugin that includes a ‘User Journey’ addon, letting you see where users came from, what path they took, and how much time they spent on each page before submitting a form.

If you’re interested to learn more, feel free to refer to our guide on how to track user journey on WordPress lead forms.

We hope this article helped you learn how to create a login popup modal in WordPress. You can also check out our complete list of the best WordPress login page plugins and our guide on how to redirect users after successful login in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.