The login page, just like the landing page of a website, is very important for business owners who want to convert traffic. Just like the landing page, the login page needs to be sophisticated for visitors to just provide their details without much hassle.

Most of the best login pages are straightforward, they have employed a minimalist style with no ads and marketing gimmicks; just the login in form with a background image or two.

There are a few different ways of creating login pages that woo visitors and encourage them to come back.

• If you are good at coding, (simple HTML and CSS), you should be able to create a simple yet appealing login page with a few basic codes.
• For newbies, it is easier to customize the login page that comes with the website builder’s template. Most website builders and templates, (WordPress, Weebly, Shopify, Joomla and others) come with ready-templates, and all you need to do is edit them to meet your needs.
• You can also use simple plugins and themes to create a login page. Plugins are good because they allow you to customize your login page with the click of a button. They can be used by newbies as well as experienced web designers.

The method you choose to customize your website login page will be determined by your skill level. While coding may be a good method for one person, another may not know where to place which code. Plugins are good, but some are premium.

Read on to learn how you can create and customize a beautiful login page.

Use Simple HTML/CSS

Creating and customizing a login form in HTML and CSS is done in three easy steps: deal with HTML markup, position the different elements of the login form and lastly, style the different elements to make them look appealing.

HTML Markup

Here, you will add simple HTML tags to create the actual form. The HTML part consists of a container, the form itself and a couple of other inputs. By entering the code correctly, you will be able to create a simple login form with a username part, a password part, a checkbox and a login button. The components, however, are not arranged well.

<div id="container">
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="
username">
<label for="password">Password:</label>
<input type="password" id="password" name
="password">
<div id="lower">
<input type="checkbox"><label for="checkbox
">Keep me logged in</label>
<input type="submit" value="Login">
</div>
</form>
</div>

Positioning the Elements

You can then style the different parts of the form by adding a simple code like the one below. This will place the different components in different positions.

html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}

After this, you can position the different elements of your login page as per your specifications. First off, you will need to specify the basic elements, such as the font color and then positioning the form at the center of your page for balance. Here, you can add any font color you like, whatever you consider beautiful. However, it is always advisable to ensure that the form remains simple so as not to confuse the visitors.

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}

At this point, the form may still be looking wonky, and you can make it better by adding a bit of structural style. To do this, start by ensuring that the elements of your login form are not squashed together and are easily legible. You can add the following code to ensure that neatness on your form.

form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}

Your login form will now be looking simple and nearly complete with the different elements well positioned. However, you need to style the various input areas of your login form to make them look even better. Here, you will be specifying color, font size, adding some padding, margins, the width of the different elements and other basics such as the color that appears when you hover your mouse or click on an element. Add the code below.

p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13 px;
margin-right: 20 px;
}
p a:hover {
color: # 555 ;
}
input {
font-family: "Helvetica Neue" , Helvetica,
sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
}

Since you want your login page to look even more beautiful, you can add a little more customizations to make the login button and the checkbox look a little stylish. Add the following code.

#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20 px;
}
input[type=checkbox] {
margin-left: 20 px;
margin-top: 30 px;
}
.check {
margin-left: 3px;
}
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
}

Style the Form Elements

At this point, the elements are well positioned and look sophisticated enough. The login form is ready but you can still make it a little more beautiful by adding CSS styling codes. You can start the process by making the container rounded corners, and then giving it a shadow to enhance its look and bring out a sense of depth. To do that, enter this code below to the container area.

background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );

Adding the above code to the container area will make the container code look like the one below:

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50 %;
left: 50 %;
margin-top: -140 px;
margin-left: -170 px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );

After you have styled the container, you can now style the different input areas with a similar code. Add the code below, and your input areas will look a lot nicer than they were at the beginning.

border: 1 px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}

Now the whole password input code will look like the one below. The login form will be looking awesome, but there is still more styling that you can do to enhance the look of your form even further.

input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}

You now need to make the login button look better and distinct. To do this, enter the code below on the submit section of your code.

font-size: 14 px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
inset 0 1px 0 rgba( 255 , 255 , 255 , .5 );
cursor: pointer;
}

The whole code of your submit section will look like the one below and you will have changed your login button color and other aspects, and you will have a simple login form like the one below.

input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
inset 0 1px 0 rgba( 255 , 255 , 255 , .5 );
cursor: pointer;
}

