Login Widget

A well-designed login page sets the tone for your members’ experience. With RTMForm PRO, you can build a fully branded login page right inside Elementor, with no shortcodes and no default WordPress login screen.

Step 1: Create a New Page

From your WordPress dashboard, go to Pages → Add New Page. Give your page a clear title, such as Login Page, then click Edit with Elementor to open the editor.

Step 2: Add the Login Widget

In the Elementor panel, scroll down to the RTM Form Pro category, or simply type Login in the search bar. Then drag the Login widget and drop it into your page.

• Once the widget is dropped into your page, a default login form appears instantly. It comes complete with Username and Password fields, a password visibility toggle, a Remember Me checkbox, a Lost Your Password link, and a Login button, ready for you to customize.

Step 3: Set Up the Content

• Click the widget, then open the Content tab. The settings are organized into several sections, so you can fine-tune each part of the form independently.

Content

• Click Content Section.
• Show Label – show or hide the labels above each input field.
• Show Input Icon – show or hide the icons inside the input fields.
• Username Label & Password Label – change the label text to fit your site, for example Email Address instead of Username.
• Username Icon & Password Icon – replace the default icons with any icon from the library or upload your own SVG.
• Redirect After Login – choose the page users will land on after logging in.

Password

• Click Password Section.
• Show Password Toggle – show or hide the eye icon that lets users reveal or hide the password they type.
• Show Icon & Hide Icon – customize the icons used for each toggle state to match your site’s design.

Remember Me

• Click Remember Me Section.
• Show Remember Me – show or hide the “Remember Me” checkbox, which lets users stay logged in on their device.
• Remember Me Label – change the checkbox text, for example Keep me signed in.

Submit Button

• Click Submit Button Section.
• Use Icon – show or hide an icon on the login button.
• Submit Button Label – for change the button text.
• Icon – choose an icon from the Icon Library or upload your own via Upload SVG.

Lost Password

• Click Lost Password Section.
• Show Lost Password – show or hide the password recovery link.
• Lost Password Text – for change the link text, for example Forgot Password?
• Position – place the link Before Submit Button (next to Remember Me) or After Submit Button (below the login button).

Step 4: Style the Login Form

Now it’s time to make the form truly yours. Switch to the Style tab to match every element of the login form with your brand.

• Wrapper – adjust the padding, margin, spacing between fields, background color, border, border radius, and box shadow of the form container.

• Label – set the typography, color, and spacing of the field labels.

• Input – style the input fields, including typography, padding, border radius, text and placeholder colors, background, and border, with separate Normal, Hover, and Focus states.

• Input Icon – customize the icon size, margin, padding, border radius, color, and background inside the input fields.

• Show Password Toggle – adjust the margin, size, and color of the eye icon for Normal, Hover, and Focus states.

• Remember Me – style the checkbox text and adjust the checkbox spacing, size, checkmark size, colors, and border for Normal, Hover, and Checked states.

• Submit Button – make the button full width, then customize its typography, padding, border radius, text and background colors, border, and box shadow, with separate Normal and Hover states.

• Lost Password – set the typography, color, text stroke, and text shadow of the password recovery link for Normal and Hover states.

• Error Message – style the error notification shown on failed logins, including typography, position, entrance animation, padding, width, colors, border, and box shadow, plus the close button.

Step 5: Publish and Preview

• Once everything looks right, click Publish to make your login page live.

• Your custom login page is now ready.