Few people look forward to filling out forms. In fact, we'd venture to guess that no one gets up in the morning and says "ooh, today I get to enter my name and email!" Yet forms are important to guide customers, and even users acknowledge that they're necessary to access certain parts of the internet — like signing up for this email newsletter.

Form fields don't have to look uninviting. We can help users feel appreciated by making our input fields and labels more attractive. Here's a quick way to apply your own look to well-aligned fields and labels using Foundation for Sites.

Step 1: Start with a basic form field and label.

We begin with the essentials. Nothing fancy.

<label for="user-email">Your email</label>
<input type="email" id="user-email">

Note: This lesson uses plain divs and Foundation grid classes for clarity … more on that at the end.

Step 2: Lay out your form.

Next we'll use a standard Foundation row with two columns to control both the field and label sizes. Notice that we're using the medium-# classes to keep the form mobile-friendly.

<div>
  <div class="medium-2 columns">
  <label for="sample2">Your email</label>
  </div>
  <div class="medium-10 columns">
    <input type="email" id="sample2">
  </div>
</div>

 

Step 3: Use the Foundation .prefix class to line up your labels.

Setting label text arbitrarily next to the input field looks odd because it's not the box that concern users — it's the text inside the box. Making the label and input field share baselines would go a long way to making them look like they belong together.

Foundation comes with a class that turns the label into an attractive, mobile-friendly, well-formatted box. We apply that class — .prefix — to a span inside of the label.

<div class="row collapse">
  <div class="medium-2 columns">
    <label for="user-email">
	  <span>Your email</span>
	</label>
  </div>
  <div class="medium-10 columns">
	<input type="email" id="user-email">
  </div>
</div>

 

Step 4: Customize the look and feel of your form.

These Foundation classes are minimal on purpose. From here you can apply your own branding. These next two examples — called .special1 and .special2 — show how you can drastically reskin the same form fields to fit your site without having to worry about messing with position or alignment. Foundation's prefix class handles that for you.

<div class="row collapse sample1">
  <div class="medium-2 columns">
	<label for="user-email-1">
	  <span>Your email</span>
	</label>
  </div>
  <div class="medium-10 columns">
	<input type="email" id="user-email-1">
  </div>
</div>
<div class="row collapse sample2">
  <div class="medium-2 columns">
	<label for="user-email-2">
	  <span>Your email</span>
	</label>
  </div>
  <div class="medium-10 columns">
	<input type="email" id="user-email-2">
  </div>
</div>

.sample1 span {
  background-color: #73cacf;
  color: #fff;
  border: none;
}
.sample1 input {
  background-color: #c2f6f8;
  border: none;
  color: #007d9a;
}
.sample2 span.prefix {
  background-color: #fefbf2;
  border-bottom: 1px solid #ccc;
}
.sample2 span {
  border: none;
}
.sample2 input {
  background-color: #FEFBF2;
  border: none;
  border-bottom: 1px dashed #999;
  box-shadow: none;
  font-family: georgia serif;
  font-style: italic;
  font-size: 1.3rem;
}

 

 

Above: Examples of how you can quickly transform the same input field and label into something totally different. Download the sample HTML/CSS.

Going forward

Looking back at the HTML, that's a lot of nested code. Best practice suggests that we use sensible names and elements. So here's a challenge for you to try on your own: Make a version that doesn't require the .row, .medium and .columns classes.

---