Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

Foundation for Beginners: Custom Forms and Switches

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: Buttons and Dropdowns
Foundation for Beginners: Progress, Alerts, Tooltips and the Elusive Mega Drop

Following on from our look at buttons in Zurb's Foundation, let's now take a look at custom forms and switches. During this tutorial we're going to work on an exercise; a contact form which you can add to your projects or just play around with. Once we've built that, we'll move onto other form elements.

what-we-will-make

Forms, for me at least, have always been a bit of a pain especially when getting them to fit into my overly-ambitious designs. Foundation makes this whole process easier by including a JavaScript custom form plugin. It's very simple to setup and gives you the ability to easily customise your form elements using CSS.

In order to get the custom forms to function, you'll need to include foundation.forms.js. You'll also need to make sure to include zepto.js and foundation.js above the forms plugin.

The plugin works by hiding each form element itself and spitting out more visually controllable elements like divs and anchor tags. It then passes any interaction to the original hidden element, meaning the form will still function as it was intended. Let's take a look at how that works exactly.


The Contact Form

In terms of websites, the most common type of form has probably always been the contact form. In this exercise we'll take the standard inputs you may expect to see, plus one or two more unusual examples which could be useful to you in your projects.

Take your standard <form> tag. To initiate the custom forms plugin we need to add a class of "custom" like so: <form class="custom">, done. We now have our custom form.

To get going you'll need the form tag which holds a two column row, like this:


<form class="custom">
  <div class="row">
    <div class="large-6 columns">
    </div>
    <div class="large-6 columns">
    </div>
  </div>
</form>

Now we'll start with the left column; in the example I have used a drop down to select the salutation, followed by an input box for the name. These use standard tags with a "collapse" class on the row. We follow this up with the email field and a "how you found us" drop down.


<div class="row collapse">
  <div class="large-3 small-3 columns">
    <select>
      <option>Mr.</option>
      <option>Mrs.</option>
      <option>Miss.</option>
      <option>Ms.</option>
      <option>Dr.</option>
    </select>
  </div>
  <div class="large-9 small-9 columns">
    <input type="text" placeholder="Name" />
  </div>
</div>

<input type="email" placeholder="Email" />

<select id="contactDropdown">
  <option DISABLED>How did you find us?</option>
  <option>Google</option>
  <option>A friend told me</option>
  <option>Not sure, where am I?</option>
</select>
f

You need to ensure your select element has an id, but apart from that the markup is really straight forward. So to merge this with the form code we first looked at, you'll need to put it in the first div with the "large-6" class.

Next up are the elements for the second column. These include the text area, a "spam me" checkbox and a switch, followed finally by the submit button.


<textarea placeholder="Message"></textarea>
<div class="row">
  <div class="large-6 small-6 columns">
    <label>Send me spam&nbsp;&nbsp;
      <input type="checkbox" CHECKED style="display:none" />
    </label>
  </div>
  <div class="large-3 small-3 columns">
    <label>CC me?</label>
  </div>
  <div class="large-3 small-3 columns end">
    <div class="switch tiny">
      <input id="x" name="switch-x" type="radio" checked>
      <label for="x" onclick="">No</label>
      <input id="x1" name="switch-x" type="radio">
      <label for="x1" onclick="">yes</label>
      <span></span>
    </div>
  </div>
</div>
<input class="button small large-12" type="submit" value="Send Message" />
e

Switches

We haven't yet covered switches, so let's do that now.

Switches are a great way of visually toggling inputs. Their structure comprises a div with a "switch" class, followed by your choice of a size. These sizes include "tiny", "small" and "large". You can also set the switch to be rounded with the "rounded" class. The structure itself has two inputs, one for each switch state. These have their own respective labels which Foundation uses for the text inside each state. The inputs need ids and the labels need the coinciding "for" attribute.

    <div class="switch tiny">
      <input id="x" name="switch-x" type="radio" checked>
      <label for="x" onclick="">No</label>

That pretty much covers our little contact form, you can take this and play with it or use it in your next project.


Other Form Elements

What else might you need in a web form? To start off we have good old radios, each of which needs to have the same name and a "display:none" property.

Note: I know this is a horrible inline style, but it's advisable in this case so you don't get that flicker when the stylesheet kicks in.

  <input name="radio1" type="radio" style="display:none;" CHECKED />
  <input name="radio1" type="radio" style="display:none;" />
  <input name="radio1" type="radio" disabled style="display:none;">

One of the nicer things about these custom forms is the quick option to create an element which either has an element preceding it or succeeding it. It's a great way to suggest what's already present, or hinting at what kind of user interaction is required.

foundation-prefix

Below you can see we have a span element with the "prefix" class, followed by a drop down. You will still need to put these elements in a column structure as the "prefix and "postfix" classes just prevent the elements getting separated. You can also make good use of the "postfix" class in an object such as a search box, whereby you have your text input followed by a button.

<div class="row collapse">
  <div class="large-9 small-9 columns">
    <span class="prefix">http://webdesign.tutsplus</span>
  </div>
  <div class="large-3 small-3 columns">
    <select>
      <option>.com</option>
      <option>.co</option>
      <option>.ca</option>
    </select>
  </div>
</div>

Error Messages

Most forms have at least one field which is required, or the form will fail to submit properly. Foundation caters for these validation situations with the "error" class. Simply add this to any input, label, small tag or column and watch as these elements take on a red error style.


<form>
  <div class="row">
    <div class="large-6 columns">
      <label class="error">Error</label>
      <input type="text" class="error" />
      <small class="error">Invalid entry</small>
    </div>
    <div class="large-6 columns error">
      <label>Another Error</label>
      <input type="text" />
      <small>Invalid entry</small>
    </div>
  </div>
  <textarea class="error" placeholder="Message..."></textarea>
  <small class="error">Invalid entry</small>
</form>

To really put this into effect you'll need to grab the jQuery validate plugin and use the required parameter to show these states when a user incorrectly enters information.


Useful Tool

d

When it comes to the colour choices in Foundation, it's not always easy to get a good combination without the help of a designer. Happily, Colourco.de offers a great way of finding a colour schemes for your next design. Move your cursor left to right to change the hue, and up or down to change the lightness. The menu gives you options for different colour schemes, including monochromatic, anagogic, and complementary.


Conclusion

Forms are an essential part of every website and Foundation adds some nice features to make your forms rock solid. If you're feeling adventurous, why not take a look at some of Zurb's other form experiments, including their AJAX image uploader?

Advertisement