---
title: AJAX Login Modals Templates and Styling
description: "## Customizable Form and Shortcode Templates All of the forms and shortcodes generated by [the AJAX Login Modals (ALM) plugin extension](https://wppopupmaker.com/extensions/ajax-login-modals/) use the customizable templates listed below. Each template can be added to your site theme (or child-theme) and customized…"
url: "https://wppopupmaker.com/docs/ajax-login-modals/templates-styling/"
updated: "2024-12-23"
category: Extensions / AJAX Login Modals
---

# AJAX Login Modals Templates and Styling

## Customizable Form and Shortcode Templates

All of the forms and shortcodes generated by [the AJAX Login Modals (ALM) plugin extension](https://wppopupmaker.com/extensions/ajax-login-modals/) use the customizable templates listed below. Each template can be added to your site theme (or child-theme) and customized to include your own forms, content, or HTML structures.

If you intend to customize the plugin templates, begin by adding a new folder in the root directory of your theme (or child-theme) named *'popmake_templates'*.* *Copy one or more of the plugin template files from  `/popup-maker-ajax-login-modals/templates/*`  and paste them into the* *newly added theme folder. 

The following templates are included in the ALM plugin:

- *form-login.php* -- Used in the login form shortcode.
- *form-login-static.php* -- Used for compatibility with plugins that modify the built in login forms.
- *form-registration.php* -- Used in the registration form shortcode.
- *form-recovery.php* -- Used in the recovery form shortcode.
- *form-registration-profile-builder.php* -- Used in the registration form shortcode when the *Profile Builder* plugin is active.

## Plugin CSS Classes and Styles

### Locating Styles

Go to:   `/wp-content/plugins/popup-maker-ajax-login-modals/assets/css/site.css` to view each of the plugin CSS styles.

### Uses for Each Set of Styles

- *.pum-login-form, .pum-registration-form, .pum-recovery-form* -- Used to target the main popup container used for each of the forms.
- *.pum-form* -- Used on the wrapper for each of the forms included.
- *.pum-form-wrapper .messages .message* -- Used on the error/success message. Can further be styled using the following status states.

- *.pum-form-wrapper .messages .message.error*
- *.pum-form-wrapper .messages .message.success*

 *.pum-alm-footer-links* -- Used to style the quick change links below each form.

On top of these basic styles, each form field has its own unique wrapper class:

- *.pum-form p.pum-field-user_login* -- Used to target the Login Username field within your form.
- *.pum-form p.pum-field-user_pass* -- Used to target the User Password field within your form.
- *.pum-form p.pum-field-user_pass2* -- Used to target the Confirm User Password field within your form.
- *.pum-form p.pum-field-user_email* -- Used to target the User Email field within your form.
- *.pum-form p.pum-field-user_email2* -- Used to target the second User Email field within your form.