Seven Creative Ways to Make Your Custom Login Form Stand out

Trying to find the easiest way to create a custom login form for WordPress can feel like you are looking for a needle in a haystack.

The out-of-the-box login form that comes with WordPress is very generic and includes WordPress branding, which, let’s face it, confuses visitors. Seeing someone else’s logo instead of yours isn’t very inviting. Whenever I see it, it reminds me of a closed door to a room I’m not supposed to enter. For some, that might be enticing, but for others, it’s a turn-off.

Have you ever tried to customize the WordPress login form template? I’ll just say this, it’s not as easy as you would hope, either. Not only do you need to be familiar with the WordPress codebase, but you also have to know how to navigate the WordPress.org documentation, which can become tedious. Who has time for that?

The User Management add-on for Ninja Forms is the best login plugin for WordPress, and here’s why; It’s lightweight yet fully customizable. In just a few minutes, you can create a custom login form that represents your brand without having to wade into the pool of custom code, turning a generic form into a unique spectacle. Come with me as I walk you through seven creative ways to enhance your login form.

Seven ways to customize your WordPress login form

1. Quickly add your brand’s logo to the custom login form.
2. Match your brand’s style guide to make the submit button pop!
3. Get your form to stand out by adding a modern background.
4. Add a logo redirect
5. Password reset? Add one with the password reset merge tag.
6. The user hasn’t registered yet? Add a back-to link to the login form.
7. They’ve logged in; now what?  How to create a redirect.

1. Make your mark by including your logo

A logo can be added to your form via the HTML field.  Add the field to your WordPress form by clicking the blue/+ icon at the bottom right.  Then drag and drop it into place. Next, click on the media icon. Doing so will open up the WordPress Media library dialogue box. Choose a logo that was already added to the library or upload a new one to add it to the form.

To position the logo, use the alignment icons. Doing so will center the logo to the right, left, or center of the HTML field.

 

 

2. Match your brand’s style guide to make the submit button pop!

To make presentational changes to the custom WordPress login form that include backgrounds, formatting, and positioning ( i.e., margin & padding ), you will need the  Layout and Styles add-on. Once installed, open the Styles dropdown via the Submit button and look for the section titled Element. This is where you can edit the background color, text color, width, margin, and more. 

• Background Color: select black  ( #000000 )from the color picker
• Border Width: 2px
• Text Color: choose white ( #ffffff ) from the color picker
• Toggle the Show Advanced CSS Properties to green and add border-radius: 20px; to the Advanced CSS field

To change the button’s hover state, open the section named Element Hover Styles.   

• Background-color: select White ( #FFFFFF )
• Border Style: select Solid
• Border Color: black ( #000000 )
• Toggle the Show Advanced CSS Properties to green and add a cursor-pointer;  to the Advanced CSS field

Every field comes with these styling properties. So give it a try and take your form fields to the next level!

3. Get your form to stand out by adding a modern background.

Each form comes with its own styling properties once you install and activate Layout and Styles. You can find them by navigating to Form Fields > Advanced > Styles.  Look for the section named Container Styles.  This is where you will apply the styles to update the background of the form.

• Border Style select Solid
• Border Color add #f4f4f4
• Margin enter 20px
• Padding enter 5%
• Toggle the Show Advanced CSS Properties to green and add border-radius: 20px;  to the Advanced CSS field

I encourage you to explore the rest of the styles section.  These styling settings really come in handy when you need to create unique forms. 

🎗 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.

4. Set up a logo redirect for your WordPress login form

To add a redirect link to your logo, click on the logo to highlight the image. Click on the link creator icon found in the text editor menu. Add your chosen URL and Insert.  Now when your user clicks the logo, they will be redirected to the URL you have added. 

5. How to Add the “Lost Password” link to your WordPress login form

Add the HTML field to your WordPress form by clicking the blue/+ icon at the bottom right. Then drag and drop it into place. Type in, Forgot Your Password, and add the {user_management:password_reset} merge tag by copying + pasting or by selecting the tag via the merge tag icon. This will give your users a way to reset their passwords. 

6. Add/remove a “back-to” link from your custom WordPress login form

Add the HTML field to your WordPress form by clicking the blue/+ icon at the bottom right. Then drag and drop it into place. Access the HTML editor by clicking the carrot icon located to the far right of the editing menu to apply HTML markup. 

Copy + paste the Font Awesome code snippet into the HTML editor to add the left-arrow icon to your back-to link.

 

<i class="fa fa-arrow-left" aria-hidden="true"></i>

 

Next to the icon snippet, type the words back to < your page or post name >  and link. You can do this via the link creator. Highlight the name of the page or post, click the link icon, add your URL, and Insert. 

7. How to include a page redirect for your WordPress form

To create a page redirect, head over to the Email & Actions section of your form.  Click the blue/+ sign at the bottom right to find and add the Redirect action.  Add the URL of the page you would like the user to be redirected to in the URL field.

To redirect the user to the home page, simply add a “/” to the URL field.

🎗 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.

You did it! Customizing your login form with Ninja Forms is a breeze. 👨🏼‍💻

Now that you know how easy it is to create a custom login form with our User Management add-on for Ninja Forms, it’s your turn.  Get User Management a la carte, or get it free with our Elite membership. Besides creating and customizing login forms, you can produce your own registration and user profile forms too. But what about user editing? I’m glad you asked; with User Management, you can do that too. Simply assign user roles directly from your Ninja Forms dashboard.

Looking for an easy way to set up a content paywall? Combine forces with our Front-End Posting and Stripe add-ons to create exclusive content that only your WordPress users can access and contribute to.

All of our products come with a 14-day money-back guarantee and priority support. So get your hands on one of our most utilitarian add-ons today. You won’t be disappointed.