We've learned a lot from our previous iteration of custom forms. Thanks to awesome community contributions, we have even better custom forms. The new implementation is cleaner and more succinct, with less duplication of code. You just need to make sure to have the right JS hooked up for things to work properly; learn more about that below. The example above looks like this:
<form class="custom"> <div class="row"> <div class="large-4 columns"> <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label> <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label> <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label> </div> <div class="large-4 columns"> <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label> <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label> <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label> </div> <div class="large-4 columns"> <label for="customDropdown1">Medium Example</label> <select id="customDropdown1" class="medium"> <option DISABLED>This is a dropdown</option> <option>This is another option</option> <option>This is another option too</option> <option>Look, a third option</option> </select> </div> </div> </form>
A radio input is a common form element that can look pretty ugly by default. We've simplified the look and feel with a custom <span> that you can customize if you need to. You can even use <input disabled> to make the radio inactive.
<form class="custom"> <label for="radio1"> <input name="radio1" type="radio" id="radio1" style="display:none;"> <span class="custom radio"></span> Radio Button 1 </label> </form>
The checkbox input is another very common form element. These are handy for lists of options that can be selected in multiples, things like finding out which Ke$ha song should be used for a room name. You can build these using the same <span> technique. You can even use <input disabled> to make the radio inactive.
<form class="custom"> <label for="checkbox1"> <input type="checkbox" id="checkbox1" style="display: none;"> <span class="custom checkbox"></span> Label for Checkbox </label> </form>
Sometimes you need to let people select a single item from a long list of options. This is what <select> elements are for. We've taken these a step further by including our own custom style that looks a lot better than inconsistent browser defaults. You can set any of the <option> elements to <option disabled> to make them unable to select. Custom selects are built like you'd expect:
For those who may want to apply custom styles to a specific dropdown, any classes on the <select> element will be appended to the generated <div class="custom dropdown"> element.
<form class="custom"> <label for="customDropdown">Medium Example</label> <select id="customDropdown"> <option DISABLED>This is a dropdown</option> <option>This is another option</option> <option>This is another option too</option> <option>Look, a third option</option> </select> </form>
You have access to classes that will control the size of the select element. They'll span 100% of their container by default.
<select id="customDropdown" class="small"></select> <select id="customDropdown" class="medium"></select> <select id="customDropdown" class="large"></select>
We showed you how to use the prefix and postfix elements on our forms documentation page. You can employ that same technique here and make custom forms act as your slave to create some very complex forms.
<form class="custom"> <div class="row"> <div class="large-6 columns"> <div class="row collapse"> <div class="large-9 small-9 columns"> <span class="prefix">mysubdomain</span> </div> <div class="large-3 small-3 columns"> <select> <option>.com</option> <option>.co</option> <option>.ca</option> </select> </div> </div> </div> <div class="large-6 columns"> <div class="row collapse"> <div class="large-10 small-10 columns"> <select> <option>google</option> <option>yahoo</option> <option>bing</option> </select> </div> <div class="large-2 small-2 columns"> <span class="postfix">.com</span> </div> </div> </div> </div> <div class="row collapse"> <div class="small-8 columns"> <select> <option>google</option> <option>yahoo</option> <option>bing</option> </select> </div> <div class="small-4 columns"> <a href="#" class="button postfix">Button</a> </div> </div> </form>
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. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.
Read how to install Foundation JavaScript
Required Foundation Library: foundation.forms.js
Custom Form options can only be passed in during initialization at this time. However, you can bind to the open, change, and click events depending on the form elements.
{
disable_class: 'no-custom'
}