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.
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.
Please go to Admin Menu ► Downloads ► Settings ► Frontend Access:
Check the option “Enable modal login form”.
There are 2 ways to create a trigger button or link for the modal popup login form:
[ 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.
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:
#2. Add a custom link to your menu and add class wpdmloginmodal-trigger
as shown on the following image:
Now, at site front, when you click on the menu item, the modal login form will appear:
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 ]
Paul Frishert
Very helpfull, thanks. The only thing is that the logo that is used within this modal login form is different than the logo that is used for my normal login form. How to change the logo for the modal?
Shahjada
The site icon from the customizer is used on the modal login form.
Darren Hauck
No close button?
Shahjada
Click outside or press ESC to close.
Sunshine Everyday
It says “Use the following short-code:”, but the shortcode is missing
Shahjada
Short-code is visible now. However, here it is again :