Livetyping

In my last post, I showed you how to prototype a fairly simple web page (with responsiveness baked in!). This time, I'm going to show you how to add some interactive stuff to the page.

What we're going to do is to take our existing, static page and add a contact request form. What's interactive about a form though? Well, this one will use the selection-dependent inputs pattern—it will have a drop-down list where you can choose how you want to be contacted, and the form changes depending on what you select.

The first thing we need to do is to add a new <div> with the right Foundation classes to hold the form. We want to put it in that right column, right above the ads. Currently, that piece of HTML looks like this:

The way we've set it up is so that the ads get hidden when we're on a small (smartphone-sized) screen. But we don't want our form to get hidden. What we need to do is nest another Foundation row/column structure in here so that we have two rows (each of which takes up all 12 of the available columns).

And we move the hide-for-small class from the container (large-3 columns) <div> to the row that contains the ads:

If you open this up in your browser you'll see the placeholder text above the ads:

And if you resize the window down to smartphone width, you'll see that the ads disappear but the placeholder text doesn't:

So far, so good.

Now we can get on with the actual work—adding the form. First, let's replace that placeholder paragraph (the one in the <p> tags) with some introductory text. And right after that, we'll throw in a drop-down (a <select> element containing <option> elements) that lets the user choose how they want to be contacted.

Notice that I've wrapped the <select> in a <form> with a class of custom. This tells Foundation to use its own styling for the select instead of the standard look. This means it matches the other form elements we're going to be adding.

And there's also a horizontal rule (<hr/>) to separate the form from the ads:

We also need a bit of CSS:

The first rule here styles the "Contact me via…" label that is the first item in the drop-down. (If you look in the HTML, you'll see that the first <option> has a class, which is what we use in this rule.) This fake option means that nothing is selected by default. Which is A Good Thing.

The second rule just adds a bit of top padding to the intro text.

If you open it in a browser now, you'll see we have a drop-down list with the right options:

But it doesn't do anything yet. The next thing we need to do is add the forms. We actually need three forms, but we'll make it so that only one is visible at any one time. So right after the <select>, add the first form, like this:

This is just a <form> element containing a bunch of <label>s and <input>s. A few things to note though:

• The <form> has a class of hbd. We'll be adding a CSS rule in a minute to hide this by default. (And soon, we'll add a little bit of Javascript to show the right form depending on what you select in the drop-down.)
• The first two <input>s have a type of email. On the desktop, this is exactly the same as an <input> with a type of text. But on iOS (and Android too, I believe), when you tap on the <input>, you get an email-specific keyboard layout, with @ and period keys, but no space bar.
• The last two <input>s are the Submit and Cancel buttons. The first one has a type of submit. This is a special kind of button that tells the browser to send the contents of the form to the server. Here, it's just a prototype—we're not sending anything anywhere. But it's better to do it the "right" way.
• The buttons have classes to give them the right size (small) and to indicate which one is the primary action and which one is secondary (secondary for Cancel). And I've used Foundation's column classes to make them (together) the same width as the <input>s. And I've made the primary action button a bit wider than the secondary one.

Which looks like this:

Now let's add the other two forms. Add this right after the form we just added:

These are pretty similar to the first form, except for a couple of things:

• These both have a class of custom. Without this, the <select> wouldn't get the nice Foundation styling.
• In both forms, the phone number <input> gets a type of tel. Like the email <input> we saw before, this changes the keyboard layout on mobile, this time to a numeric keypad.
• I've used the names of the mobile providers where I live for the SMS form. If you like, you can use your local providers instead.

But now if you look at the page, all three forms are visible. Let's add some CSS to hide them all:

This rule applies to elements with that hbd class, which we added to all three forms. Now if you check the page, you shouldn't see any forms.

The only thing left to do now is add a little tiny bit of Javascript to show the right form when you select something in the drop-down. First we need to create a file to contain our Javascript and link to from index.html.

Just like we did with the CSS file back when we were first creating the page, create a new file called 4min.js and save it in the js directory. Now add a second <script> element right after the existing one that pulls in the Foundation Javascript file, down towards the bottom of index.html so that it looks like this:

Now in 4min.js, add this:

This says "when the page finishes loading, run whatever code is inside the curly braces."

So let's add some code in there to do what we want:

This binds an event handler to the <select> with an ID of contact_select. It does a what to the what now?!?

That's just fancy programmer-speak for "It tells jQuery* to watch the <select>, and when its value changes, to do something." (The value of the select changes when we select one of the options.)

* jQuery is a library built on top of Javascript that makes lots of things much easier than trying to do them ourselves with just Javascript.

(The bit between the slashes and asterisks is a comment. It's a good idea to include comments like this, so that other people can figure your code out, and so you can remember what it does when you come back to it later.)

So what do we want it to do when the value changes? Well, that depends on what we select. A Javascript switch statement is perfect for this—it lets you specify what happens for a limited number of alternatives:

Here, $(this) just means the element that the handler function applies to (the <select>). And val() is a function that tells us its value. The period in the middle says "For the thing before the period ($(this), the <select>), call this function that belongs to it (val()).

Now we need to tell it what to do for each of the options. Let's start with email:

This new bit says "If the value (that val() gave us) is 'email', find the element with an ID of email_opts, and show it (i.e., make it visible). Next, find the element with an ID of phone_opts and hide it. And the same for the one with an ID of sms_opts."

Now we just do the same for the other two possible values:

For each one, we just show the form we want and hide the others. Notice that we've also got a fourth case here called default.

This is for when none of the others apply. Here, that only happens if the user clicks the "fake" "Contact me via…" option. If that happens, we just hide all three forms.

And that's all there is to it. You can see the finished example here.

If we wanted to flesh it out a bit more, we could wire up the buttons to actually do something. When the user clicks "Submit", we could hide the dropdown and the forms and replace them with a thank-you message. And maybe "Cancel" could clear the form. (More likely, we'd get rid of it altogether.)

This is really just the tip of the iceberg when it comes to what you can do with HTML, CSS, and Javascript. Livetyping, my HTML prototyping course for UXers, will teach you how to do tons more things like this, including more form stuff (highlighting invalid values, for example), drag and drop, animation, and more. You should check it out.

And if you like stuff like this, you should sign up for my newsletter: