Do you want to create a custom login form for your WordPress website? Having a custom login page is a great way to personalize the user experience and further brand your business.
In this article, we’ll show you how to customize your custom login form in WordPress.
To help you navigate, click on the step in this tutorial you’d like to jump to:
- Step 1: Create a Custom Login Form in WordPress
- Step 2: Add a Forgot Password Link to Your WPForms User Login Form
- Step 3: Configure Your Custom Login Form Settings
- Step 4: Add Your WordPress Login Form to Your Site
Why Create a Custom Login Form?
There are many reasons why you might want to create a custom login form on your WordPress website:
- Security – Online forms are a huge target for spammers. By creating a custom login page, you can hide the default page. This will reduce login spam and keep your WordPress site secure.
- Branding – By placing the form on a custom login page, you are able to customize all the elements on the page around the form. This can include your logo and other branding elements.
- Ease of Access – You can place the login form in a sidebar widget, so that it’s easily visible to users.
How to Create a WordPress Custom Login Form
Ready to get a WordPress custom login form on your site? Follow these steps for an easy set up.
Step 1: Create a Custom Login Form in WordPress
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.
Once you have installed WPForms, go to WPForms » Addons and find the User Registration Addon.
Install and activate the User Registration Addon.
Once your WPForms User Registration addon is active, go to WPForms » Add New to create a new form.
On the setup screen, name your form and select the User Login Form template. By selecting this option, much of the work of creating the form will be completed for you.
Since you’re creating a custom login form, you shouldn’t need to add any additional fields.
If you want to add additional fields to your login form, just drag the fields you want from the left hand panel to the right hand panel. Then, click on the field to make any changes.
Step 2: Add a Forgot Password Link to Your WPForms User Login Form
Next, you may want to add a Forgot Password Link to your user login form. Here’s what that looks like:
This step is optional, but you may want to make it easier on your visitors to log in (and increase the quality of your site’s user experience).
To add a forgot password link to a WPForms user login form, you’ll need to add a Smart Tag in the description area of the Password field.
To do this, click on the Password field and edit the description to include the following:
“Can’t remember your password? <a href={url_lost_password} >Click here</a> to reset.”
Feel free to customize the copy around the smart tag to your liking and then click the Save button in the top right corner.
Step 3: Configure Your Custom Login Form Settings
Next, you’ll need to configure your custom WordPress login form’s settings.
To do this, go to Settings in the Form Editor. Then, click on the General tab.
Here you can do the following:
- Change the form’s name
- Customize the “Submit” button to say something else
- Enable anti-spam honeypot to protect against fake form submissions
- Hide the form if a user is already logged in – by default, the form will be hidden if users are logged in until you change this setting.
Lastly, you can disable the storing of entry information and user details, such as IP address and User Agent in an effort to comply with GDPR.
For help with this step, be sure to check out our documentation on creating GDPR compliant forms in WordPress.
All you have to do is click on the settings you want. Then click Save.
Step 4: Add Your WordPress Login Form to Your Site
After you’ve created your login form, you need to add it on your site. You have two options for this.
The most popular option is to add the login form on a custom login page. You can add any additional information to this page, such as a logo or text for branding and personalization purposes.
Start by creating a new page in WordPress and name it Login. After that, click on the Add WPForms icon.
Next, select your login form from the list of your WPForms.
After that simply publish your page. Your custom login page and form is now displaying on your site for visitors to see and log into.
Remember, if you have the form set to be hidden to logged in users, you must log out to see the login form on a published page.
You can also embed the login form in your sidebar or footer by using widgets.
Simply go to Appearance » Widgets and drag the WPForms widget into the widget area of your choice. Then, select your form and click Save.
Final Thoughts
And there you have it! You now know how to create a custom login form in WordPress, as well as how to add it to a custom login page for a more personalized and branded look.
If you want to learn more about login forms for you website, be sure to check out how to create a user registration form for your site.
So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.
And don’t forget, if you like this article, then please follow us on Facebook and Twitter.
Great post! Thanks for this information, is really helpful for us. Have a nice day Jay! 🙂
These are great tools, thanks for sharing!!!
Happy to hear this was helpful to you! 🙂
Thanks for this post.
I am currently creating a custom log-in page for a client. I am wondering how I would go about adding a ‘forgot your password link’ to the log-in page?
Hi Brette,
Sure! Here’s a great tutorial that will show how to add a Forgot Password link to a WPForms login form. Just scroll to the section titled “2. Allow Your Users to Reset Password”.
I hope this helps! 🙂
Hi, great post. I just purchased the Pro Version and have one quick question. How can I add the login button on my main menu like you have done on this site and once someones logged in change that to a logout button?? Thanks!
Hi Richardt,
There are a few different ways to do this in WordPress, but here’s an article from WPBeginner with a popular approach.
Hope this helps! 🙂
Hi,
I want this to be more clear form me please:
I want to create registration form user first, can I use it for log in customer form after?
means, how to link registration form to log in form?
thanks
Hi Maysan,
In order to set this up, you’d need to create two forms: a registration form and a login form. Then if you wanted, you could redirect the user to your login form immediately after they’ve submitted the registration form. You can set up a redirect like this within the form’s confirmation settings.
Hope this helps! If you have additional questions, please get in touch and we’d be happy to help further 🙂
After the customer logged in, how I can redirect him to his private page?
I want to create this as a membership account. Each client has its own page with personal information. This page might have multiple forms to be filled out. And I want these information to be visible for him and be as a reference in every time he logged in.
Is that possible?
Hi Maysan,
Based on your description, it sounds like you’re looking for front-end user profiles/user specific content. While we don’t currently offer these features, WPBeginner has a great breakdown of the best membership plugins for WordPress.
Hope that helps! 🙂
how do i connect the account created on wpform to wordpress? an account isnt created for me when i use this
Hi Philip,
After you’ve installed the WPForms plugin on your site, you’ll want to activate the license key found in your WPForms account. To get to the license key field on your website, you’ll go to WPForms > Settings > General and paste the license key from your account into the available field.
I hope this helps! 🙂
Excuse my lack of proper jargon, but does this plugin support a dynamic/changing navigation menu options? for instance, once user logs in, i don’t want the option to be in menu “Sign in” rather it should say “User X” or “Log out”.
Hi Dominic,
Our User Registration allows users to create a WordPress account for your site and when they log in, they’ll be able to see the black dashboard bar at the top of the screen which will give them the option to log out. What the addon doesn’t do, however, is change any navigation options that you may added yourself on your site.
I hope this helps!
Hey Guys, great feature and helpful article. One question → Is it possible to also customize the Password Reset page (when clicking on the link, the redirect will default to the standard WordPress wp-login.php page)?
Thanks!
Hi Emil!
In WPForms we don’t have the ability to customize such pages and forms, unfortunately.
I apologize for the inconvenience.
Have a good one 🙂
Hiya
If I understand correctly, I create a user registration form which I have done, and a login in form which I am about to do. So, I would send the customer first to create a registration, and have that form redirect them to the log in form. (and that log in form has its own page so next time they go straight to log in)
Now, 1/ if the customer wants to go to our woocommerce shop is that login going to pull their details through for the order form automatically or is there some linking from WP to WooCommerce I have to do? and 2/we have a service booking form – once logged in, when they clink on the link for the service booking form will their address details etc automatically pull into that form, or again, do I need to do some linking?
Hi Sue — We’d be happy to help! When you get a chance, please drop us a line in support so we can assist.
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 🙂
Another question..
on the login page, can I somehow give the option to next go to the booking forms, ie course registration, service bookings, online shop – would I be right in thinking I would redirect them to a page upon which I have those links all there to select where they want to go?
Hey Sue, Absolutely! You can go to confirmation settings of the form and here you can set up a redirect. After login, users will be redirected to this page.
Please feel welcome to reach out to our support team in case you need further help on this.
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 🙂