How to Create a Login Form Popup

Popups are modal windows that appear at a certain time during the visit of a user to grab their attention. A smart way of using popups is by creating a login form popup that will be triggered after the users click on the Login button and will be redirected to the main dashboard on your page. 

Design and Build a Popup

1. From the WordPress Dashboard > Templates > Popup
2. Click on Add New and name your template 
3. Once you click Create Template you will be redirected to the stunning library of pre-made popup templates that you can insert with just a click, or you can always start from scratch. 

Popup Settings

Layout

1. Width - 100 VW. This will make the popup take up the entire viewport of the screen. 
2. Height - Fit to Screen
3. Content Position - Top
4. Horizontal Position - Right 
5. Entrance Animation - Slide From Right 
6. Exit Animation - Slide Out To Right 

Design

Button

1. Vertical Position - 10px 
2. Horizontal Position - 40px 
3. Size - 23px 

Add the content for the Popup 

1. Include a heading element and a text editor element to introduce your login form popup. Stylize the elements and tweak their respective settings. 
2. Add the Login in Element onto the popup
3. From the Layout Tab > Additional Options, switch the redirect after login option ON. In the designated field, you will need to enter the URL for where you want to redirect users after they click on the login button. 
4. From the Style Tab, make the arrangements necessary to stylize the login element. 

Publish the Popup

1. Once you are done designing your popup, click on the Publish button at the bottom toolbar. Click on Save and Close because we won't be setting any Conditions, Triggers, or Advanced Rules. 
2. Instead, go back and edit the page where the login button is located and open the editor
3. Click on the button to open its settings.
4. Under Link, click on the database barrel icon to dynamically connect the button and the popup. From the dropdown menu select popup.
5. Next click on the wrench icon and under action choose open popup. Under popup, select the design we just created and you are done. Click on Update to save the changes.