Consider this concise example, where we apply a subtle effect to empty input fields.

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Constructing the Form

We’ll start by setting up the HTML structure for our form. Each input field includes a placeholder text and is assigned a class called .highlight-empty.

<form>
  <input type="text" placeholder="Enter your name" class="highlight-empty">
  <input type="email" placeholder="Enter your email" class="highlight-empty">
</form>

Applying Styles with CSS

Once we’ve established our form structure, we can move on to styling our input fields where the use of the :placeholder-shown pseudo-class is critical.

input {
  font-size: 0.9rem;
  margin: 10px;
  padding: 5px;
  width: 20%
}

.highlight-empty:placeholder-shown {
  border: 2px solid lightcoral;
  box-shadow: 0 0 5px lightcoral;
}

html, body {
  background: #333;
}

body {
  padding-top: 4em;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Understanding the CSS Code

In the CSS code above, we’ve used the :placeholder-shown pseudo-class to apply a light coral border and a subtle glow to the input fields when they are empty and show the placeholder text. As soon as the user starts typing, the effect disappears, indicating that the input has been provided.

.highlight-empty:placeholder-shown {
  border: 2px solid lightcoral; /* Adds a light coral border to empty fields */
  box-shadow: 0 0 5px lightcoral; /* Adds a subtle glow to empty fields */
}

Other CSS properties applied include the styling of input fields (input), the styling of the body (body), and the arrangement of form elements (form). However, you’ll likely work within more complex structures. For instance, you might apply the input styles within specific form components instead of universally. Similarly, the form styles here are rudimentary. They’d usually be adjusted to match your website’s layout and design requirements.

Exploring the Final Result

Check out the GIF below to see the result of this code in action.

To customize further, you can experiment with different border styles, colors, and box-shadow properties. In addition, you can combine :placeholder-shown with other CSS selectors, such as :not, to create effects for different input states.

💡Pro Tip: Note that :placeholder-shown selects the input itself, while ::placeholder styles the text. As a result, the styling of the placeholder text might be affected due to its parent-element relationship.

Many WordPress plugins come with fully functional contact forms that can be installed and used right away, but we believe in beautiful design and in your right to style it however you choose. Therefore the first video will focus on how to create, but mainly how to style, your contact form using CSS3.

There is not much HTML5 in this video tutorial, as the contact form is built with code available in previous versions of HTML, but you can use this first video tutorial as a way to reinforce many of the things we learned together in the previous tutorials. So without any further discussion, here it is.

Contact Form HTML and CSS Tutorial For Dummies

What you will learn:

• the basics of CSS3 styling
• how to create an HTML5 contact form
• how to create an elegant CSS3 contact form

By the end of this HTML contact form tutorial, you will have something similar to the screenshot above. Feel free to view the demo just after the video tutorial to get a feel of what you will be making in under 25 minutes. It’s a good exercise for both beginners and experts alike!

Challenge: Making Contact Form Responsive and Validation

Can you make this contact form responsive? I will give you a hint, but it will be somewhat irrelevant to a contact form, but surely you are smart enough to work your way through it, yes?

Hint: It’s all about the media queries!

Of course, it is crucial that you validate the fields so that you will not receive any unnecessary information, or secure that all the information you need from your contact form are all useful. In order to do that, you will need to include HTML5 validation in your code. It is pretty easy to do, all you need is patience and the willingness to test new stuff!

How to Make the Contact Form HTML Work

Although making it functional will require a little bit of server-side programming, I’ll be glad to point you in the right direction!

To make this form function for your website, you’ll need to code it with PHP.

Note: the PHP contact form tutorial focuses on just making it work functionally, but you will just need to add security features to it yourself (Google it!).

Good luck!

I am sure that almost everyone can agree on the importance of contact forms for use on everything from static HTML websites to WordPress powered websites. I found myself many times creating custom PHP contact forms for clients and always changing things around to suit the needs of the client.

After going through this tutorial, you should have a better understanding of creating custom PHP contact forms. These can be really useful in your own projects, as well as projects for clients.

I have used these for basic contact forms, surveys, and even to create simple help desk ticket systems for clients. The list is endless, just be creative. I will discuss everything that you will need to know to make your own custom HTML and PHP forms.

View the Demo and Download the Source Files.

How To Create a Simple PHP Contact Form

First things first – To create a form in our HTML document, we will need to select the location we will be placing the form. Generally, most forms will start with:

<form>

and end with the closing tag of:

</form>

The form action will tell this form what to look for when the submit button is pressed. In this example, we will be working with below, this is a second file that we will be creating called mail.php

The beginning line of our code that begins our form shows our action of mail.php – and the method of POST – which will trigger the PHP script to send the email when the forms are filled out, and the submit button is pressed.

Action and Method of mail.php

<form action="mail.php" method="POST">

The last thing we will need to understand before starting our form is the use of INPUT – which will tell browsers to allow an input of text type, to complete a field. Using this along with textarea will allow us to create our form and create a space for users to input information that we will later use PHP to send via email.

Each one of these areas we create on our form will be given a NAME that we will also be using on our PHP document to mark the information being sent.

Taking a Look at Contact Form

Now let’s begin our example. We will create a very simple starting point that I will show you how to modify for your own needs. Understanding the code and how it works will help you use it better and help ensure you have less problems when placing this on a live website.

I will start with a very basic contact form to get us started. Here is the basic HTML that we will use to create our contact form.

HTML Form Code

<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>

Using the code above – You can insert this directly into your HTML document to create the form itself. Later we will look at modifying this more and creating something a little more custom.

Contact Form PHP: How To Actually Create It?

Now, to make our form work, we will need to use a little PHP. This part is actually easier than most people think. We will be using the PHP $_POST function, and creating labels for each name that we have created in our form. This will allow us to further customize the form later on as well.

Now we will create our mail.php file – This is what will generate the email from the form and actually mail it:

mail.php

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "emailaddress@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>

Notice our three name tags we have created. We have Name, Email, and Message. These are the three that we created in our form. This is the information that will be sent from our contact form via email.

The $recipient area will need to be modified to fit YOUR email address where you wish to have the email sent to. You can also modify the other information as needed such as the subject, and success message. We will get more into these later when we begin customizing the form even more.

Add More Customization To Contact Form

Now since we have the basic idea of the contact form HTML, and tying it together with our PHP to create a basic contact form, I will begin to go a step further and now show how you can customize this form even more to fit your needs for your project.

I will show how to add a dropdown option box, and explain adding checkboxes or radio buttons for selection items to be chosen, and emailed from the form.

Adding Dropdown Option Boxes

To add a dropdown box, we will need to add the section within our HTML code to create the area for the form, as well as add the proper code to our PHP to recognize the input from the HTML and be able to send it.

Here is a simple example HTML contact form dropdown box:

<p>Dropdown Box</p>
<select name="dropdown" size="1">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<br />

In the example above, we have created a dropdown box with options 1 through 4. The option value will be what is actually submitted, and the Text within the will be what the user actually sees when making a selection. Remember that this will need to be inserted into your HTML document within the form fields.

Here is an example of the completed HTML contact form we have created with the dropdown box included:

HTML Contact Form with Dropdown Box

<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Phone</p> <input type="text" name="phone">
<p>Dropdown Box</p>
<select name="dropdown" size="1">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<br />
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>

Now we will need to change our contact form PHP to make sure the information from the HTML form is rendered and submitted to the provided email address.

Let’s take a look at our modified PHP that will now have the dropdown box readable.

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$dropdown = $POST['dropdown'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "emailaddress@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>

Notice that we have added “dropdown” as a $_POST variable that will now be sent. The dropdown name itself comes from the HTML portion that is labeled as

The size option lets you select how many rows will be viewable at one time. The most general setting for this is “1” but you can change it to more if you would like.

Adding Radio Buttons and Checkboxes To a Contact Form

To add Radio Buttons and Checkboxes, the same will apply as the above. We will need to add it within our HTML code, and then modify the PHP to take the input from the contact form HTML and properly send it.

Here is an example of the HTML code for adding Checkboxes:

<p>Request Phone Call:</p>
Yes:<input type="checkbox" value="Yes" name="call"><br />
No:<input type="checkbox" value="No" name="call"><br />

Full Example Using All Elements In Contact Form

For this example I have changed some of the names to we can create a custom contact form for our completed example now that we have a basic understanding of the way it works.

Our HTML Contact Form Code

<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Phone</p> <input type="text" name="phone">

<p>Request Phone Call:</p>
Yes:<input type="checkbox" value="Yes" name="call"><br />
No:<input type="checkbox" value="No" name="call"><br />

<p>Website</p> <input type="text" name="website">

<p>Priority</p>
<select name="priority" size="1">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
<option value="Emergency">Emergency</option>
</select>
<br />

<p>Type</p>
<select name="type" size="1">
<option value="update">Website Update</option>
<option value="change">Information Change</option>
<option value="addition">Information Addition</option>
<option value="new">New Products</option>
</select>
<br />

<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>

And again, our PHP that will correspond with this HTML form to make it work:

Our completed PHP Contact Form Code

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$call = $_POST['call'];
$website = $_POST['website'];
$priority = $_POST['priority'];
$type = $_POST['type'];
$message = $_POST['message'];
$formcontent=" From: $name \n Phone: $phone \n Call Back: $call \n Website: $website \n Priority: $priority \n Type: $type \n Message: $message";
$recipient = "youremail@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>

Customizing the Thank you Message on Contact Form Success

Now for the final part of this tutorial, I will explain how to customize the very last line of our PHP script we have created. The basic way will just echo “Thank You” on our screen, but we need to make a better way so our viewers can easily have a way to get back to another page.

This will be useful in creating a custom page redirect, or a link to bring the user to a different area after completing the form. Remember that when working with PHP, some of the HTML will be different as to not disrupt our PHP code.

We will need to use single quotes “instead of double quotes” within this one, so we don’t end our PHP arg.

We will be adding a space after the “thank you” message, and adding a link back to our “form.html” document (Or whatever link you wish to create) – and also changing the color of the link using inline styles.

Let’s take a look at the modified echo command in our mail.php file:

echo "Thank You!" . " -" . "<a href='form.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";

You can play around with the example above to create your own thank you message for your site. Inline styles are not required; I just used them for this example instead of including a stylesheet. Remember that the echo command is only seen on a successful send of the message. Otherwise, the error message is sent.

Download The Contact Form Files

I am providing the download for the completed form for you to play with. Feel free to use it any way you wish, and customize it for your own projects. There are still many other things that can be done with PHP for your contact forms.

One that you might want to consider is CAPTCHA, which prevents spam email. You can also customize the other portions of the form and create your own! Have fun, and I hope that everyone has enjoyed the article and finds it useful for their own needs.

You can download the example files by clicking [HERE]

Note: I have included a few styling examples using CSS in the demo download. This will allow you to see the forms styled and understand how to style them using CSS.

If you’re designing custom forms like user signups/logins, contact pages, or settings pages, these plugins can add some extra dynamic features to jazz up your static input fields.

JCF Forms

One of my favorite JS form plugins is JCF Forms created by the team at PSD2HTML. The cryptic JCF acronym stands for JavaScript Custom Forms and it lives up to its name.

You’re able to customize default select menus, range sliders, input fields, upload forms, pretty much everything you’d need in a form.

This is totally free and built on jQuery so it should be no trouble to setup. You can also find more docs and info on the official GitHub repo if you want to learn more.

iCheck

Checkboxes and radio buttons are a staple of web forms. But they’re also the toughest to customize, and the default styles look very bland.

Thankfully the iCheck plugin is super easy to setup and customize without much JS knowledge. This works on jQuery and comes with a handful of pre-designed themes you can edit with ease.

But aside from looks, this plugin also supports keyboard inputs, 32 custom options and almost a dozen callback methods to handle user behaviors.

Parsley.js

If you prefer vanilla JS then you might like Parsley, a free JS-based form validation library. This is totally free to download and it’s one of the most complete plugins made for data validation.

Parsley is unique in that it doesn’t require complex regular expressions to get it working. It comes with built-in validators for all types of inputs like phone numbers, credit cards, addresses, and emails.

Check out the examples page to see if Parsley could be right for you.

FloatLabel.js

I don’t mind placeholder text but I vastly prefer the FloatLabel.js technique over anything else. This creates a placeholder for default fields but moves the text just above the field once it’s focused & filled in.

This way you can add information to the field with ease and still keep the form label in clear view.

Note that this is a jQuery plugin so it does require a copy of that library. But setup is pretty simple and you can follow the instructions from GitHub to get this running smoothly.

Tooltipster

Complex forms do well with tooltips guiding the user along the way. That’s the beauty of Tooltipster, a free jQuery plugin that lets you add tooltips anywhere on the screen.

You can define these tooltips based on user behaviors like hover, click, focus, or while entering text into a field. You can also customize their styles and animations while connecting these tooltips into Ajax requests or callback methods.

Flexselect

If you don’t like the default HTML select menu style then take a look at Flexselect. This free jQuery plugin restyles all select menus into dropdown panels tied to input fields.

These can blend much nicer into a typical layout, and they do feel easier to use.

Note the setup is a little tricky because this plugin has a couple of dependencies, but it’s also flexible enough to customize and restyle to your liking.

Fort.js

Some web sites display progress bars at the top of the screen to show completion of a form. This is more useful on lengthy forms where the user might want to know how soon they’ll be done.

With Fort.js you can quickly add this effect to your site with just a few lines of code. The plugin is totally free and works with any number of input fields.

Also check out the live demo to see how this would look on a real page.

Switchery

The classic iOS-style switch redefined toggle inputs. Those original on/off switches got a redesign in iOS 7 which led to libraries like Switchery.

This free open source plugin lets you create on/off toggles in the same style as iOS 7 inputs. Each switch works on a checkbox where the user clicks to either check(on) or uncheck(off) a setting.

You can spice up any settings page or profile page by swapping out simple checkboxes for these on/off toggles.

jQuery CC Validator

Ecommerce shops have to deal with credit card validation and handling sensitive inputs. Data security is a whole separate topic but this jQuery CC Validator is by far the best plugin for validation.

It’s totally free, and open source, running on top of the jQuery library. It’s super easy to setup, and the live demo shows just how much you can do with this incredible plugin.

Rangeslider.js

One of the newer features in HTML5 is the range input. This lets the user slide an input bar and select a range of numeric data.

But the default style is pretty basic so plugins like Rangeslider.js have grown in popularity.

This free jQuery plugin works as a polyfill of the HTML5 range slider. For browsers which don’t support it, you’ll still get the classic range input, so this is perfect for all web & mobile browsers.

BS3 Datepicker

You can find tons of free Bootstrap frameworks out there for awesome web templates. And the same goes for plugins that add functionality onto the Bootstrap library.

One such example is the BS3 Datepicker made for custom web forms.

There is rarely a one-size-fits-all solution for date picking. But this plugin offers a genuine interface that most people will understand how to use even at a glance. Plus it’s fully designed around the Bootstrap styles, so it blends right in.

Flatpickr

If you want a datepicker that’s a little easier to setup check out Flatpickr. This free plugin uses pure JavaScript to create a full date/time picker with tons of optional features.

The demo page is a great place to check out and see what this thing can do. It uses a simple JavaScript animation along with a basic drop shadow effect to blend into any layout.

Anyone who needs a date/time picker with lots of room for customization will get a lot out of this plugin.

jQuery File Uploads

Handling user file uploads is by far the most complex form task. You need to create an input that works on all devices, but also accepts specific types of files and knows how to process them on the backend.

This plugin fits nicely with other libraries like jQuery and Angular so it’s really the best choice for anything related to file uploads.

Just note this does take some effort to configure so you’ll need to know your way around JavaScript.

Ideal Forms

In the newest version of Ideal Forms 3 you’ll find a host of great features like auto-form validation and custom form designs.

These designs include checkboxes, radio buttons, input fields, calendar UIs, and even support for 3rd party plugins.

The setup process is very lengthy but gives you dozens of extra form features with one library. Take a look at the GitHub setup guide for more details.

jQuery Autotab

Last but certainly not least is the jQuery Autotab plugin by Matthew Miller. This lets you define a certain length for any form input so it’ll auto-tab onto the next form once completed.

It works best for fields that require a set number of characters like phone numbers or birthdays. Check out the live demo to see how this works and if it could help to extend your web forms.

These users can only give us input via forms, and although they have been around for some time now, the majority of designers are still not able to design them properly.

Ask Only For What You Need

If there’s a thing you can do right away that is more important than anything else, this is it. I rarely fill in a form and think “this is spot on”; too rarely for a world in which UX designers pretend to be on top of their shit.

The shorter your forms are, the lower the drop-off rate. I know we’re not here to discuss conversion rates and how to improve them, but put your expectations aside for a while. This is important to know.

Endless studies show that the more information you ask from your users, the less likely they are to give it to you. This is why Facebook, Twitter and G+ created APIs that allow people to log in on different websites through their service.

It is called a social login. I’m sure you’ve seen the “Log in with Facebook” button more than once. Different sources mention that conversion rates improve with between 20 to 60 percent when signing up can be done a single click.

Don’t get me wrong. I am not implying this is what you should do. Actually, MailChimp advises against it, but the point is still the same: a single click on the sign-up button can be up to 60% more effective than filling in lots of details about yourself. It is similar to the 1-Click purchase on Amazon, which is clearly worth billions.

Back to the point. The less information you ask for, the higher your chances will be that users will sign up. What’s the most frustrating is that most of the time you don’t even need that much information. Are you selling a digital product? Don’t ask for my physical address; you don’t need it. Are you selling a pair of shoes? E-mail for order confirmation, address for shipping, and credit card information for payment – that’s it. You don’t need anything else.

If you want to join Spring on the iPhone, they only ask you to fill in four fields. Quick and easy.

It’s frustrating to see how many e-commerce experts just don’t get it. If you rather risk losing me for some extra piece of information (which you might use later to upsell me), you should drop off this design career of yours. Once you lost me as a potential client, not only am I not coming back, but I will buy from your competition, which in the end will harm you. Don’t drive me away by asking for more information than you need.

In case you would like to have more information about me, but you don’t really need it to sell me something, ask for it after I’ve signed up or ordered a product. When you already have my money in the bank, you can ask me for whatever you want. I may not want to give you any further information (some will, though), but at least you didn’t lose a sale.

This is a step that you can go and do right away. This should be the starting point for improving your forms: ask only for what you need.

Stick to a Single-Column Layout

If you want to keep your customers off confusion, make sure you stick to a single-column, vertically aligned input fields. This way the users will not be confused about which field is to be completed next. If you have a two-column form, they could either complete it by column or by row. Which is the right way? Nobody knows.

If you only have an input field per row, there is no confusion. The speed of the process will be higher and the confusion, hence the frustration of the user, will be lower. This also reduces eye movement because users don’t need to do any jumping and only need to look one way: down.

Fine-tune Your Labels in Contact Forms

Labels are also a crucial factor. Without them we would not be able to understand what needs to be filled in and this would clearly render our forms useless. There are several ways of showing the labels, but there are also some guidelines you need to stick to.

First, always keep your labels outside of the input fields. This is an issue when labels are inside the user fields and disappear whenever the user clicks on a field. Users should always be able to see what needs to be filled in. The fact that the label disappears whenever the field is active does not make it easy for users.

If you don’t have a lot of vertical space, keep the labels to the left of the input fields. Otherwise, you can always have them on top of each field. When you have the labels on the left, always align them to the left. This makes it easier for the human eye to quickly scan the form. If you are designing for the Western world, keep this in mind. We read from left to right, so it is clear that we prefer hard edges along the left.

In this case, the designer chose to keep the labels on top of the field.

Separate related content

Although your form is long, you can make it look better by using colors and other visual elements. This is what the principle of proximity refers to. Several elements that are placed close to each other indicate to the human eye that those elements are somewhat related. This makes sense for forms that are longer than your usual 3-fields sign-up process.

If you structure your forms in this way, it will make them look organized and clean. Whenever you have a group of input fields that can be grouped together, make use of a thin horizontal line to unite related data. You can also use a light background color to create the same effect.

Indicate primary & secondary actions

In forms you always have a primary action, the one you want the user to take, and a secondary one, which can be a “cancel” or a “back” button. That’s the one you don’t want your users to click on unless they really have to, but it still needs to be there. You can’t give both buttons the same weight and importance.

The solution is to design the two buttons in a different way so that the visual impact of the secondary action is minimized. The “Cancel” button should not be given equal status to the primary action because it is not as important. This also guides the user towards what you consider the successful action.

The primary action is in focus here. The human eye is drawn by it and not by the “Cancel” button.

Optimize Your Contact Forms For Mobile

Although there are countless web forms on the web and lots of UX designers out there, there is a frighteningly high amount of forms that are not optimized for mobile.

This is a biggie in a world where mobile takes over.

Optimizing forms for mobile means reducing the effort the user has to put in. Even a change as small as indicating the type of keyboard you want to pop up for each field can make a huge difference. What’s frustrating about this is that optimizing for mobile only takes a few lines of code in some cases, but developers don’t always do it.

Indicating the type of keyboard that matches each field is a good starting point. If you have to fill in credit card digits, don’t make the standard keyboard appear, but the digital touchpad. You might think “Yes, this is common sense, why do it differently?”, but most designers tend to ignore this detail for whatever reason.

During check-out processes, it’s important to note that I, as a user, have the credit card in my hand. I am on the brink of handing you my details and giving you access to my money. This is a place where your system can’t give me the slightest sign of weakness because the probability of me dropping off is huge. When the user has a credit card in his hand and is willing to pay, the experience has to be flawless.

This is what differentiates the big fishes from the small ones.

Many times, system automation is the solution to user frustration. You can quickly develop some “hacks” that will make my experience ten times easier. Luke Wroblewski from Google explains in the video below how easy it is to reduce my effort as a user. Take a look.

#

Reduce Errors In Your Contact Forms

There is a lot you as a designer can do not only to reduce errors, but also to handle them and guide the user through when they happen. There is a number of interaction design patterns that can be taken advantage of for better error handling.

Validation is a key word for reducing errors. If you validate inline, you don’t give users many chances of being wrong. A good validation will automatically indicate to the user that he only wrote 15 digits instead of the 16 a credit card has, that the email address ends in “.xom” instead of “.com” and that not all the required fields have been completed.

The system will therefore not allow the user to click on “next” or “submit” unless he rights the errors. The advantage of using inline validation is that feedback is instant. The user will immediately know something is not right and will fix it. If you first return the form with errors after it is submitted, you risk frustrating the users.

Inline Contact Form Validation – How?

Inline validation has its own guidelines. You always need to be good at handling errors and giving users spot on feedback, but it is even more crucial when you validate forms instantly.

Letting the user know something is wrong can be a tricky one, but nothing good code can’t solve. Showing “error” as a message and highlighting the field with red is not enough anymore. Error can mean anything nowadays. Is the formatting wrong? The email? The length of the password? Did I forget to fill in a required field? Let me know what the error is if you want to reduce my effort. As Steve Krug said in his book, don’t make me think

Let me know what the specific error is and I will be able to fix it without any effort. If you make it easy for the user, the user will be more willing to go past the mistake and still give you his information, whatever information that is.

Forms with real time feedback score better at completion rates and customer satisfaction and decrease errors with up to 22% – Luke Wroblewski

Input masks are also something that you might want to make use of. They are most of the time used successfully on portable devices, but this is not an excuse for not taking the same approach to desktop forms too. Input masks don’t only prevent errors, but indicate what the correct format for an answer looks like.

You can quickly indicate what the valid formatting looks like via input mask and you can keep the formatting consistent by letting users know they are formatting the input right.

Input masks also help to collect only the information needed. If an input mask is correctly added on a field where the user has to type his credit card information, the mask will force the system not to collect any other input than digits. This means that if you, by mistake, tap on “space” or “slash”, the field will simply ignore it.

This is how an error should look like. Moreover, it also has a bit of a personal touch to it.

Reformatting the input from the user is also something you could do with a few lines of code. This means that regardless of how the user fills in his credit card information (with spaces or not), the system will (re)format it the right way.

This is the right way to implement inline validation and, trust me, sticking with it will only improve the experience you offer via your mobile website or apps. As mentioned earlier however, don’t only do this on mobile. Inline validation is something you can make use of on all devices regardless of their screen size.

If you choose not to validate inline, that’s fair enough. Keep one thing in mind, though: when on the error page, always prefill the fields that I’ve filled in correctly. Just because the email address was wrong you can’t make me write everything all over again. That’s just laziness on your side.

Helping Hints

If you want to further ensure that users have minimal chance for mistakes, use helping hints either to the right of the field as a secondary label or in the field as a placeholder. This is okay to use as a placeholder because it is not critical (as the label is), so it can disappear when the field is active without it feeling uncomfortable. This way you can guide the users to filling in the correct information. This will not only decrease the number of errors, but will also increase the completion speed by a reasonable margin.

Wishlistr shows labels to the left and helping hints to the right of the field.

These helping hints can be shown in different ways, including as tooltips. This is also a good way of doing it, especially if you have limited horizontal space at your disposal.

Drop CAPTCHA

I know this might sound weird. Why would you drop a feature that should decrease spam? Because it’s annoying. I will not delve too much into it, but there are few things on the web I hate more than captchas.

There are forms in which it makes sense, but not all the time. As long as users have to fill in credit card information, you don’t need captcha. If there’s a credit card involved, it’s not likely that robots are involved.

Wrap Up

Contact forms are one of the web elements that can constantly be improved. When discussing contact forms, all bets are off. It depends so much on the audience and every set of forms you design has to match your audience and their needs.

But in every single case there are a few tips and tricks you can implement in order to offer a better experience. As a starting point, you should always optimize according to these tips.

The reason why Facebook Connect and Sign In with Twitter has become so popular these days is because of their simplicity, since users can sign up just by logging into their Facebook or Twitter account.

If you are using normal Sign Up forms and still require a lot of data from your users, a multi-step form is the best solution. So the form is broken into small sections and the user only sees one section at a time. Also, multi-step forms reduces the space you need on the page.

View the Demo and Download the Source Files

Why Use RhinoSlider For Contact Forms?

In a multi-step form, once you complete the first step, the second step will be displayed and Step 1 will be hidden. Normally we use sliding effects in step transitions. So this a scenario where we can use a Slider differently from its default behavior of creating image slideshows.

There are plenty of great sliders available and no point of reinventing the wheel by creating a slider from scratch. So I chose Rhinoslider for this tutorial as it provides great effects and is very easy to customize. So let’s get started on making a multi-step form.

Introduction to Rhinoslider

Before we create the multi-step form, you should have a basic idea of how RhinoSlider works. They recommend that you generate a custom version instead of a full version with all the effects. So I have downloaded the default version for our tutorial.

You can open the demo file in the browser and it will look something like the following screen.

So let’s look at the demo file code first.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Multi Step Form with Rhinoslider 1.05</title>
 <link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css" />
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
 <script type="text/javascript" src="js/mousewheel.js"></script>
 <script type="text/javascript" src="js/easing.js"></script>
 <script type="text/javascript">
			$(document).ready(function(){
				$('#slider').rhinoslider();
			});
		</script>
 <style type="text/css">
 body { background-color:#fff; }

			#slider {
				width:600px;
				height:250px;

				/*IE bugfix*/
				padding:0;
				margin:0;
			}

			#slider li { list-style:none; }

			#page {
				width:600px;
				margin:50px auto;
			}
		 </style>
 </head>
 <body>
 <div id="page">
		<div id="page">
			<ul id="slider">
				<img src="img/slider/01.jpg" alt="" />;
				<img src="img/slider/02.jpg" alt="" />;
				<img src="img/slider/03.jpg" alt="" />;
				<img src="img/slider/04.jpg" alt="" />;
				>img src="img/slider/05.jpg" alt="" />;
			</ul>
		</div>
</body>
</html>

• You can see that 5 images are placed in the unordered list called #slider.
• Once you initialize Rhinoslider with $(‘#slider’).rhinoslider(), all the images will be assigned to slider and will slide automatically.

Now we have a basic idea of how to use Rhinoslider. So Lets get started on creating multi-step form.

Creating the Multi-Step Contact Form

We need to do some modifications in initializing the code to suit our multi-step form creation process. Consider the modified initialization code below.

$('#slider').rhinoslider({
controlsPlayPause: false,
showControls: 'always',
showBullets: 'always',
controlsMousewheel: false,
prevText: 'Back',
slidePrevDirection: 'toRight',
slideNextDirection: 'toLeft'
});

• In the image slider top button is used to control automatic play and pause. We don’t need it in a multi step form. So we remove it by setting controlsPlayPause: false.
• The controls and numbering on the slider are shown on hover by default. We make it permanent by setting showControls: ‘always’ and showBullets: ‘always’.
• Slider moves on mousewheel by default. So we disable it by setting controlsMousewheel: false
• Finally we change the previous button text to Back.

Creating Form Elements for Steps

Instead of images we want sections of form elements. So in this demo I created a simple registration form with 3 steps called PERSONAL DETAILS, ACCOUNT DETAILS and CONTACT DETAILS. Each section will have some form elements. I am going to replace the unordered list of images with my form elements as shown below.

<div id="wrapper">
 <h3>Account Registration</h3>
 <form action="" >
 <div id="slider">
 <div class="form-step" >
 <div class="row">
 <div class="form-left">First Name *</div>
 <div class="form-right"><input type="text" id="fname" name="fname" class="form-input" /></div>
 <div class="form-error"></div>
 </div>
 <div class="row">
 <div class="form-left">Last Name *</div>
 <div class="form-right"><input type="text" id="lname" name="lname" class="form-input" /></div>
 <div class="form-error"></div>
 </div>
 <div class="row">
 <div class="form-left">Gender *</div>
 <div class="form-right">
 <select id="gender" name="gender">
 <option value="0">Select</option>
 <option value="M">Male</option>
 <option value="F">Female</option>
 </select>
 </div>
 <div class="form-error"></div>
 </div>
 <div class="row">
 <div class="form-left">Address</div>
 <div class="form-right"><input type="text" id="address" name="address" class="form-input" /></div>
 <div class="form-error"></div>
 </div>
 </div>
 <div class="form-step" >
 <div class="row">
 <div class="form-left">Username *</div>
 <div class="form-right"><input type="text" id="username" name="username" class="form-input" /></div>
 <div class="form-error"></div>
 </div>
 <div class="row">
 <div class="form-left">Password *</div>
 <div class="form-right"><input type="text" id="pass" name="pass" class="form-input" /></div>
 <div class="form-error"></div>
 </div>
 <div class="row">
 <div class="form-left">Confirm Password *</div>
 <div class="form-right"><input type="text" id="cpass" name="cpass" class="form-input" /></div>
 <div class="form-error"></div>
 </div>
 </div>
 <div class="form-step">
 <div class="row">
 <div class="form-left">Email *</div>
 <div class="form-right"><input type="text" id="email" name="email" class="form-input" /></div>
 <div class="form-error"></div>
 </div>
 <div class="row">
 <div class="form-left">Mobile No</div>
 <div class="form-right"><input type="text" id="mobile" name="mobile" class="form-input" /></div>
 <div class="form-error"></div>
 </div>
 </div>
 </div>
 </form>
 </div>

• First I have added a div called wrapper and a heading called Account Registration.
• Then I have replaced the ul with a div called #slider.
• Next I have replaced the list items of images with divs with the class “form-step”.
• Then necessary input fields for each section are added accordingly.
• Once the slider is initialized divs with the class containing form-step will turn into a slide.

Now copy the images in the project folder to your demo folder and include the following CSS styles in the demo file.

<style type='text/css'>
        body { background-color:#fff; }
        #wrapper{
            border: 1px solid #DCDADA;
            border-radius: 5px 5px 5px 5px;
            box-shadow: 2px 2px 2px #E1E1E1;
            background: #fff;
            width:700px;
            height:480px;
            background:#f4f4f4;
        }
        #wrapper h3{
            font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
            font-size:16px;
            height:60px;
            background:url(img/title.png) no-repeat left top;
            margin:0;
            padding:16px 0 0 20px;
            text-shadow: 1px 1px 2px #000;
            filter: dropshadow(color=#000, offx=1, offy=1);
            color:#fff;
        }
        #slider {
            background: #fff;
            /*IE bugfix*/
            padding:0;
            margin:0;
            width:700px;
            height:400px;
        }
        #slider li { list-style:none; }
        #page {
            width:600px;
            margin:50px auto;
        }
        #slider{
            color: #000;
            background:#f4f4f4;
            font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
            font-size:12px;
        }
        .form-step{
            padding:16% 3% !important;
        }
        .form-submit{
            cursor: pointer;
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            -moz-user-select: none;
            background: none repeat scroll 0 0 #6F95DC;
            border-radius: 5px 5px 5px 5px;
            color: #FFFFFF;
            display: block;
            margin: 0 20px 20px;
            padding: 10px;
            text-align: center;
            width: 125px;
            z-index: 10;
            font-weight: bold;
            text-decoration: none;
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#94b9e9), to(#4870d2));
            background-image: -moz-linear-gradient(#94b9e9, #4870d2);
            background-image: -webkit-linear-gradient(#94b9e9, #4870d2);
            background-image: -o-linear-gradient(#94b9e9, #4870d2);
            filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
            font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
        }
        .errorDisplay{
            border:2px solid red;
        }
        .form-left{
            color: #717171;
            float: left;
            font-size: 13px;
            font-weight: bold;
            padding: 5px;
            width: 200px;
        }
        .form-right{
            float: left;
            width: 214px;
        }
        .row{
            float: left;
            margin: 5px 0;
            width: 100%;
        }
        .form-step input[type='text']{
            border: 1px solid #CFCFCF;
            border-radius: 4px 4px 4px 4px;
            height: 25px;
            padding: 3px;
            width: 200px;
        }
        select{
            border-radius: 4px;
            border: 1px solid #CFCFCF;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            background: #FFF;
            padding: 2px;
            height: 30px;
            width:205px;
            font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
            font-size:12px;
            background:#f4f4f4;
        }
        select option{
            font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
            font-size:12px;
            background:#f4f4f4;
            color:#717171;
        }
        .form-error{
            color: red;
            font-size: 12px;
            padding: 8px;
        }
        .step-error{
            background:#f5715f !important;
            color:#FFF !important;
            -moz-box-shadow:1px 1px 4px #C6C4C4
                -webkit-box-shadow:1px 1px 4px #C6C4C4
                box-shadow:1px 1px 4px #C6C4C4
        }
        .step-success{
            background:#72e487 !important;
            color:#FFF !important;
            -moz-box-shadow:1px 1px 1px 4px #C6C4C4
                -webkit-box-shadow:1px 1px 1px 4px #C6C4C4
                box-shadow:1px 1px 1px 4px #C6C4C4
        }
        .bullet-desc{
            font-size: 14px;
            font-weight: bold;
        }
    </style>

Now the slider will look something like the image below:

So let’s compare it with our final output screen.

• Left button should be changed to Back
• Right button should be changed to Proceed
• Numbering menu should change to steps on the top bar

Converting Rhinoslider Icons to Buttons

First we have to make sure that we remove the default icons displayed for previous and next buttons and insert buttons for back and proceed. Open the CSS file in the Rhinoslider CSS folder and change the styles for rhino-btn as follows.

.rhino-btn {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    -moz-user-select: none;
    background: none repeat scroll 0 0 #6F95DC;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: block;
    margin: 0 20px 20px;
    padding: 10px;
    text-align: center;
    width: 125px;
    z-index: 10;
    font-weight: bold;
    text-decoration: none;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#94b9e9), to(#4870d2));
    background-image: -moz-linear-gradient(#94b9e9, #4870d2);
    background-image: -webkit-linear-gradient(#94b9e9, #4870d2);
    background-image: -o-linear-gradient(#94b9e9, #4870d2);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

Take a look at the updated form below.

Converting Numbered Menu Into Step Menu In Our Contact Form

We need to change the CSS styles related to the numbering menu in order to get it to the top part and make custom steps instead of just numbers. So update the styles of Rhinoslider CSS file with the following code:

.rhino-bullets li a.rhino-bullet {
    display: block;
    width: 100%;
    height: 90px;
    cursor: pointer;
    background: none repeat scroll 0 0 #F8FDFF;
    border: 1px solid #EEEEEE;
    font-size: 10px;
    text-align: center;
    padding: 10px 0 5px 0;
    color: #000;
    text-decoration:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:13px;
}
.rhino-bullets {
    position: relative;
    top: -438px;
    z-index: 10;
    background: #fff;
    padding:0;
    float:left;
}
.rhino-bullets:before, .rhino-bullets:after {
    position:absolute;
    display:block;
    left:-16px;
    content:' ';
    width:16px;
    height:26px;
}
.rhino-bullets li {
    float:left;
    display:inline;
    margin:0;
    width: 233px;
}
.rhino-bullets li a.rhino-bullet.rhino-active-bullet {
    color:#000;
    background:#fff;
    border-bottom: none;
}

Now the CSS changes are completed and our screen will look like this:

Adding Step Descriptions

Instead of using numbers for steps we planned to use descriptive text about the step with an image. So add the following code right after the initialization part of slider.

var info = ["PERSONAL DETAILS","ACCOUNT DETAILS","CONTACT DETAILS"];
 var images = ["personal-details-icon.png","account-details.png","contact-details.png"];
 $('.rhino-bullet').each(function(index){
 $(this).html('<p style="margin: 0pt; font-size: 13px; font-weight: bold;"><img src="./img/'+
 images[index]+'"></p><p class="bullet-desc">'+info[index]+'</p></a>');
 });

• We got 2 arrays for images and descriptions. Insert the text and images in the order of your steps.
• Each step has a class called rhino-bullet. So while looping through each step we replace the number with the image and text from the array.

Here is our form after the text and image integration.

Adjusting Control Buttons In The Contact Form

In the slider we saw the previous and next buttons for each slide. But for multi-step form we don’t need a previous button in first step. So let’s see how we can remove that.

 $(".rhino-prev").hide();
 $('.rhino-next').after('<a class="form-submit" href="javascript:void(0);" >Proceed</a>');
 $(".rhino-next").hide();

• When the page is loaded, active slide will always be the first section. So we hide the Back button by using $(“.rhino-prev”).hide().
• Then before we go into the next step we need to validate the form. So we hide the default next button of Rhinoslider and insert the Proceed button as shown above.

Validating Contact Form Steps

Generally we have to complete a step before we go to the next step in a multi-step form. In this section I’ll explain how to add validation to each step.

$('.form-submit').live("click",function(){
$('.form-error').html("");
var current_tab = $('#slider').find('.rhino-active').attr("id");
switch(current_tab){
case 'rhino-item0':
step1_validation();
break;
case 'rhino-item1':
step2_validation();
break;
case 'rhino-item2':
step3_validation();
break;
}
});
var step1_validation = function(){
var err = 0;
if($('#fname').val() == ''){
$('#fname').parent().parent().find('.form-error').html("First Name is Required");
err++;
}
if($('#lname').val() == ''){
$('#lname').parent().parent().find('.form-error').html("Last Name is Required");
err++;
}
if($('#gender').val() == '0'){
$('#gender').parent().parent().find('.form-error').html("Please Select Gender");
err++;
}
if(err == 0){
$(".rhino-active-bullet").removeClass("step-error").addClass("step-success");
$(".rhino-next").show();
$('.form-submit').hide();
$('.rhino-next').trigger('click');
}else{
$(".rhino-active-bullet").removeClass("step-success").addClass("step-error");
}
};

• Our Proceed button has a class called form-submit. So every time we click on the proceed button the above validation function is called.
• You can find the current tab using rhino-active class. Then based on the step you call a custom validation function.
• I have shown the necessary validations for step 1 in the above code. Validations for the other two steps can be found in the project files.
• If validation error is found, we display the errors in front of the field and make the highlight the step in red color by adding step-error class to active step.
• If there are no errors, we make the step green by adding class step-success.
• Then we hide our custom proceed button and display the default next button of Rhinoslider.
• Then we make the next button click automatically by using $(‘.rhino-next’).trigger(‘click’) function which will move the form to the next step.

Following screens shows the contact form on validation errors and validation success.

Customizing the Rhinoslider Plugin

Now we are coming to the final part of the tutorial. We need to make some changes to the default Rhinoslider functionality to get things done as we need. You can click on the steps and move to the other steps in the demo we have now. So let’s see how we can disable it.

Disable Click Event for Steps

Open the rhinoslider-1.05.min.js file in the js folder and comment the following code section which provides the clickable functionality.

vars.buttons.bullets.click(function(){
var itemID=$(this).attr('id').replace('-bullet','');
var $next=vars.container.find('#'+itemID);
var curID=parseInt(vars.navigation.find('.'+vars.prefix+'active-bullet').attr('id').replace('-bullet','').replace(vars.prefix+'item',''),10);
var nextID=parseInt(itemID.replace(vars.prefix+'item',''),10);
if(curID<nextID){
next($slider,settings,$next);
}else if(curID>nextID){
prev($slider,settings,$next);
}else{
return false;
}
if(settings.autoPlay){
pause();
}
});

Customizing the Previous Button Functionality

I have made the previous button hidden in the initial step. Now we need to show it in other steps. So let’s customize the Rhinoslider previous button functionality to meet our requirements.

vars.buttons.prev.click(function(){
prev($slider,settings);
if(settings.autoPlay){
pause();
}
});

The code above shows the default functionality of previous function. So let’s change it to the following.

vars.buttons.prev.click(function(){
$(".rhino-next").hide();
$('.form-submit').show();
$('.form-submit').html("Proceed");
if(($slider.find('.rhino-active').index()) != 0){
prev($slider,settings);
}
if($slider.find('.rhino-active').index() == 1){
$(".rhino-prev").hide();
}
if(settings.autoPlay){
pause();
}
});

• Each time you click the previous button, by default the next button will be loaded. So we have to manually hide it and show our custom form submit button first.
• Line $slider.find(‘.rhino-active’).index() will give you the index of the active step.
• If step 1 becomes active, we hide the previous button. Otherwise we call the default previous button functionality by calling prev($slider,settings) .

Customizing Next Button Functionality

Also we need to customize the Rhinoslider next button functionality to meet our requirements. Let’s see how it works.

vars.buttons.next.click(function(){
next($slider,settings);
if(settings.autoPlay){
pause();
}
});

Above code shows the default functionality of previous function. So let’s change it to the following.

vars.buttons.next.click(function(){
$(".rhino-next").hide();
$('.form-submit').show();
$(".rhino-prev").show();
if($slider.find('.rhino-active').index() != ($slider.find('.rhino-item').length -1)){
next($slider,settings);
}
if($slider.find('.rhino-active').index() == ($slider.find('.rhino-item').length -2)){
$('.form-submit').html("Submit");
}
if(settings.autoPlay){
pause();
}
});

• We need to hide the next button and display our custom form submit button on each next button click as we did earlier with previous button.
• Also we need to show the previous button(Back button).
• Then we display Submit as the button text if the form is on the final step.
• If the active step is not the final one, we need to call next($slider,settings) to slide to next step.

We have completed the multi-step form creation process using Rhinoslider. Now you should have something similar to the provided demo. I suggest you download Rhinoslider and follow the tutorial steps to create the form instead of just looking at the project files.

Finally compare your version with the demo version and make the necessary changes.

Customizing Multi-Step Contact Form

Now we have a 3 step form. Its easy to add or remove steps according to your needs. Use the following guidelines for customizations.

• Add or remove step descriptions from info array.
• Add or remove step images from images array.
• Add or remove validation functions for steps.
• Adjust the width of rhino-bullets li class to match your needs.

Contact Form Tutorial Conclusion

It will take you around 2 hours to get used to Rhinoslider and create this Multi-Step contact form. But I think it’s worth doing it since you will have a form which can be used any time you require a multi-step form. You can add or remove steps as you wish.

In real-life projects you will not have the time to do everything from scratch. So tools such as this are useful to learn as you might need to customize existing plugins.

Good thing, it can be done easily. The great thing about WordPress is that each part of the backend can be customized by just using the PHP functions.

In today’s tutorial, I am going to show you how to customize WordPress login screen the way you want it. First, we will change the logo and then the color scheme and the some other elements. Let’s get started.

Resources You Need to Complete This Tutorial

• WordPress installation with the twenty-fourteen default theme
• Time and Patience

The Default WordPress Login Screen

What We Are Going to Build

Changing the Logo

WordPress uses CSS to display a background image. It is usually inserted between an H1 and an anchor tag. However, for this tutorial, we’re going to use the functions.php file inside the twenty-fourteen WordPress default theme.

First, place your preferred logo (png file format) inside the images folder on twenty-fourteen WordPress default theme directory (for this tutorial, i used custom-login-logo.png logo). Please take note that the logo should have a maximum dimension of 80 x 80px; however, you can also change the dimension inside a custom CSS file.

Next, open up functions.php file inside twenty-fourteen WordPress default theme. We will be using login_enqueue_scripts hook to insert CSS to the head of our login page to load our preferred logo. Insert the following code after the last line of the functions.php file and then put your preferred logo filename inside the directory path.

function login_logo() { ?>
	<style type="text/css">
    	body.login div#login h1 a {
        	background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-login-logo.png);
    	}
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'login_logo' );

Changing the Link of the Logo

By default, the logo links to WordPress.org site. You can also change this link to your preferred logo and redirect it to your own site. To do this, use the following hooks below and paste it to your functions.php right after the hooks for the login logo.

function login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'login_logo_url' );

Changing the Design of the Login Screen

To customize the style of the default WordPress login screen, we need to add styles of the login page. To do this, we need to use hooks for our own CSS file. This will override the styles of the default login screen.

First, we need to create a stylesheet inside our CSS folder on the twenty-fourteen WordPress default theme (for this tutorial, I named my stylesheet custom-login-styles.css) and then add the following hooks on the functions.php file.

function login_custom_stylesheet() { ?>
	<link rel="stylesheet" id="custom_wp_admin_css"  href="<?php echo get_bloginfo( 'stylesheet_directory' ) . '/css/custom-login-styles.css'; ?>" type="text/css" media="all" />
<?php }
add_action( 'login_enqueue_scripts', 'login_custom_stylesheet' );

Next, open the CSS file you created under the CSS folder of the default twenty-fourteen WordPress theme. We, first, customize the background color and the font of the login screen using the following code.

body.login {
	background-color: #3d3d3d;
	font-family: Helvetica;
}

Now that we have changed the background color and the font of our login screen, let’s put a nice gray color background on the holder of our login form.

.login form {
	background: #f3f3f3;
}

Next, customize the looks of the text boxes of the form for the normal, focus and the hover state.

.login form .input,.login input[type=text],.login form input[type=checkbox] {
	background: #fff;
	border: 1px solid #b7b7b7;
            	padding: 5px;
}
.login form .input:hover,.login form .input:focus,.login input[type=text]:hover,.login input[type=text]:focus,.login form input[type=checkbox]:hover,.login form input[type=checkbox]:focus {
	background: #fff;
	outline: none;
}

Then, change the background color of the login button and give it some padding on the left and right side. I’ll also set the font size to 13px, making it look like a flat button.

body.login div#login form#loginform p.submit input#wp-submit {
	border-radius: 0;
	background: #ffab00;
	outline: none;
	border: none;
	padding: 0 25px;
	text-align: center;
	font-size: 13px;
}

Finally, let’s change the link text (Forgot Password and Back to Login link) for normal and hover state as well and then position both to the center of the screen.

body.login div#login p#nav {
	margin: 20px auto;
	text-align: center;
}

body.login div#login p#backtoblog {
	margin: 0 auto;
	text-align: center;
}
.login #nav a:hover,.login #backtoblog a:hover {
	color: #ffab00;
}

