How to Create a Login Popup

Through “Login popup” you can configure login forms inside a popup. In case your website is password-protected, you can create a Login popup and place it on your site for the visitors to fill in their credentials and access. Due to following the step-by-step instructions presented in this knowledge base, you will learn how to create an eye-catching login popup.

Steps to Follow

1. In your dashboard, go to the “Popup Builder” section and click on “Add New”

2. Select the “Login” popup type from the menu

3. Then, enter a title for your Login popup (visible to the admin only)

4. You can add an image and a text to your login popup in the HTML editor

5. Pass on to the following “Login options” section and set up configurations specific to the login popup type.

  • Herein, set up form design configurations such as form background color, form background opacity and form padding. Then, set username (and password) label and placeholder.

  • In the following “Inputs’ style” section you can set inputs’ dimensions and colors.

  • Set the label of the “Required field message” placeholder. The default message runs as follows: “This field is required”. You can also change the label of the “Error message” placeholder, i.e. how you should inform of the provided username or password not being correct. The default message is: “Incorrect username or password”.

  • In the “Login button styles” section you can set login button dimensions, title labels, button background and text colors.

  • Then, select the action to be performed after successful login. You can set to refresh the page, redirect registered users to another URL, open another popup or hide the popup.

6. Then, choose “Selected posts” option from the dropdown menu in the “Display Rule” section if you want to show your login popup on a particular post (posts). In the “Is or is not” option select “is” from the dropdown menu. Well done! Now, in the “Select Your Posts” option, start typing the name of the post where you want the login popup to appear, click to select the post.  

7. Setting up the dimensions of your login popup, the best option to have a responsive popup is to use the "Responsive mode" with the “Auto” option for your popup dimensions. If you set the “Auto” option, the size of the popup will be counted automatically according to its content. Or else, select an amount of percentage from the dropdown menu thus specifying the popup size on the screen in percentages. Select the “Custom mode” if you want to give customized dimensions to your popup.    

Let’s have a look at a sample Login popup