1. Web Design
  2. Foundation for Apps

Foundation for Beginners: Custom Forms and Switches

Read Time:6 minsLanguages:
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.


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:

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.


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.



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.

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.

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.


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.

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.

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


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, 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.


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?

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.