Final Words

That’s all folks! I hope you learned from this tutorial and turn your plain WordPress login screen into to your preferred design. If you are not comfortable doing all this PHP stuff, you can use WordPress plugins like Branded Login Screen and Login Screen Manager.

Do you know any other great tricks to do the same thing? We want to hear from you!

We hope that now you can see the huge advantage of WordPress and the possibilities in his use. We agree that maybe it’s not suitable for every possible project that you want to build, but for majority it is. Share your thoughts.

Resources You Need to Complete This Tutorial

• Open Sans (Google Font)
• Flat icons
• Google jQuery Hosted Library
• Validator jQuery Plugin
• Reset.css
• HTML5 Shiv
• Subpattern Background
• Time and Patience

What We Are Going To Do

Setting Up

First, we need to set up our CSS and JavaScript libraries links on our head section.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Create a Flat Login/Sign up Page with Validation, Styling &amp; Semantics Of Forms jQuery Plugin</title>
   <link href="css/style.css" media="screen" rel="stylesheet">
   <link href="css/reset.css" media="screen" rel="stylesheet">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,700italic,800italic,400,300,600,800' rel='stylesheet' type='text/css'>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/validator.js"></script>
   <!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

 </head>

The HTML

For our HTML file, we’re going to wrap everything in a container class, followed by class flat-design-form and then set up our menu tabs, which is an unordered list, with a class tabs.

    <div class="container">
        <div class="flat-design-form">
            <ul class="tabs">
                <li><a class="active" href="#login" id="login-tab" name=
                "login-tab"><span id="login_icon"></span> Login</a></li>

                <li><a href="#register" id="register-tab" name=
                "register-tab"><span id="signup_icon"></span> Register</a></li>
            </ul>

