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 (
<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
<input>s. A few things to note though:
<form>has a class of
- The first two
<input>s have a
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
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 (
secondaryfor 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
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.
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
index.html so that it looks like this:
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.)
(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.)
switch statement is perfect for this—it lets you specify what happens for a limited number of alternatives:
$(this) just means the element that the handler function applies to (the
val() is a function that tells us its value. The period in the middle says "For the thing before the period (
<select>), call this function that belongs to it (
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
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
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.)
And if you like stuff like this, you should sign up for my newsletter: