The default WordPress login page for users is not good-looking. If you want to develop a new website for your customer, you have better customize the login page to the same style as the website. Below is the default login page of the WordPress Site.
There are many methods you can customize the login page of the WordPress site. This article will introduce how to customize the login page with the plugin WPForms and Elementor page builder.
You can customize your WordPress site’s login page using WPForms and Elementor to create a visually appealing and functional design without the need for coding. Here are the steps:
1. Install WPForms from the WordPress Plugins Directory
If you haven’t already installed WPForms, follow these steps:
- Go to your WordPress Dashboard.
- Navigate to Plugins > Add New.
- Search for WPForms.
- Install and activate the WPForms plugin.
You’ll need the WPForms Pro version to use the User Registration Addon, which allows you to create custom login forms.
2. Install and Activate the WPForms User Registration Addon
- After installing WPForms, go to WPForms > Addons.
- Look for the User Registration Addon and click Install Addon.
- Once installed, the addon will allow you to create a custom login form.
3. Create a Custom Login Form Using WPForms
- Go to WPForms > Add New in your WordPress dashboard to create a new form.
- Name your form, locate the addon templates, and select the User Login Form template from the available options.
- WPForms will generate a basic login form with fields for, see the below example screenshot:
- Username or Email
- Password
- You can customize the form by dragging additional fields if needed or by configuring the form settings. You can revise the Submit text to the Login text. Just click the Submit button to change the text.
4. Customize Your Login Form Settings
Once you have the basic form, you can customize the following:
- Redirect After Login: You can set up a redirection after the user logs in (e.g., to the dashboard or homepage).
- Go to Settings > Confirmation.
- Set the Confirmation Type to Redirect and enter the URL where users should be directed after logging in.
- Enable Anti-Spam: Make sure to enable anti-spam features under Settings > General to avoid spam login attempts.
- Notifications: If you want to notify yourself or users when a login attempt occurs, configure Notifications under Settings.
Once done, click Save.
5. Add the WPForms Login Form to a Page Using Elementor
Now that you’ve created the login form, you can embed it into a custom page using Elementor:
- Go to Pages > Add New and create a new page (e.g.,the page title “User Login”).
- Click Edit with Elementor to open the Elementor page builder.
- In the Elementor sidebar, search for the WPForms widget.
- Drag the WPForms widget to the desired location on the page.
- In the WPForms widget settings, select your custom login form from the dropdown.
- Customize the page by adding other Elementor widgets such as headings, images, or custom backgrounds.
6. Style the Login Page Using Elementor
With Elementor, you can fully design the login page to match your website’s branding. Here are some design options:
- Add a Background: Use a full-width section with a background image, gradient, or video.
- Change Form Layout: Use Elementor to adjust the padding, margins, and alignment of your form.
- Add Titles and Text: Add headings like “Login to Your Account” and additional text for instructions or assistance.
- Button Customization: Use Elementor’s styling options to customize the login button, changing its color, hover effects, and typography.
7. Replace the Default WordPress Login Page with the Custom Login Page
To use your newly designed login page instead of the default WordPress login page, you can redirect users to this new page. For example, if you create a login page with the link https://yourdomain.com/user-login/, you can redirect the users to this login page.