Next, we’re going to create a div with an ID of login and a class of form-display and class show. These two classes will be used by the jQuery code later to hide and show our login and registration sections. Then, we we’re going to wrap items with a class item.

  <div class="form-display show" id="login">
        <h1>Login</h1>

        <form action="" method="post" novalidate="">
            <fieldset>
                <ul>
                    <li>
                        <div class="item">
                            <input data-validate-length-range="6" name="name"
                            placeholder="Username" required="required" type=
                            "text">
                        </div>
                    </li>

                    <li>
                        <div class="item">
                            <input data-validate-length-range="6" name=
                            "password" placeholder="Password" required=
                            'required' type="password">
                        </div>
                    </li>

                    <li><input class="button-login" type="submit" value=
                    "Login"></li>
                </ul>
            </fieldset>
        </form>
    </div>

Notice that we use a semantic data-validate-length-range=”6″. This will be used by our validator jQuery plugin to limit the range of text entered on a specific field. To check on the list of semantics, you can use for this jQuery plugin, you can check here.

Now that we’re done with the login section, let’s move on the registration section. For the registration section, we’re going to wrap everything with a div that has an ID register and a class form-display and class hide. By default, this section will be hidden. And then, again, we will wrap each item with a class of item and use semantics for specific fields.

<div class="form-display hide" id="register">
        <h1>Register</h1>

        <form action="" method="post" novalidate="">
            <fieldset>
                <ul>
                    <li>
                        <div class="item">
                            <input data-validate-length-range="6" name="name"
                            placeholder="Username" required="required" type=
                            "text">
                        </div>
                    </li>

                    <li>
                        <div class="item">
                            <input data-validate-length="6,8" name="password"
                            placeholder="Password" required='required' type=
                            "text">
                        </div>
                    </li>

                    <li>
                        <div class="item">
                            <input class='email' name="email" placeholder=
                            "Email" required="required" type="email">
                        </div>
                    </li>

                    <li>
                        <div class="item">
                            <label><input name="url" placeholder="Website link"
                            required="required" type="url"></label>
                        </div>
                    </li>

                    <li><input class="button-register" id='send' type="submit"
                    value="Sign Up"></li>
                </ul>
            </fieldset>
        </form>
    </div>

