Style Switcher
Theme Colors
Header Color
  • support@ecada.com
  • (0123)-123-456-789

Theme components

  1. Shortcodes
  2. Form Layouts
General Form
<input type="text" class="form-control" placeholder="Text input" />

<select class="form-control">
    <option value="0">Select options</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <optgroup label="Option heading">
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </optgroup>
    <option value="7">Option 7</option>
    <option value="8">Option 8</option>
    <option value="9" disabled>Option 9 (disabled)</option>
    <option value="10" disabled>Option 10 (disabled)</option>
    <option value="11">Option 11</option>
    <option value="12">Option 12</option>
    <option value="13">Option 13</option>
    <option value="14">Option 14</option>
    <option value="15">Option 15</option>
    <option value="16">Option 16</option>
    <optgroup label="Option heading">
        <option value="17">Option 17</option>
        <option value="18">Option 18</option>
    </optgroup>
</select>

<select class="form-control" multiple>
    <optgroup label="Multiple Select">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </optgroup>
    <optgroup label="Heading Group">
        <option value="6">Option 6</option>
        <option value="7">Option 7</option>
        <option value="8">Option 8</option>
        <option value="9">Option 9</option>
    </optgroup>
    <option value="10">Option 10</option>
    <option value="11">Option 11</option>
    <option value="12">Option 12</option>
    <option value="13">Option 13</option>
</select>
Basic form

Example: block-level help text here.

<form>
    <div class="form-group">
        <label>E-mail address</label>
        <input type="email" class="form-control" id="exampleInputE-mail1" placeholder="E-mail" />
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
    </div>
    <div class="form-group">
        <label>File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example: block-level help text here.</p>
    </div>
    <div class="checkbox">
        <div class="custom-checkbox">
            <label>Check me out
                <input type="checkbox" name="check_me">
                <span class="checkmark"></span>
            </label>
        </div>
    </div>
    <button type="submit" class="btn-e btn-e-primary">Submit</button>
</form>
Textarea
<textarea class="form-control" rows="3" placeholder="Textarea input"></textarea>
Checkboxes and radios
<div class="checkbox">
    <div class="custom-checkbox">
        <label>Option one is this and that - be sure to include why it's great
            <input type="checkbox" name="checkboxOption1" id="checkboxOption1" value="checkbox1">
            <span class="checkmark"></span>
        </label>
    </div>
</div>
<div class="checkbox disabled">
    <div class="custom-checkbox">
        <label>Option two is disabled
            <input type="checkbox" name="checkboxOption2" id="checkboxOption2" value="checkbox2" disabled>
            <span class="checkmark"></span>
        </label>
    </div>
</div>
<div class="checkbox disabled">
    <div class="custom-checkbox">
        <label>Option three is disabled and checked
            <input type="checkbox" name="checkboxOption3" id="checkboxOption3" value="checkbox3"  disabled checked>
            <span class="checkmark"></span>
        </label>
    </div>
</div>

<div class="radio">
    <div class="custom-radio">
        <label>Option one is this and that - be sure to include why it's great
            <input type="radio" name="radioOption" id="radioOption1" value="option1" checked>
            <span class="checkmark"></span>
        </label>
    </div>
</div>
<div class="radio">
    <div class="custom-radio">
        <label>Option two can be something else and selecting it will deselect option one
            <input type="radio" name="radioOption" id="radioOption2" value="option2">
            <span class="checkmark"></span>
        </label>
    </div>
</div>
<div class="radio disabled">
    <div class="custom-radio">
        <label>Option three is disabled
            <input type="radio" name="radioOption" id="radioOption3" value="option3" disabled>
            <span class="checkmark"></span>
        </label>
    </div>
</div>
<div class="radio disabled">
    <div class="custom-radio">
        <label>Option four is disabled and checked
            <input type="radio" name="radioOption" id="radioOption4" value="option4" disabled checked>
            <span class="checkmark"></span>
        </label>
    </div>
</div>
Form height sizing
<input type="text" class="form-control input-lg" placeholder="Large size" />
<input type="text" class="form-control" placeholder="Default size" />
<input type="text" class="form-control input-sm" placeholder="Small size" />
<input type="text" class="form-control input-xs" placeholder="Extra small size" />
Inline form
<form class="form-inline">
    <div class="form-group">
        <label class="sr-only" for="exampleInputE-mail3">E-mail address</label>
        <input type="email" class="form-control" id="exampleInputE-mail3" placeholder="E-mail">
    </div>
    <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
    </div>
    <div class="checkbox">
        <div class="custom-checkbox">
            <label>Remember me
                <input type="checkbox" name="remember_me">
                <span class="checkmark"></span>
            </label>
        </div>
    </div>
    <button type="submit" class="btn-e btn-e-primary">Sign in</button>
</form>

<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form-group">
        <label for="exampleInputE-mail2">E-mail</label>
        <input type="email" class="form-control" id="exampleInputE-mail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn-e btn-e-primary">Subscribe</button>
</form>
$
.00
<form class="form-inline">
    <div class="form-group">
        <label class="sr-only">Amount (in dollars)</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" placeholder="Amount">
            <div class="input-group-addon">.00</div>
        </div>
    </div>
    <button type="submit" class="btn-e btn-e-primary">Transfer cash</button>
</form>
Form column sizing
<div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
</div>

<div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
</div>

<div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
</div>

<div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
</div>

<div class="col-xs-6">
    <input type="text" class="form-control" placeholder=".col-xs-6">
</div>

<div class="col-xs-6">
    <input type="text" class="form-control" placeholder=".col-xs-6">
</div>

<div class="col-xs-5">
    <input type="text" class="form-control" placeholder=".col-xs-5">
</div>

<div class="col-xs-7">
    <input type="text" class="form-control" placeholder=".col-xs-7">
</div>

<div class="col-xs-9">
    <input type="text" class="form-control" placeholder=".col-xs-9">
</div>

<div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
</div>