How to Create a WordPress Custom Login Form for Better Site Branding

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.