Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

With a modal login popup, visitors can sign in without leaving their current page, which boosts their overall user experience.

In our 16+ years of experience, we’ve seen how this feature keeps users engaged and can help 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.

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

Disclaimer: We’re using a WordPress classic theme with the Login/Signup Popup plugin. If you’re using a block theme, the steps may vary. Alternatively, you can skip ahead to method 2.

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.

Edit general settings of login popup plugin

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.

More general settings of login popup plugin

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.

Edit the login popup modal

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.

Edit login form fields

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.

Add more form fields to login modal

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.

Add login to the menus

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.

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.

Add shortcode for login modal

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

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

Login popup modal preview

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 and lead generation software on the market. It helps you convert website visitors into subscribers and customers. You will need at least the Pro plan to access the MonsterLinks feature used in this article.

For more details, you can see our complete OptinMonster review.

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.

Entering license key

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

Entering the WPForms license key

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.

The WPForms user registration addon

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.

Customize your user login form

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>.
Enter login form description

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.

Save and embed your form

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.

Create a new page

You should now see an embed code for your form.

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

Use shortcode option

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.

OptinMonster

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.

Connect your existing account

A new window will now open.

Simply click the ‘Connect to WordPress’ button.

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.

Create first OptinMonster campaign

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.

Choose a campaign type and template

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.

Enter a name for your campaign

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.

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

Enter shortcode of login form

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.

Select Monsterlink 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.

Copy Monsterlink code

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

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

Publish your campaign

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.

Check if status is published

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.

Add a Custom HTML Block to Your Page

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.

Login modal preview

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.

Install user journey addon in WordPress

Note: At WPBeginner, we are big fans of WPForms. In fact, we use it to create contact forms, lead generation forms, and reader surveys. For more information about the plugin, check out our full WPForms review.

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 create a landing page with 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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

13 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    This looks great. It usually annoys me on the web if I have to log in and the original page I was on disappears. This is a very elegant solution to prevent this. I have both Optin Monster and WP Forms and I’m definitely going to try this process. Thank you for the very detailed instructions.

  3. Ahmed Omar

    wonderful explanation
    I am using optinmonster which is convenient for me
    Thank you

    • WPBeginner Support

      You’re welcome :)

      Admin

  4. Ibrahim Garba

    Using WPforms is the easiest. At least for me. Thanks.

    • WPBeginner Support

      You’re welcome :)

      Admin

  5. Danny

    Thanks for the tutorial.
    When you say “Add the shortcode to a new page” do you mean we should create a new page and paste the shortcode?
    Does it mean this page will now become our Login/Registration page?

    • WPBeginner Support

      If you wanted a login/registration page you would place it on a new page which means that page would be the login/registration page your visitors could use. :)

      Admin

  6. Danny

    Thanks for the info,
    I guess they have removed Popup from the selection options. I only saw Dropdown and LinktoDefault.

    Am I the only one?

    • WPBeginner Support

      Currently, it does not appear to be available with CSH Login, thanks for letting us know

      Admin

  7. Laura

    Sometimes y’all have great info. But sometimes, it’s really frustrating when you only give instructions that require more plugins. I tell my clients that it’s better to keep plugins to a minimum, and when I’m trying to code something from scratch, looking for some snippets that’ll make the work easier, I feel let down when I come here. This is one of those cases. If you want to provide instructions using plugins, fine. But it would be awesome if you’d include an additional option showing how to do it from the ground up.

    Thanks, though, for the many things you DO help with a lot.

    • WPBeginner Support

      Glad you find our articles helpful. In this case, it would have taken far more than just a snippet to set this up which is why our article for beginners is showing only plugin options :)

      Admin

  8. Bob

    From the end user perspective these things are horrible. They may look nice but password managers like Lastpass have a hard time with them. Some work, others don’t.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.