AJAX Login Modals Introduction

AJAX Login Modals Introduction

AJAX Login Modals adds three new shortcodes to the Shortcode Button found in the Popup Editor: AJAX Login Form, AJAX Registration Form, and AJAX Recovery Form. Upon installing and activating the AJAX Login Modals Extension, these shortcodes will be available to you. For a more in-depth look into these shortcodes, click here.

In this doc, we’re going to look at how to build your login modals, the different forms, their features, and their settings.

Before we get started with Popup Maker AJAX Login Modals setup, we recommend using this extension in combination with User Menus by Jungle Plugins.

It's the fastest, easiest and simplest way to change your login link from "Login" to "Logout" once a user has logged it. It also comes with some other great features as well that are very useful in tandem with AJAX Login Modals - and it's free!

Examples

If you would like to explore the functionality of some AJAX Login Modals, check out our  AJAX Login Modals Examples Page.

Building Your Login/Registration/Recovery Popup

Create the Popup as Normal

Create Login/Registration/Recovery popups just like you would a normal popup, and then use the Popup Maker Shortcode Button to create the forms.

You can choose to create all of the forms (Login/Registration/Recovery) inside of one popup as shown in the above screenshots, or create individual popups for each specific form. If you decide to create your popups this way, then you will have to manually create a Click Trigger to each of the popups inside of each of the popups.

Setting Up Conditions

The AJAX Login Modals Extension has a "hidden" Condition of "User Not Logged In", therefore you do not need, or typically want, to setup any Conditions.

This is because you'll want your login/registration/password popup to be available throughout your site and on-demand to your users. Using Conditions will prevent that from happening, which is typically not ideal.

For best results, we recommend not adding any Conditions to your AJAX Login Modal popups.

Trigger the Popup On the Front End

To read about the different ways in which you can trigger your login modals, check out our  AJAX Login Modals Triggers doc.

Accessing Each of the Form’s Features and Settings

Once you’ve added your desired forms to your popup, you may want to adjust their settings to suit your needs.

To do this, simply click on the Shortcode Text in the WYSIWIG Content Editor, then click the pencil (edit) button, as seen below:

If you want to delete one of the forms, then click the “X” (remove) button, instead.

The rest of this doc will be focus on the features and settings of each form.

AJAX Login Form Features and Settings

To access the features and settings of the Login Form, click the Login Form Shortcode in the WYSIWIG Content Editor, then click the pencil (edit) button. You will be greeted by four tabs: General, Labels, Placeholders, and Success.

General

Disable Remember Me

Disabling the Remember Me function will prevent users from being able to save their Username and Password information, and they must re-enter their credentials each visit. This feature can be handy for high security situations.

Labels

Disable Labels

To disable labels for all of the login form fields, enable this setting.

Username

The label for the Username form field.

Password

The label for the Password form field.

Remember Me

The label for the Remember Me checkbox.

Log In

Choose your own text for the Login Button - this will be displayed inside of the button.

Placeholders

Disable Placeholders

To disable placeholders for all of the login form fields, enable this setting.

Username

Your desired placeholder for the Username form field - this will be displayed inside of the field.

Password

Your desired placeholder for the Password form field - this will be displayed inside of the field.

Success

Disable Redirect

When you enable this feature, the web page will not refresh after user login. This feature is not ideal in some situations, however, as some elements, like Admin Bars, cannot be displayed without a page refresh.

Redirect URL

Simply input your desired URL, and the user will be redirected to that URL upon login. If you leave this field blank, the site will be refreshed, but the user will stay on the same page.

Auto Close

Enable this feature if you want the popup to be closed upon user login.

Auto Close Delay

The time, in milliseconds, before the popup is automatically closed.

AJAX Registration Form Features and Settings

To access the features and settings of the Registration Form, click the Registration Form Shortcode in the WYSIWIG Content Editor, then click the pencil (edit) button. You will be greeted by four tabs: General, Labels, Placeholders, and Success.

General

Force Users to Confirm Their Email

Enabling this setting will add a second Email form field to the form, and then force users to repeat their Email.

Allow Users to Create Their Own Password

Enabling this setting will allow users to create their own password.

Force Users to Confirm Their Password

Enabling this setting will add a second Password form field to the form, and then force users to repeat their Password.

Add Google reCaptcha

Enabling this feature will add Google reCaptcha to your registration form. To learn more about how to setup Google reCaptcha on your registration form, click  here.

Labels

Disable Labels

To disable labels for all of the registration form fields, enable this setting.

Username

The label for the Username form field.

Email

The label for the Email form field.

Confirm Email

The label for the second Email form field - this will only display if you’ve enabled the setting that forces users to confirm their Emails.

Password

The label for the Password form field.

Confirm Password

The label for the second Password form field - this will only display if you’ve enabled the setting that forces users to confirm their Passwords.

Submit

The label for the Submit button - this text will display inside of the button.

Placeholders

Disable Placeholders

To disable placeholders for all of the registration form fields, enable this setting.

Username

Your desired placeholder for the Username form field - this will be displayed inside of the field.

Email

Your desired placeholder for the Email form field - this will be displayed inside of the field.

Confirm Email

Your desired placeholder for the second Email form field - this will be displayed inside of the field. This will only apply if you’ve enabled the setting forcing users to confirm their Email addresses.

Password

Your desired placeholder for the Password form field - this will be displayed inside of the field.

Confirm Password

Your desired placeholder for the second Password form field - this will be displayed inside of the field. This will only apply if you’ve enabled the setting that forces users to confirm their email addresses.

Success

Automatically Login After Registration

Enabling this feature will automatically login users immediately after they register with zero extra steps required to login.

Disable Redirect

When you enable this feature, the web page will not refresh after user login. This feature is not ideal in some situations, however, as some elements, like Admin Bars, cannot be displayed without a page refresh.

Redirect URL

Simply input your desired URL, and the user will be redirected to that URL upon login. If you leave this field blank, the site will be refreshed, but the user will stay on the same page.

Auto Close

Enable this feature if you want the popup to be closed upon user registration.

Auto Close Delay

The time, in milliseconds, before the popup is automatically closed.

AJAX Recovery Form Features and Settings

To access the features and settings of the Recovery Form, click the Recovery Form Shortcode in the WYSIWIG Content Editor, then click the pencil (edit) button. You will be greeted by three tabs: Labels, Placeholders, and Success.

Labels

Disable Labels

To disable labels for all of the recovery form fields, enable this setting.

Username or Email

The label for the Username or Email form field.

Get New Password

The label for the Get New Password button - this will be displayed inside of the button.

Placeholders

Disable Placeholders

To disable placeholders for all of the recovery form fields, enable this setting.

Username or Email

Your desired placeholder for the Username or Email form field - this will be displayed inside of the field.

Success

Disable Redirect

When you enable this feature, the web page will not refresh after user login. This feature is not ideal in some situations, however, as some elements, like Admin Bars, cannot be displayed without a page refresh.

Redirect URL

Simply input your desired URL, and the user will be redirected to that URL upon login. If you leave this field blank, the site will be refreshed, but the user will stay on the same page.

Auto Close

Enable this feature if you want the popup to be closed upon user login

Third Party Plugin Integrations

There are several third party plugins that work great with the AJAX Login Modals extension. If you have any of these plugins enabled, then the forms in your registration popups will be replaced automatically. We have included all the necessary AJAX submission functionality needed for the following customizable registration form plugins.

Our current supported plugins are:

Still need help? Contact Us Contact Us