The login form now looks good. It is advisable to leave the form that simple. Instead of adding other elements and cluttering the page, you can add your business’ logo and a single image. Visitors tend to be distracted by so many details. Ergo, you will want to have a website login page that is as simple as it can be but still beautiful and enticing making the visitors come back again. You can take examples of login forms from some popular websites such as Snoggle News, Dropbox, Freshbooks, MailChimp and Theidealist among others. Websites such as Google and Facebook have also employed the minimalist style, and their login pages look great with just a login form, company logo, and a few other details.

jQuery Login Boxes

jQuery Login Boxes have been used on a large number of websites, and they are always looking innovative and have found their way into the new-age website login form designs. They look simple yet stylish. Unlike in the past, login nowadays happens in a simple page and you do not have to worry of any jQuery setbacks.

With jQuery, you can create a login button on your website’s homepage, which directs your visitors to login page which is jQuery powered. The form contains Ajax call and uses an external PHP script to verify the credentials of the login to either grant or deny access. With jQuery, it is easy to add a registration link just below the login box. This makes the process smoother and allows the user a smooth experience. Your visitors will find it easy to locate the registration/signup page on your website. You can also use the same login box to access your account.

Just like when you are using HTML and CSS to create and style your login page, you need to have the login box here speak a little bit about your business in a way that does not clutter the page. The login form you create with jQuery is simple and look beautiful. However, you will need to add an image or just your business logo to make it more appealing. Login pages should be user-friendly.

Website Builder Login Form Templates

The best beginner friendly way of creating an appealing login form is through the website builder’s login form templates. Here, you do not need to know coding, and you do not even need to have ever created any other website; login forms are created with the click of a button. Website builders such as Weebly and WordPress offer freemium and premium forms.

To create the login page, install the form plugins and then visit the settings page of the template/plugin to customize it to your liking. In WordPress, you will be needed to install WPForms and then enter your purchase code to verify. Visit the settings page and click on Addons. Here, you can add any element you want. Click User Registration Addon, and you are good to go.

Click “Create new page” and then select “user login” form. A template will appear with all the fields pre-created, and all you need to do is click on a field to edit it. After editing each field, click on the settings tab and decide what should happen after a visitor has logged in; you can direct them to a certain URL.

After you have created the form, create a new page for the login form. An editor will appear and at the top of it, click “add form.” A popup will appear, and you can select the form you just created. You can continue editing the page to meet your needs better, or you can save and publish. You can add the custom login you just created as a widget on the sidebar of your website.

When dealing with login templates provided by the website builder, the process is more or less the same; install the template, edit it to your liking, create a new page and insert your created form. This is recommended for those who are new in website design.

Third Party Themes and Plugins

Themes

Your website builder may have provided a login template or theme, for free or premium, but it may not meet your needs. Luckily, there are numerous third party themes and plugins especially for WordPress. Themes are like templates for the whole website that bring in different styles and with most of them, you will be able to get a stylish and attractive login page; theme not only impacts the login page but also other aspects of your website.

You will need to choose a theme with a login page you love. The good thing is that with most themes, you can have a tour of the features before you install. Themes cost anything between $2 and up to more than $100. Themes, just like the web builder templates, are easy to edit. You can change the design colors, fonts and sizes to your liking and tastes.

Themes can be from your website builder, premium themes, or can be from third party developers such as Themeforest.

Plugins

Plugins are simple; unlike themes that affect almost all aspects of your website, there are plugins for different aspects of your website. Ergo, you can install a plugin just to create a login form or a registration form. Plugins are available for free and some are premium; choose one based on your budget and your needs.

All website builders will have plugins for you to choose from; whether you are using Weebly, Joomla or WordPress, there are numerous themes. To create a login page using a plugin, visit your dashboard to view the list of available plugins for your website builder. Install the plugin you want and you will be taken to a checkout page where you pay for the plugin.

After installing the plugin, you will be prompted to edit the different elements; click on each element to edit and then click save changes. Create a new page and add the form you have created using the plugin.

Conclusion

A login page needs to be simple just as much as it needs to be appealing. Different login page designs have been witnessed in the recent past. Only choose the login page creation method that you are comfortable with; do not choose to code if you are not well versed with codes. You can get design assistance from a professional, but even better, you can get help designing your login page.

People have also used social logins. Here, you let visitors login with their social media account details such as Facebook or Twitter. This is a good option too seeing that it is simple enough and also enhances your business’ social media presence and performance. You can check out the login pages of popular websites to get insights on how to style your website login page; without cluttering it and without leaving out details.