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 WordPress 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.
However, if you create a custom WordPress 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.
In This Article
OK, let’s get started by installing the custom login page plugin for WPForms.
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.
You can use this template as-is or customize it if you’d like to add any extra elements to it. We’ll show you how to do that in the next step.
Step 3: Add a Branding Image to Your Login Form
WPForms makes it really easy to edit any existing template or build a form from scratch. To create a custom login form with some branded elements, we’ll edit the user login form template to save some time.
In this example, we’ll add a header image that represents a hypothetical brand. Simply drag and drop the Content field on the top of your form.
Once you’ve placed the Content field inside your form, click on it to open its Field Options.
Now, you can use the WYSIWYG editor on the left-hand pane to insert images or add any custom text to your form.
We want to add a branding image to our WordPress login form. So, we’ll use the Add Media button to upload a custom image.
When you press the Add Media button, you’ll see the WordPress Media Gallery modal window open. You can upload an image here like you usually do in WordPress.
With a header image added, our custom WordPress login form looks much more professional and tailored to a specific brand.
If you need more ideas about customizing your login forms, see our post on login page examples.
Now let’s add a link so that users can easily recover their password.
Step 4: 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.
Alternatively, you can also build a customized password reset form so that users who’ve forgotten their passwords can easily reset them.
Step 5: 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.
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 back 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 6: Make Your WordPress 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.
Redirect the WordPress Login Page to Your Custom Login Page
One last step you might want to take is redirecting the default WordPress login page to your custom login page. This makes it so that if anyone tries to access the default WordPress login page, they’ll be sent to your new one instead.
To do this, we will add a bit of code using the WPCode plugin.
This is a free plugin that lets you easily add custom code to your WordPress site. After you install and activate it, go to Code Snippets » + Add Snippet. Then choose Add Your Custom Code (New Snippet).
On the next screen, give your snippet a name you can find it easily. We’ve called ours “Login Page Redirect.” Then paste in the following code:
add_filter( 'login_url', function( $login_url, $redirect, $force_reauth ){ // Change here your login page url $login_url = 'https://sulliesflowers.com/login/'; if ( ! empty( $redirect ) ) { $login_url = add_query_arg( 'redirect_to', urlencode( $redirect ), $login_url ); } if ( $force_reauth ) { $login_url = add_query_arg( 'reauth', '1', $login_url ); } return $login_url; }, 10, 3);
Make sure to change https://sulliesflowers.com/login/ to the URL for your custom login page. In WPCode, your snippet should look something like this:
Now click Save Snippet. You should see a success message once your redirect has been saved and applied.
Finally, toggle on the setting at the top of the screen to make your snippet Active.
Great! Now users will be sent to your custom page when they try to log in.
Create Your WordPress Form Now
Next, 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.
Is it possible to have a dropdown for username fields with users that I will assign so that Users will just select from the dropdown and will just type in their psswords .
I want this feature for specific function on my site .
Thanks !
Hi there,
I apologize as we currently do not have an inbuilt feature to achieve what you have mentioned. This could be a great feature. I have gone ahead and added this to feature request list.
In case you’d like to look into custom development options, we highly recommend using Codeable. Codeable screens all developers for you to make sure that they’re highly skilled and communicative, and then also helps guide the entire process of connecting and communicating with a best-fit developer.
Here’s our tutorial on using Codeable, which provides more details on how this process works.
Or if you’d like a team that you can continue coming back to (longer term) for custom development help, you might also consider checking out WPBuffs.
After creating the login page and embedding the form, how do I now set that page as the default login page?
Hey Efosa, in order to make sure we answer your question as thoroughly as possible and avoid any confusion. Please allow us to respond via email support. Thanks.