Basic form elements to know about.
Each form item should be separated with a div with class zust-form-it.
<form>
<div class="zust-form-it">
<label class="zust-label">Label Here</label>
<p class="zust-form-el">
<input class="zust-input" type="text" placeholder="Input">
</p>
</div>
<div class="zust-form-it">
<span class="zust-label">Choose an Option</span>
<p class="zust-form-el">
<select class="zust-select zust-with-icon-right">
<option>Option 1</option>
<option>Option 2</option>
</select>
<span class="zust-icon zust-right">
<i class="zust-angle-down"></i>
</span>
</p>
</div>
</form>
For label text use class zust-label. For help text use class zust-help.
<form>
<div class="zust-form-it">
<label class="zust-label">Label Text Sample</label>
<p class="zust-form-el">
<input class="zust-input" type="text" placeholder="Just an Input">
</p>
<span class="zust-help">This is text for helping you with forms</span>
</div>
</form>
You can use Element Group to group up form elements.
<form>
<div class="zust-form-it">
<div class="zust-el-group">
<p class="zust-form-el">
<input class="zust-input" type="text" placeholder="Just an Input">
</p>
<button class="zust-btn zust-success" type="submit">Search It</button>
</div>
</div>
</form>
You can make a form element fill up the rest of space by adding class zust-fullwidth to zust-el-group and adding class zust-fillup to any form element, which you want to fill up the space.
<form>
<div class="zust-form-it">
<div class="zust-el-group zust-fullwidth">
<p class="zust-form-el zust-fillup">
<input class="zust-input" type="email" placeholder="Email Here">
</p>
<button class="zust-btn zust-link" type="submit">Submit</button>
</div>
</div>
<div class="zust-form-it zust-fullwidth">
<p class="zust-form-el zust-fillup">
<input class="zust-input" type="email" placeholder="Email Here">
</p>
<button class="zust-btn zust-link" type="submit">Submit</button>
</div>
</form>
For inline form, just add class zust-form-inline to zust-form-it and put zust-form-el and zust-help to zust-form-body.
<form>
<div class="zust-form-it zust-form-inline">
<label class="zust-label">Name</label>
<div class="zust-form-body">
<p class="zust-form-el">
<input class="zust-input" type="text" placeholder="Your Name">
</p>
<span class="zust-help">Enter your cool name</span>
</div>
</div>
<div class="zust-form-it zust-form-inline">
<label class="zust-label">Email</label>
<div class="zust-form-body">
<p class="zust-form-el">
<input class="zust-input" type="email" placeholder="Your Email">
</p>
</div>
</div>
<div class="zust-form-it zust-form-inline">
<label class="zust-label">Age</label>
<div class="zust-form-body">
<p class="zust-form-el">
<select class="zust-select zust-with-icon-right">
<option>20</option>
<option>30</option>
<option>40</option>
</select>
<span class="zust-icon zust-right">
<i class="zust-angle-down"></i>
</span>
</p>
</div>
</div>
</form>