Loading

Forms

The backbone of any website! Forms are one of the most important elements of any website, they allow our users to search our sites, contact us, filter our products etc... We've made our forms easy to customise and looking great out of the box.


Base

A basic form with a few elements

<form method="post" action="" class="form">
    <div class="form-item">
        <label>Email</label>
        <input type="email" name="email" class="w50">
    </div>
    <div class="form-item">
        <label>Country</label>
        <select>
            <option value="">---</option>
        </select>
    </div>
    <div class="form-item">
        <label class="checkbox"><input type="checkbox"> Check me</label>
        <label class="checkbox"><input type="radio"> Radio me</label>
    </div>
    <div class="form-item">
        <textarea rows="6"></textarea>
    </div>
    <div class="form-item">
        <button>Log in</button>
        <button class="button secondary outline">Cancel</button>
    </div>
</form>


Inputs

Here's a standard input field with type set as text. Label serves as input's label, and the following div with class desc serves as an optional description.

This information helps us deliver orders on time.
<form class="form">
    <div class="form-item">
        <label>City</label>
        <input type="text">
        <div class="is-desc">...</div>
    </div>
</form>

Here are two text input fields, one with a placeholder and another one disabled, both set to be 6 grid columns wide.

Here's how you denote required fields with req class, and add descriptions to labels using span with class desc.

This information helps us deliver orders on time.
<form class="form">
    <div class="row">
        <div class="col-xs col-sm-6">
            <div class="form-item">
                <label>City <span class="is-req">*</span></label>
                <input type="text">
            </div>
        </div>
        <div class="col-xs col-sm-6">
            <div class="form-item">
                <label>City <span class="is-desc">...</span></label>
                <input type="text">
                <div class="is-desc">...</div>
            </div>
        </div>
    </div>
</form>


Checkboxes & Radio

Check 1

Check 2

Check 3

Check 4
<form method="post" action="" class="form">
    <div class="form-item form-checkboxes">
        <label class="checkbox"><input type="checkbox"> Check 1</label>
        ...
    </div>
    <div class="form-item">
        <label class="checkbox"><input type="radio"> Check 2</label>
        ...
    </div>
</form>


Fieldset

Fieldsets have a nice pre-formatted design, just wrap your form in a fieldset tag and you're good to go.

Login data

<fieldset>
    <legend>Login data</legend>
    <div class="form-item">
        <label>Email</label>
        <input type="email" name="user-email" class="w50">
    </div>
    <div class="form-item">
        <label>Password</label>
        <input type="password" name="user-password" class="w50">
    </div>
</fieldset>


Input sizing & widths

Small
Big
Width select
<form class="form">
    <div class="form-item">
        <input type="text" class="small" placeholder="Title">
    </div>
    <div class="form-item">
        <select class="small">
            <option>...</option>
        </select>
    </div>
    <div class="form-item">
        <input type="text" class="big" placeholder="Title">
    </div>
    <div class="form-item">
        <select class="big">
            <option>...</option>
        </select>
    </div>
    <div class="form-item">
        <input type="text" class="w25">
    </div>
    <div class="form-item">
        <input type="text" class="w50">
    </div>
    <div class="form-item">
        <input type="text" class="w75">
    </div>
    <div class="form-item">
        <input type="text" value="100% by default">
    </div>
</form>


States

For when you need to tell users they've only do gone messed up, or you want to send some positive vibs

<form method="post" action="" class="form">
    <div class="form-item">
        <label>Your height <span class="success">...</span></label>
        <input type="text" class="success">
    </div>
    <div class="form-item">
        <label>Enter your weight <span class="error">...</span></label>
        <input type="text" class="error">
    </div>
</form>


Required and descriptions

Please enter your email.
<form method="post" action="" class="form">
    <div class="form-item">
        <label>Email <span class="is-req">*</span></label>
        <input type="email" name="user-email">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input type="email" name="user-email">
        <div class="is-desc">...</div>
    </div>
</form>


Disabled

For when you want to annoy your users or actually disable a field, becasue you know, reasons

<input type="text" value="" disabled>
<input type="checkbox" class="disabled">
<input type="radio" disabled>
<textarea disabled></textarea>
<select disabled>
    <option>...</option>
</select>


Append & Prepend

Add some spice to you forms by appending/ prepending fields like a badass!

Add Icons/ text

$

$
Go nuts, add a button!
Or, if you really want to go crazy, add both!

<form>
<div class="form-item">
  <label>How much is it?</label>
  <div class="is-prepend w50">
 <span>$</span>
 <input type="text">
  </div>
</div>
<div class="form-item">
  <label>It is much how?</label>
  <div class="is-append">
 <input type="text"><span>$</span>
  </div>
</div>
  <div class="form-item">
 <label>Label</label>
 <div class="is-append w50">
   <input type="text" name="search" placeholder="Search">
   <button class="button outline">Go</button>
 </div>
  </div>
  <div class="form-item">
 <label>Label</label>
 <div class="is-append is-prepend w50">
  <span><i class="fas fa-search"></i></span>
   <input type="text" name="search" placeholder="Search">
   <button class="button outline">Go</button>
 </div>
  </div>
</form>


A few more examples

As you can see, right out of the box Kubish has loads of predefined fields to help you build faster, but here are some more examples you can use...

Align to the grid
Month
Day
Year