Do you want to create a custom login page for your WordPress website? Having a custom login page is a great way to replace the generic WordPress login and add your own branding.
In this article, we’ll show you the easy way to create a completely custom login page for your business site.
Create Your Custom Login Form Now
Why Create a Custom Login Page in WordPress?
All WordPress websites have the same login page. It’s a simple login form with the WordPress logo above it.
This page is generic, so it’s difficult to tell which website you’re actually signing into. The WordPress logo also links to WordPress.org, which could take users away from your site if they click on it.
If you create a new login page for your site, you could use it for:
- Promotions
- Notifications
- And more.
At WPForms, we use the extra space on our custom login page to let users know about exciting new features.
It’s super easy to make a custom login page, and it can also help with your website security. By creating a custom login page, you can hide the default one to reduce login spam and keep your WordPress site secure.
Now we know why you need a custom login page, let’s make one for your site.
How to Make a WordPress Custom Login Page
We’re going to use WPForms to make a completely custom login form for your site. Then we’ll show you how to create your custom login page.
- Install the WPForms Plugin
- Create Your Custom WordPress Login Form
- Add a Forgot Password Link to Your Custom Login Form
- Customize Your Custom Login Form Settings
- Publish Your Custom Login Page
OK, let’s get started by installing the custom login page plugin.
Step 1: Install the WPForms Plugin
The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.
To make a login form, you’ll need WPForms Pro or higher.
Once you’ve installed WPForms, go to WPForms » Addons.
Scroll down until you find the User Registration Addon. Click on the button to install it.
If you want, you can restrict access to WordPress while you’re building your new login form. To find out how to do this, check out our guide on how to hide your WordPress site until it’s ready.
We’re all set! Let’s make our new custom login form.
Step 2: Create a Custom WordPress Login Form
Now we have WPForms installed, let’s create a brand new login form for WordPress.
Click WPForms » Add New to start.
On the setup screen, name your form at the top.
Now scroll down and select the User Login Form template.
You’ll see the form open up in the form builder. The custom login form is already set up, so we don’t need to add any fields.
Now let’s add a link so that users can easily recover their password.
Step 3: Add a Forgot Password Link to Your Custom Login Form
The login form looks great as it is, but we’ll need to add a forgot password link. Otherwise, visitors who forget their login details will get stuck on the login page.
To do this, we’re going to customize the Password field.
We’re going to add a link in the description here so that it displays right underneath the field. We can use the {url_lost_password} smart tag for the link.
Click on the password field to start. In the Description, paste this in:
Forgotten your password? <a href={url_lost_password} >Click here</a> to reset it.
That’s it! The {url_lost_password} smart tag will be replaced with the forgotten password link when we publish the form.
WPForms will take care of the database connection, so we don’t need a separate login plugin to handle that.
Go ahead and click Save to save your login form so far.
Step 4: Customize Your Custom Login Form Settings
In this step, we’ll look at the login form settings. This will let us control the button on the form, and the page that our visitors will be redirected to.
Start by clicking Settings on the left hand side of the form builder.
The settings will open on the General tab.
Scroll down to Submit Button Text and change this to say Log In.
We also changed the Submit Button Processing Text so that the user can see the login is in progress. You can type something else here if you want to.
Below this, you’ll notice some more settings. You’ll want to check that these 3 checkboxes are selected:
- Enable anti-spam protection – This will use a smart form token to prevent logins from bots.
- Disable storing entry information in WordPress – We don’t need to store these form submissions in the WordPress database.
- Hide the form if the user is already logged in – If a user’s logged in already, it would be confusing to show the login form again. This setting lets us easily hide it.
You can customize the other settings if you want to.
If you see the old anti-spam honeypot here, go ahead and check the new anti-spam checkbox. The honeypot is now deprecated, and the new anti-spam token will improve the spam protection on your login form.
Finally, let’s click Confirmations.
On this screen, we can choose what happens when the login form is submitted. You can have your users open up the WordPress admin if you want. For most sites, it makes sense to redirect them pack to the frontend.
So in this example, we’re going to redirect the user to the homepage.
Great! Take time to review the other settings and make any changes you want to make. Then click Save at the top of the form builder.
Step 5: Make Your Custom Login Page
Now we’re ready to publish your new login form.
You can embed your custom login form anywhere on your site, including:
We’re going to create a WordPress custom login page in this example. We’re not going to do a lot of customization, but you can take more time to brand your page before going live if you want to.
To start, click the Embed button at the top of the form builder.
Click Create New Page…
And now give your page a name. Once that’s done, click Let’s Go.
Your custom login form is ready to customize! You can add branding and images and play around with the layout until it looks good.
Then, just click the Publish button to publish your custom login page.
That’s it! Your custom WordPress login page is live and ready to use.
Remember: you’ll need to log out of WordPress to see your finished form! If you’re logged in, you won’t see the login screen.
If you want, you could use a landing page plugin to create a custom login page and embed your login form. This would let you easily set up a background image and custom colors.
Create Your Custom Login Form Now
Next Step: Customize Your Registration Form
And there you have it! You now know how to create a custom login form in WordPress. You can use this as a starting point to develop the branding on your login page.
Next, check out how to create a user registration form for your site. Making a custom registration form is a great way to make your site look more professional.
You might also want to learn how to prevent unauthorized password resets in WordPress.
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes the User Registration addon and offers a 14-day money-back guarantee.
If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.
Im trying to make a login page for my client but in my block its saying
“Error loading block: Invalid parameter(s): attributes”
do you know how to fix this issue?
Thanks!
Hi Shannon! We’ve had reports of this issue, and we’ve found that this is due to conflicts from other plugins, such as PopupMaker or Ultimate Addons for Gutenberg. However, we’ve found that while in the editing screen, the block will show this error message, on the front end the form will display properly.
I hope this helps to clarify 🙂 If you have any further questions about this, please contact us if you have an active subscription. If you do not, don’t hesitate to drop us some questions in our support forums.
Hi,
I created a login form as described on https://wpforms.com/how-to-create-a-custom-login-form-for-improved-site-branding/
When I want to test is, i get the error message.
ERROR: The username or password you entered is incorrect. Lost your password?
Do I need to create a account before? I want to create a site for my custumers. Do I need to make for them all accounts? Or Can they do it by their own?
Hi Michiel, in order to test the login form, you’ll need to use valid credentials for an existing user of the site. If you just use any random credentials that aren’t valid, the login would be rejected as you’ve noticed, since the credentials aren’t valid.
You don’t need to create accounts for all of your users, you could instead create a User Registration form for people to sign up to your site on their own. We have an article on how to do this here.
I hope this helps to clarify 🙂 If you have any further questions about this, please contact us if you have an active subscription. If you do not, don’t hesitate to drop us some questions in our support forums.
Did you removed the Login Form from the Free Version?
Hi Marco! I apologize for any confusion here, but the Login form is part of our User Registration addon which is only available with our Pro level (or higher) license level, and was not a part of our Lite (free) version.
I hope this helps to clarify. Thanks!
I am working with:
Elementor Pro
WP Forms Pro
Essential Addons Pro
I have tried to put the Login Form on a popup element and tried page. Neither of these will display the form. Form does not generate on the backend or the frontend.
I have also tried to use the shortcode widget within Elementor, the WP Form widget within Elementor, and the WP Form Widget within Essential Addons.
Other forms are working properly but the Login Form will not display. Any ideas?
Hi Benji! Could you please check if the option to hide the form from logged users has been enabled? You can find it in your login form’s settings, as shown in this screenshot. Or please try checking with a browser window that is in privacy/incognito mode.
I hope this helps to clarify 🙂 If you have any further questions about this, please contact us if you have an active subscription. If you do not, don’t hesitate to drop us some questions in our support forums.
Does this actually log-in to WordPress itself? I created the form it works, but I don’t see my admin bar. If it doesn’t is there a way to do that.
Hi Jamie,
In order to make sure we answer your question as thoroughly as possible, could you please contact our Support Team with some additional details about what you’re looking to do?
Thanks! 🙂
How to add a checkbox “stay signed in”
Thanks !
Hi Joe! The feature to allow users to “stay signed in” (or colloquially known as Remember Me) isn’t currently available with our plugin or the User Registration addon. I do agree it would be super helpful, though. I’ve made a note of the feature request and we’ll keep it on our radar as we plan out our roadmap for the future.
I apologize for not being able to provide a solution for your request at this time, but I hope it helps to clarify! If you have any further questions about this, please contact us if you have an active subscription. If you do not, don’t hesitate to drop us some questions in our support forums.
In the website we want a mix of pages for public view and for registered user view. Can we have this with WPForms user registration form and WPForms login form ?
Hey Carlos, Our User Registration addon focuses solely on the account creation process and we have a form locker addon with which you can be able to limit form access as outlined here.
However, we don’t the ability to limit page access as you’ve described, in this you might need to consider a membership plugin and here is a great guide from WPBeginner which that can help you on the same.
I hope this helps!
How would I change the link for “Lost your password” in this generated message from WPForms Login? Currently, it links to the site password reset. We want it to link to the WPForms Password Reset form.
ERROR: The username or password you entered is incorrect. Lost your password?
Hey Caroline, while we don’t have an inbuilt feature to achieve this. This can be achieved using the following custom snippet and in order to make sure we answer your question as thoroughly as possible and avoid any confusion, could you please contact our team?
If you have a WPForms license, you have access to our email support, so please submit a support ticket.
Thanks.
the form was unable to submit contact the site administrator
That’s the error am getting while testing my registration form.
Please how can I resolved it
Hey Bello, we are sorry for the trouble. This issue occurs because of the difference in the cache lifetime on your site and in the token lifetime of the anti-spam protection option (which is set to 2 days) that is enabled by default in your forms (please, look at this screenshot where you can find it).
You can address this issue in 2 ways:
1. Decrease the cache lifetime on your site to 45 hours in your caching plugin or the server caching settings.
OR
2. Increase the lifetime of our token to 1 day more than your site cache lifetime is now. This can be accomplished by following this tutorial.
If the issue persists we’d love to take a closer look and advise further on the same.
If you have a WPForms license, you have access to our email support, so please submit a support ticket. Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.
Thanks.