How to Create a WordPress Popup Login Form

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

The default behaviour when users click on the login link, they are redirected to the default WordPress login page or another custom login page on your website. Once they successfully log in, they will be redirected to another page.

A popup login form gives you the ability to display the login form to users without navigating to another page. If you still want to redirect them, you can do so after they are logged in.

A popup login form is a faster way to log users in on your website and improves the overall user experience. This will, in turn, boost your sales and conversions.

This article will teach you how to quickly create a lightbox/modal/popup WordPress user login form.

Note: For this procedure to work, you need to have both ProfilePress and MailOptin plugins installed and activated on your website.

Creating a WordPress Login Form

ProfilePress plugin is required to create a custom WordPress login form. Don’t have it installed on your WordPress site? Get it from the pricing page.

Building the Custom Login Form

1. Hover on ProfilePress and click on Forms & Profiles
2. Click on Add New and select the Login form type
3. Enter a name for the form
4. Select your preferred template
5. Design the form with the drag & drop builder or Advanced form builder.

You can preview and see how the form will look on the front-end by clicking on the “Live Preview” button.

Form Settings

The form settings let you change the form’s appearance, field styling, labels, text, and the submit button.

After saving the form, a shortcode will be generated for that particular form. Click on Forms & Profiles >> Login and copy the shortcode.

After saving the form, a shortcode will be generated for that particular form; take note of it, as we will use it in the next step.

That’s it! Your custom WordPress login form is live and ready to use.

Installing the MailOptin Plugin

First, you will need to install and activate the MailOptin plugin from the WordPress repository by going to Plugins>>Add New and searching for MailOptin.

Go to Plugins>>Add New on your WordPress dashboard and search for MailOptin.

Click on the Install now button and activate the plugin on your website.

Creating a WordPress Popup with MailOptin

To create a WordPress popup with MailOptin, go to MailOptin >> Optin Campaigns in your WordPress admin dashboard to open up the opt-in campaigns overview page.

Next, create a new opt-in campaign by clicking on the Add New button.

Click on the lightbox optin types menu and select your preferred optin template.

After creating a new campaign, MailOptin will open the campaign customizer.

You can also open the customizer by clicking on the blue pencil icon.

Replacing The Default Form with a ProfilePress Login Form Shortcode

The final step is to replace the default opt-in fields with the form shortcode we copied from ProfilePress.

To do this, click on the fields panel to open the fields option…

… then click on the Use Custom HTML toggle. You will see a new code editor appear. Copy and paste the form shortcode from ProfilePress into the editor.

Save the opt-in campaign.

Adding the Popup Login Form to your WordPress Navigation Menu

Ideally, you would want to add a login or sign-in link to the navigation menu of your WordPress site, which triggers or displays the popup modal when clicked. You will need to enable the Click Launch rule for your opt-in campaign to achieve this.

Activating Click Launch

Go to the Display Rules section of your opt-in and activate the Click launch rule.

NB: MailOptin Click to Launch is a paid feature and will require at least the standard plan to work.

Getting the Unique User ID

After enabling Click Launch, the next step is to add a CSS class to the menu item with the opt-in’s Unique User ID (UUID). The ID can be found in the Click Launch window. In the image below, the UUIID is “IfLBsvWFMm”

Adding the Login Link to your Navigation Menu

To add the login to your menu, you should open up the Appearance >> Menus admin page in WordPress and create/edit a Custom Links menu item.

Type “#” in the URL field, type your preferred label for the menu item and next, add this CSS class with your opt-in’s UUID.

mailoptin-click-trigger-IfLBsvWFMm

Replace “IfLBsvWFMm” with your optin’s UUID and save the menu.

Note: In case you are not able to see the CSS Classes field, you will need to enable it through the Screen options seen on the upper right side of the screen.

After saving the menu, navigate to your website’s front end and click on the newly created Login menu item.

You will notice that the MailOptin lightbox contains your ProfilePress login form, and you can log in to the site via the ProfilePress login form.

Furthermore, you can also disable the headline, note, and description of the MailOptin template and just display the form.

Conclusion

This tutorial taught you how to create a popup login form with ProfilePress and MailOptin.

If you have any questions about setting this up on your WordPress website, please feel free to send us a message, and we will gladly help.