By this time, you can get similar look like the image below.

The CSS

For our CSS, let’s start adding the general styles. This will include the style for the body and class container.

body {
  background: url('../img/low_contrast_linen_2X.png');
  color: fff;
  font-family: 'Open Sans';
}
.container{width: 960px; margin: 0 auto;}

Now, let’s style our menu tabs.

.flat-design-form{
  background: #f58020;
  margin: 130px auto;
  width: 400px;
  height: auto;
  position: relative;
  font-family: 'Open Sans';
  -webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    1px 1px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         1px 1px 2px 0px rgba(50, 50, 50, 0.75);

}
#login {
    padding-bottom: 20px;
}

#register {
    background: #0DA1FF;
    padding-bottom: 20px;
}

#login-tab {
    background: #f58020;
}

#register-tab {
    background: #0DA1FF;
}

span#login_icon {
    width: 16px;
    height: 16px;
    left: 8px;
    position: absolute;
    background: url(../img/login.png)no-repeat;
    display: block;
}

span#signup_icon {
    width: 16px;
    height: 16px;
    left: 110px;
    position: absolute;
    background: url(../img/sign-in.png)no-repeat;
    display: block;
}

.tabs {
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 6px;

}
.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs a {

  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 15px 30px 15px 30px;
   text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

}

