How to add modal popup login form in your WordPress site

How to add modal popup login form in your WordPress site

You may want to add a modal popup login form in your WordPress site. A modal popup login popup allows your users to log in to your website easily without leaving the page that they are on. This improves user experience and engagement on your website.

Why do you need a modal popup login form?

When you are selling digital products or membership site or distributing some files with access control, then you may need to allow users to register and login to your website.

And in a usual login form, when a user clicks on a login link, it brings you to another page, which could be the default WordPress login page or another custom login page on your website. After login, it may bring you back to the previous page, but the process is really tiresome comparing with the modal popup login form.

A modal login popup enables you to display the login form without sending users to another page. Once logged in, you can redirect users to any page you want or keep them on the same page to take their next action.

A modal login popup is faster and improves user experience on your website. Better user experience can reduce abandonment, boost your sales and conversions.

Now, let’s learn, how you can add a modal popup login form in your WordPress site. Here I resumed, you already have WordPress Download Manager Free or Pro version installed and activated.

Step #1: Enable Modal Login Form

Please go to Admin Menu ► Downloads ► Settings ► Frontend Access:

Check the option “Enable modal login form”.

Step #2: Add Trigger Button/Login on your site

There are 2 ways to create a trigger button or link for the modal popup login form:

Use the following short-code:

[ wpdm_modal_login_form label="Login" logo="logo-url" class="btn btn-info" redirect=""]

As a label, you can use text Login or any other text want to show on your button, value for class should be any CSS class, ex, bootstrap CSS button classes like btn btn-primary, btn btn-info or btn btn-success or any of the bootstrap CSS button styles. You may skip the redirect parameter if you don’t want to redirect the users to another page.

Link modal popup login form with a menu item:

You can link the modal popup login form with a menu item. To do that, you simply need to add a class wpdmloginmodal-trigger by following the steps:

#1. Enable css class for WordPress menu items from Admin Menu >> Menus >> Screen Options as shown on the following image:

Enable CSS classed for the menu items

#2. Add a custom link to your menu and add class wpdmloginmodal-trigger as shown on the following image:

Link modal popup login form with WordPress menu item

Now, at site front, when you click on the menu item, the modal login form will appear:

WoprdPrss modal popup login form linked with a menu item

Also, you can use raw html code like the following snippet to create a modal popup login link:

<a href="#" class="wpdmloginmodal-trigger">Login</a>

I hope the article helped you to modal popup login form in your WordPress site easily. If you like this article, then please subscribe to our YouTube channel to get more tutorials related to WordPress. You may join our Facebook page to update yourself with more tips, solutions, offers and so on.

You may also ask any questions related to it in the comment or want us to write on some specific topics you have in your mind. We appreciate your further comments, support or suggestions!


Comments [ 6 ]

Leave a Reply