Create a form with class form and automatically apply styles to all input, select, textarea, checkbox elements.

You can create rows with the same structure that grid and adding field childs.



<form class="form"> <div class="row"> <div class="field" data-col="6"> <label for="firstname">First Name</label> <input id="firstname" type="text" placeholder="First Name"/> </div> <div class="field" data-col="6"> <label for="lastname">Last Name</label> <input id="lastname" type="text" placeholder="Last Name"/> </div> </div> <div class="row"> <div class="field" data-col="6"> <label for="email">Email</label> <input id="email" type="text" placeholder="Email"/> </div> <div class="field" data-col="6"> <label for="options">Select an option</label> <select name=options id="options"> <option value="" disabled selected>Select an option</option> <option value="op1">Option 1</option> <option value="op2">Option 2</option> <option value="op3">Option 3</option> </select> </div> </div> <div class="field"> <label for="message">Message</label> <textarea name="message" id="message" cols="30" rows="10" placeholder="This is a placeholder message"></textarea> </div> <div class="field"> <input type="checkbox" id="check"/> <label for="check">Accept <a href="#form">Terms and Conditions</a></label> </div> <div class="field"> <button class="button">Submit Form</button> </div> </form>


To create horizontal form, simply add data-form="horizontal" to form.


<form class="form" data-form="horizontal"> <div class="field" data-col="3"> <label for="firstname-hz">First Name</label> <input id="firstname-hz" type="text" placeholder="First Name"/> </div> <div class="field" data-col="3"> <label for="lastname-hz">Last Name</label> <input id="lastname-hz" type="text" placeholder="Last Name"/> </div> <div class="field" data-col="3"> <button class="button">Submit Form</button> </div> </form>