You should be familiar with the new HTML5 form elements from this week’s reading, but if you need a refresher, this article about HTML5 Forms and Input Types (Links to an external site.)Links to an external site. provides a good review (with plenty of screenshots) of the new elements.
There are two examples of forms described in detail below. When you have finished reading, please:
- provide your thoughts on each form
- provide one example of a form you have interacted with recently and describe any elements you think are good or bad
Example One: Paypal
The first form I want to look at is Paypal’s account creation form:
- Paypal Account Sign Up (Links to an external site.)Links to an external site.
One of the things you would notice is that PayPal asks you for the absolute minimum amount of information it needs to in order to continue along the process of creating an account, a great strategy when you need to gather a lot of information from people, but don’t want to scare them away:
- The first form you see is a simple choice. Personal Account or Business Account
- The “Continue” button below your selection shows you are not done with this sign up process yet, but you have started down that path.
- You might notice that these radio buttons look a bit different than the ones you are used to seeing.
- They are using some advanced CSS to draw those radio buttons inside of the form fields label.
/* Background */
.radioButton:before {
content: "";
position: absolute;
box-sizing: border-box;
width: 1.5rem;
height: 1.5rem;
background: #ffffff;
border: 1px solid #9da3a6;
border-radius: 100%;
cursor: pointer;
-webkit-box-shadow: inset 0 1px #ffffff;
box-shadow: inset 0 1px #ffffff;
}
/* Checkmark */
.radioButton:after {
opacity: 0;
content: "";
position: absolute;
width: .6rem;
height: .6rem;
left: .75rem;
top: .75rem;
-webkit-transform: translate(-50%, -50%);
background: #009cde;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 100%;
cursor: pointer;
box-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
- Which, when clicked, triggers another advanced CSS selector to draw the blue inside:
input[type=radio]:checked + .radioButton:after {
opacity: 1;
}
- After deciding which kind of account is being used, you are given another short series of form fields:
- Email, Password, Confirm Password
- These look standard until you click into one and then click somewhere else without entering any text in.
- These inputs are making use of HTML5 validation
- By simply adding required=”required” as an attribute to your form element, most modern browsers will not allow the form to be submitted until there is some content inside that input box.
- Paypal goes even farther on the email field:
- Not only are they requiring this field (required=”required”), but they are also indicating that this field must be an email address (type=”email”).
- The type of email does a couple of important things:
- By default, browsers will not accept any input in an email field without an “@” symbol in it.
- Perhaps most importantly though, on mobile devices (tablets and phones) the email input type will trigger a different keyboard layout (one that includes the “@” character)
- (http://www.bennadel.com/ (Links to an external site.)Links to an external site.resources/uploads/iphone_keyboard_type_email.jpg (Links to an external site.)Links to an external site.)
- They also provide instant feedback when you have filled out the input in the required manner:
- After getting past the password and email requirements, you are shown the final fields, which might look familiar, as just about every form on the web asks for this information nowdays
I believe this form is successful because of the way Paypal gets you to invest your self into the form so easily. Forms that are set up this usually have people thinking:
- “Oh great, I only need to choose my account type, this is easy!”
- Chooses account type and sees other fields
- “Oh, that makes sense, of course they need an email and password.”
- Completes these fields.
- “Oh man, now they want all of that information too, well I’ve already come this far, I might as well just keep going.”
- Completes this information and finally has an account.
Paypal gets you to fill out 13 fields without really understanding that you did it. A form with 13 fields on it to start is usually intimidating and might scare people away, but if you collect a little bit of information at a time, you are more likely to get people to fill out the form.
Example 2: Social Tees
Social Tees Animal Rescue Application (Links to an external site.)Links to an external site.
This site is actually making use of a Google Form (Links to an external site.)Links to an external site. which is a nice way to capture information if you don’t have the resources to build a database to store information in. However, the form they wound up with is very long and very ugly. This form has around 55 fields, 50 of which are required.
Now, in a situation like this, you often times do need to collect a lot of information, but the better approach would be to break it up over several pages (which is possible in Google Forms). That way, you at least feel like you are making progress. Having visitors to your sites complete a larger number of smaller tasks is generally a better idea than forcing them to complete one giant task.
The other issues with this form is that it is not taking advantage of all the new form fields HTML5 allows for:
- number
- date (this one they do use)
- This triggers a calendar dropdown that looks different across browsers
- http://diveintohtml5.info/i/input-type-date.png
- This triggers a calendar dropdown that looks different across browsers
These field elements all add a bit of improvement over the basic text field that is being used instead, as noted on the HTML5 Doctor link (Links to an external site.)Links to an external site. provided in this week’s discussion overview.