Next, let’s start styling our forms. This will include the text boxes with their specific type field.

.form-display {
  padding: 0 20px;
  position: relative;
}

.form-display h1 {
  font-size: 30px;
  padding: 10px 0 20px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

form {
  padding-right: 20px !important;
}

form input[type=text],
form input[type=password],
form input[type=email],
form input[type=url]{
  width: 100%;
  outline: none;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #fff;
  border: none;
  color: #545454;

   font-family: 'Open Sans';
  font-size: 13px;
}

.show {
  display: block;
}
.hide {
  display: none;
}

For our buttons, we’re going to give it a border on the bottom with a hexa color #1B78B2 to create a nice flat button. Then, we will set its hover and active state.

.button-login{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 14px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Open Sans';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.button-login:hover {
  background: #1B78B2;

}

.button-register{
    display: block;
    background: #f58020;
    padding: 10px 30px;
	font-size: 14px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Open Sans';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #c36518;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #c36518;
  box-shadow: inset 0 -2px #c36518;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.button-register:hover {
  background: #fb7100;

}

.button-register:active {
  background: #136899;
}

Afterwards, let’s set up styles for our placeholders. We will use selector and vendor prefixes to target the type of each browser.

::-webkit-input-placeholder {
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

:-moz-placeholder {
/* Firefox 18- */
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

::-moz-placeholder {
/* Firefox 19+ */
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

:-ms-input-placeholder {
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

Finally, to make our validation form more lively, we will set up codes for our validation error with CSS3 animation. We will set each item to position relative, style its alert message and push it to the right side of each text boxes. Notice that we use CSS3 transition property to make a smooth effect when showing the error messages.

.item {
    position: relative;
}

.item .alert {
    float: left;
    margin: 0 0 0 20px;
    padding: 3px 10px;
    color: #FFF;
    border-radius: 3px 4px 4px 3px;
    background-color: #ef3030;
    max-width: 170px;
    white-space: pre;
    position: absolute;
    left: -15px;
    opacity: 0;
    z-index: 1;
    transition: .15s ease-out;
}

.item .alert::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-color: transparent #ef3030 transparent transparent;
    border-style: solid;
    border-width: 11px 7px;
    position: absolute;
    top: 5px;
    left: -10px;
}

.item.bad .alert {
    left: 0;
    opacity: 1;
    top: 5px;
    left: 343px;
    font-size: 12px;
    padding: 10px;
}

The jQuery

For our jQuery code for menu tabs, we’re going to put on the code below. This will hide and show the login and registration section using the class show and class hide.

(function($) {
    // constants
    var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';
    $('.tabs').on('click', 'li a', function(e) {
        e.preventDefault();
        var $tab = $(this),
            href = $tab.attr('href');
        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);
        $('.show').removeClass(SHOW_CLASS).addClass(HIDE_CLASS).hide();
        $(href).removeClass(HIDE_CLASS).addClass(SHOW_CLASS).hide().fadeIn(620);
    });
})(jQuery);

Next, let’s add the following code to enable the functionalities of our validator jQuery plugin.

      // initialize the validator function
      validator.message['date'] = 'not a real date';
      // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
      $('form').on('blur', 'input[required], input.optional, select.required', validator.checkField).on('change', 'select.required', validator.checkField).on('keypress', 'input[required][pattern]', validator.keypress);
      $('.multi.required').on('keyup blur', 'input', function() {
          validator.checkField.apply($(this).siblings().last()[0]);
      });
      // bind the validation to the form submit event
      //$('#send').click('submit');//.prop('disabled', true);
      $('form').submit(function(e) {
          e.preventDefault();
          var submit = true;
          // evaluate the form using generic validaing
          if (!validator.checkAll($(this))) {
              submit = false;
          }
          if (submit) this.submit();
          return false;
      });

Conclusion

That’s it! You’re done! In this tutorial, we’ve created a flat webpage with a smooth animation and validation using CSS3 and validator jQuery plugin. This is not just the jQuery plugin you can use. There are a plenty of jQuery out there but, for me, I find this easy to use with a cool animation for alert messages.

You might also like to read about the history of Adobe Photoshop, Apple, Google Doodles, Online Shopping, or Social Networking.

And this comes naturally, since forms are the quickest way of having users:

• subscribe to a newsletter
• add comments to an article, pose questions or ask for support
• fill out applications (e.g. job applications)
• answer surveys
• perform purchases
• join clubs and forums

Let’s see the evolution web forms over the past 10 years. It’s simply a lot of fun!

1. Pre-web era forms – the prints that we all despise

Yes, yes, these ones do bring bad childhood memories of endless queues at public administration desks. Perhaps this is the reason most of us don’t enjoy filling out any kind of forms. Hopefully, those prints will become out of fashion before we run out of wood.

2. The early days of WWW: 1991 – 1998

The first years of the Internet (1991-1996) remain obscure as far as web forms are concerned. Since we don’t have NeXT software on hand anymore, there’s no possibility of taking screenshots from back then to see how forms looked (if they existed at all).

As we all know, in a short time WWW became a mass medium and electronic forms made their way in. However, they were awfully rudimentary. Customer feedback was processed through executable files running on the hard disk. It was hard to find anything like an online contact form. For subscribing to a service, you most likely had to download a form, fill in a hard copy and send it to the webmasters via postal services.

The web forms at that time mainly performed search and submission tasks. The interface was dead simple and dull, HTML based with no CSS of course.

Back Then:

Now:

3. Form use in online sales: 1994 – present

1994 brought two major enhancements in the web arena: e-banking and online ordering (pizza, as you may guess). Shortly after, Amazon launched its online shopping service in 1995 and eBay the next year. Naturally, all of them were using web forms.

Those days, e-commerce was hindered by the limitations of credit cards that didn’t support online transactions. The issue was solved around 2000, once online payment processors appeared.

Web forms could then exhibit products for sale and then direct submitters right to the payment gateway where they could complete the transaction.

This was a major leap for the internet making its entrance in the day-to-day life of regular people.

Back Then:

Now:

4. Web forms in the days of social media: 2004 – present

Two major landmarks for social media are 2004 (the launch of Facebook) and 2006 (the birth of Twitter). Facebook had the most interesting evolution in regards to web forms.

From the very beginning Facebook provided its own tools for creating simple polls and for planning events. However, the original Facebook forms were simple ones, they had security issues and as for styling they used to hold the blueish standard skin of FB.

Things got better though. In August 2006, Facebook launched the free Developers API, which led to a burst of applications, widgets and tools. Around 2010 came the first form management apps for Facebook.

Users could now have their own signup forms for fan pages, reuse personalized forms brought from outside and build specific mailing lists. Since then, Facebook forms and surveys are among the most popular tools for businesses that perform social media marketing.

Back Then:

Now:

5. Web forms and security

SSL protocol for data encryption was released by Netscape in 1994. Anti-spam tools for web forms such as CAPTCHA and password protection have only been available since 2000. In the dark ages before, there were knight battles with hackers and spam.

How could you prevent bots from signing up countless times? Using IP validation methods that aren’t by far infallible. One famous hijack of a web form occurred in November 1999, when slashdot.org had the idea to run an online poll asking what was the top graduate school in computer science.

Even if the IPs were stored in order to prevent duplicate entries, the students of Carnegie Mellon managed to create a program that voted thousands of times for their university.

The next day, the competitors (students at Massachusetts Institute of Technology) put up their own program and the two rival bots took over the poll, leaving the valid submissions in shadow. Fortunately, security options we have today are by far more efficient.

6. Contemporary profile of web forms

An important improvement came around 2007 when the first WYSIWYG form builders made their way in. Any internet user could then create forms. HTML knowledge is not mandatory anymore, since the remotely hosted form generators provide wizards with intuitive interfaces.

The portrait of a form that stands at the top of the evolution chain includes, by case:

• slick design, CSS customizable
• various publishing options: on blogging and social media platforms, on regular websites
• e-mail submissions received, secure data transfer and storage
• capacity to draw reports over data
• payment processing
• integration with 3rd party apps to extend its functionality.

Finished!

Today’s websites are bursting with creative web forms. Contact pages aim to be both visually appealing and efficient as lead generation tools.

Forms are successful in performing a wide variety of tasks: online ordering, event registration, research across the web, feedback. With CSS and HTML 5 at hand, forms can be successfully styled so that they blend in with the overall look and feel of any website.

Here is a list of 10 places that are great for an opt-in form (and remember, you can choose more than one).

1. Above the Header

If one of your top priorities is to build your opt-in email list, wouldn’t it make sense for the form to be the first thing that people see? Since the header is the first thing that most visitors look at when visiting a site, placing an opt-in form right above the header puts in a position of gaining maximum exposure.

There are a few ways to put an opt-in form above your header, but using a simple WordPress plugin is the easiest way to go. The Hello Bar and ViperBar are two of the more popular tools for this purpose.

On my website I prefer to use ViperBar because it has split testing capability. Some visitors will see a message that says “Free updates and access to all my ebooks…it’s like a dream come true!” and some will see “Get free updates from Reality Burst…No-spam Ever! EVER!”

2. Inside the Header

Another great place to put an opt-in form is within the actual header. In the image above I have social media icons inside my header, but could have placed opt-in links or forms instead. I chose not to do this because I already have a form above the header.

This is an awesome location for the same reason as the above-the-header form…it will get a ton of impressions.

3. A Feature Box

A feature box is a content box located right below the header. It is usually used to highlight some of your best or most popular posts, but why not use a feature box to highlight your opt-in form instead?

John Paul Aguiar uses a feature box beautifully. This essentially extends your header with a sub-header and places a great looking opt-in form above the fold before the reader even gets to any content.

4. Top of Sidebar

One of the most popular locations to place an opt-in form is the top-right of the sidebar. As you can see, Brian Clark’s copyblogger uses this location for the opt-in form.

You should be careful with this location. The top-right corner has been shown to be a blind spot. Using design features (like color) to make the form stand out is a good idea.

In this case, the opt-in form is a dark (bringing in the header colors) over a light background:

5. In the Middle of Your Post

People often forget that you can actually place an opt-in form within the body of your content. This is a great location because you already have the reader’s attention. And while you have their attention, you can politely remind them that they can subscribe to your list.

6. End of a Single Post

The end of a single post is also a good position for an opt-in form. By placing the form here, you are not distracting the reader while they are going through your content, but intercepting them as they are finishing reading. It provides a natural flow into the opt-in form without breaking their concentration on the content.

This can be done by hard-coding it into your WordPress. Or there are a few alternatives that do not require coding on your part. Specifically the AddSig and End Content plugins allow you to add an opt-in form code to the end of your post with a simple copy-and-paste.

7. The Footer

By placing a form in the footer you can intercept those curious visitors that scroll all the way to the bottom of the screen. The great thing about the footer opt-in form is that it will be visible on every page.

The vast majority of visitors will never make it down to the footer. But those that do are displaying interest. It would be a shame not to remind them at this point that they should subscribe.

8. A Lightbox Pop-up

Ahh, the dreaded pop-up. Yes most people find it annoying. But the thing is…they still work, and that is why they are still around. The conversion rates for sign-ups through pop-ups are too high for them to go away (especially if there is a good, convincing offer).

9. Signatures (Email, Forum, Etc)

While most people focus on opt-in form placement for their websites/blogs, it is important to remember the only source of possible subscribers!

Most email marketing service providers offer an opt-in link option. This allows you to provide a simple link that leads to an opt-in form.

The options here are limitless. Place a link in your email signature. If you are active in forums, place a link in your profile signature there. Every time you sign off in a communication is an opportunity to promote your mail list.

10. Social Media Pages (Facebook, Twitter)

This one is similar to signatures. Why not use your social media account to drive some potential list subscribers?

You can add a shortened link to your Twitter Bio. Add links to your Facebook profile. Or even create an actual opt-in form on your Facebook fan page with iFrames.

And don’t forget you can send out Facebook messages and tweets with these links as well! :)

As you can see, there is no shortage of locations to place your opt-in forms. You can choose multiple places or play around with them one by one.

It is important to remember that there is no one-size-fits all solution and that each person’s results can vary with each variation. This post should give enough ammo to go play around and experiment!

We shown you where to put your forms on your website. Now it’s time to see how we can make our forms to perform at their peek.

Download and Preview

Let’s begin with the best part. You can see our working demo or download our files and jQuery plugin.

Usability background

Before any coding I think it’s important to know why are we doing all these things. It is all about user experience and to make things the best they can be.

The man who started discussing masked passwords (as far as I know) is Jakob Nielsen, with his extremist opinion expressed in  stop password masking article. But I really think we don’t need to stick with just two options. I think we can improve all these techniques, like what mobile developers have done, improving user experience by creating a “new” way to input password data.

Don’t get me wrong, sometimes we do need to just keep masking passwords for security reasons. You know, sometimes we are near suspicious people or jealous girlfriends just waiting for a single mistake to steal our password and make big damage to our online life. But sometimes we don’t. I mean, we don’t need to let our software ready only for the worst case.

We have to be ready for the worst and the best. From IE6 (argh!) to Chrome 14.0.803.2 beta. From jealous girlfriends to hurried surfers. This is the tricky part, trying to be the best in most cases.

This is why we can’t just let passwords to be masked by default. We have to give a better option to our loyal users.

Getting started

What we will do here is to get a common password field, change it to text and create a mask above it, which is filled as you type. With this you can do anything with the “mask” without affecting the input content itself.

Maybe this image will better explain how it works:

Well, finally, let’s get started on coding.

We will start with a pretty basic form markup. As you all know it’s quite simple, so let’s add two fields, one that should come with a default value and another in blank, for you to play with as you want.

<div id="container">
	<h1>Sign Up!</h1>
	<form action="#" method="get">
		<label>
			<span class="title">Old Password</span>
			<span class="desc">This is our awesome password field with default value. Try it out!</span>
			<input type="text" name="oldpassword" id="oldpassword" value="tHis1$myP4swrd." />
		</label>
		<label>
			<span class="title">Password</span>
			<span class="desc">This is our awesome blank password field. Try it out!</span>
			<input type="password" name="password" id="password" />
		</label>
	</form>
</div>

Ok, then we need to call our magic jQuery and plugin files. Let’s do that:

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> // call jQuery from google! </script>
	<script type="text/javascript" src="jquery.hp.js"> // call plugin </script>

Well, let’s create our basic plugin file. You can see some tips about it in our jQuery Smooth Table of Contents Plugin, where we have a really simple structure.

(function($){
 $.fn.hoverpass = function(options) {
	//Our default options
	var defaults = {
		bullet: "•", //which should be the "masking" character
		font: "'Lucida Console', monospace", //please just use MONOSPACE fonts
		bg: "#fff", // background style for bullets
		free: "", // add your own additional styling here
		freeBul: "float: left; overflow: hidden;", // add your own additional styling for bullets here
		delay: 500, //how long it takes to create the bullet over the last character, in milliseconds
		delayHover: 3000, //how long it takes to hide again a hovered character
		animation: 500, //how long it takes the animation itself
		maxSize: 10 // maximum number of characters, to prevent  bullets exploding input's size
	};

	//let's extend our plugin with default or user options when defined
	var options = $.extend(defaults, options);

    return this.each(function() {
		//our action goes here
    });
 };
})(jQuery);

Above we defined our default variables, let me explain some of them a little bit:

• bullet – Is what will mask our password. You can use any character but use just one character or HTML entity.
• font – This is really important, this plugin only works with monospaced fonts. Since in other types, each character has his own width, we can’t “mask” it.
• bg – If you use any background in your input, then you should apply it to your mask too, since it will be above the input.
• free – Here you should add margins in order to compensate any padding that your input has. Furthermore you should set your input’s font-size here.
• maxSize – This is important if your password field is too short. If you don’t adjust it you may get some extra bullets exploding your input’s size.

At this point you have a basic plugin, that is called via $(elem).hoverpass(), defined by our second line $.fn.hoverpass = function(){}.
I know, this name sucks. I would be glad if you send suggestions about better names :).

Change our input type to text

I don’t know if you’ve tried this before, but let me tell you something, you just can’t change the type of inputs. This happens due to security reasons, right? Well, seems that just IE will worry about it (you can do it via old JavaScript in real browsers).

Anyway, what we have to do then is create a “clone” of current input without type property.

There is several ways of doing this, I’ve done it this way:

return this.each(function() {
	//let's declare some variables, many as a "shortcut" for options
	var  bullet = options.bullet,
			font = options.font,
			bg = options.bg,
			free = options.free,
			freeBul = options.freeBul,
			delay = options.delay,
			delayHover = options.delayHover,
			animation = options.animation,
			lastBul = "";

	//since we just can't change a field's type, we'll remove it and append a brand new text input on it's place
	var oldElement = $(this); // caching element, much better performance
	var inputHTML = '<input type="text" style="font-family: '+  font +'; " />'; //this is our basic input text, with our monopace font
	var input = oldElement.after(inputHTML).next(); //appending our simple text field with our styling (font-family) AND caching it as var "input"

	/****
		we are saying here:
			define the following variables: attr , i (zero), attrs (array with all oldElement attributes), l (size of attrs)
			while our counter (i) is smaller than attributes lenght (l) increase our counter and run this code
	*/
	for ( var attr, i=0 , attrs = oldElement[0].attributes , l =attrs.length ; i < l ; i++){
		attr = attrs.item(i)
		if (attr.nodeName != "type" &amp;&amp; attr.nodeName != "style") { //well, we defined our type as text and font-style!
			input.attr( attr.nodeName, attr.nodeValue );
		}
	}
	oldElement.remove(); // bye, bye input type="password"!
});

Create our mask and bullets

Wow, at this point, when you define $(elem).hoverpass() it will turn into a monospaced text input. Pretty cool, huh? But we want more than this.

Now we will create our bullets container. The only really interesting thing in this two lines is that jQuery element caching again. You really should be using this simple technique:

	// let the game begin
	var maskHTML = '<div class="hpMask" style="position: absolute; cursor: text; height: 1px; font-family: ' +  font + ' ; ' + free + ' " />'; //our container with his styling
	var maskContainer = input.before(maskHTML).prev(); // appending our container for bullets with styling (font-family, free)

Now we’ll prepare our bullets HTML, since it will be used several times, and add some bullets when we have a “value” attribute defined.

	var bulletHTML = "<span class='hpBullet' style='background: " + bg + "; " + freeBul + " '>"+ bullet + " </span> "; // our bullets HTML with styling (bg, freeBul)
	var countBullet = 0; // this is our counter, it is important to prevent our mask to get bigger / smaller than our input or its maximum size

	//since we use it from different places, it's better to add it via function
	function addBullet() {
		// add our last bullet, but hidden, and show anything that isn't last bullet
		lastBul = maskContainer.append(bulletHTML).find(":last-child").hide();
		maskContainer.find(":not(:last-child)").each( function(){ $(this).show();  } );
		//start timer to show  lastBul
		lastBul.delay(delay).fadeIn(animation);
		countBullet++;
	}

	//first loop adding bullets when we have a default value
	for ( i=0 ; i < input[0].value.length ; i++){
		addBullet();
	}

Well, at this point you should see again a textfield but if you have a value attribute defined, you’ll see a lot of bullets and the last one fading after one second. Although, if you type, nothing happens.

It’s time to play with keyboard

We now need to append new bullets every time something is typed in our password field, and remove one bullet if the pressed character is delete or backspace.

We could do this via keypress, keyup or keydown.

Thinking about it a little bit with keydown and keypress (they are very similar) we bind “pressing key” and with keyup we bind “releasing key”. Looking a little closer, you might notice that in our case it means that keydown/keypress is called before we have any change in our field’s value but keyup is called after any change occurs.

This is why we need to use keyup here. We have to look at our field’s value and see “hey, have you changed your size?” in order to append or remove bullets. This is because we could have several scenarios when user selects part of the password, press delete in the beginning of the field and much other things that would be too painful to bind as separated actions.

So, let’s do it:

//let's bind all keydown and create / remove our bullets ; we need do use keydown in order to detect special characters in non-gecko browsers
	input.keyup(
		function(event) {
			//check if something was really typed
			if (input[0].value.length > countBullet) {
				addBullet();
			} else { //ooops, delete or backspace?
				//then we check if something was really deleted
				while (input[0].value.length < countBullet) {
					maskContainer.find(":last-child").remove();
					countBullet--;
				}
			}
		}
	);

Finally, hover-revealing field!

Well, now we just have to hide our bullet when someone hovers it. Kind of easy, right? Well, it isn’t that easy. It is because we have to hide our bullet, but we can’t lose it’s width, because if we do, our users would see only the last character of the password (not the ones in the middle).

What we can do is to fade it to an insignificant opacity (like 10%) and then change it’s height to 1px, so we still have width.

Ok, now it’s just to use elem.hover() and we’re done, right? Again, no. This is because we have dynamically generated content we should use live() or delegate() to bind it. In my tests delegate had a much better performance, so we will do it this way:

//hide bullets based on a jquery object
	function hideBullets(object) {
		object.stop().css({ "height": "auto"}).animate({ opacity: 1 }, animation).removeClass("hpHiddenBullet");
	}
	//hover function for our bullets
	maskContainer.delegate(".hpBullet",  'hover',
		function(){
			var item = $(this);
			if (  item.hasClass("hpHiddenBullet") != true ) {
				hideBullets( $(".hpHiddenBullet") );
				item.stop().addClass("hpHiddenBullet").animate( { opacity: 0.01}, animation, function() { item.css({ "height": "1px"}); } );
				setTimeout( function() {
					if (  item.hasClass("hpHiddenBullet") == true ) {
						hideBullets( item );
					}
				}, delayHover);
			}
		}
	);

Are you hungry yet?

Wow, hope you guys liked it. Maybe you’re not going to use this effect itself but I’m sure we have a lot of good snippets here that are worth using in other cases.

Talking about the final effect, what do you think about it? Have you seen a better alternative?