Form layout

Example use cases

• Any form, eg edit product

Code output

Open layout in new window

HTML markup

The code snippet below contains only the content segment of the layout, excluding the header and footer segments.

<!-- HEADER SEGMENT -->

Copy<div class="content">
  <div class="main-wrapper">
    <div class="main-overflown">
      <div class="container-xs">
        <form>
          <div class="box pad-lg">
            <h3 class="box-title">Form title</h3>

            <div class="form-row">
              <label for="e-input"><strong>* Input field</strong></label>
              <div class="form-row-input">
                <input type="text" id="e-input" placeholder="Input field">
              </div>
            </div>

            <div class="form-row">
              <label for="e-email"><strong>* Email field</strong></label>
              <div class="form-row-input">
                <input type="email" id="e-email" placeholder="eg address@domain.com">
                <p>Optional field description.</p>
              </div>
            </div>

            <div class="form-row">
              <label for="e-textarea">Textarea</label>
              <div class="form-row-input">
                <textarea id="e-textarea" placeholder="Textarea"></textarea>
              </div>
            </div>

            <div class="form-row">
              <label>Select</label>
              <div class="form-row-input">
                <select>
                  <option>Select an option</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
              </div>
            </div>

            <div class="form-row">
              <label for="e-range">Range slider</label>
              <div class="form-row-input">
                <input id="e-range" type="range">
              </div>
            </div>

            <div class="form-row">
              <label for="e-upload">File upload</label>
              <div class="form-row-input">
                <label class="custom-file">
                  <span>Choose file...</span>
                  <input id="e-upload" type="file">
                </label>
                <p>Only JPG files allowed</p>
              </div>
            </div>

            <div class="form-row">
              <label for="e-minput">Multi-field</label>
              <div class="form-row-input">
                <input type="text" class="form-control-error" id="e-minput" placeholder="Input field">
                <p class="error">Error description</p>
              </div>
              <div class="form-row-input">
                <input type="text" placeholder="Input field">
                <p>Optional description</p>
              </div>
              <div class="form-row-input">
                <select>
                  <option>Select an option</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
              <p>Optional description</p>
              </div>
            </div>

            <div class="form-row">
              <label>Checkboxes</label>
              <div class="form-row-input">
                <label class="custom-checkbox form-control-inline">
                  <input type="checkbox" value="checkbox1">
                  <span>Checkbox</span>
                </label>
                <label class="custom-checkbox form-control-inline">
                  <input type="checkbox" value="checkbox2">
                  <span>Checkbox</span>
                </label>
              <p>Sample checkbox text</p>
              </div>
            </div>

            <div class="form-row">
              <label>Radio buttons</label>
              <div class="form-row-input">
                <label class="custom-radio form-control-inline">
                  <input name="groupname" type="radio" value="radio1" checked>
                  <span>Radio 1</span>
                </label>
                <label class="custom-radio form-control-inline">
                  <input name="groupname" type="radio" value="radio2">
                  <span>Radio 2</span>
                </label>
              </div>
            </div>

            <div class="form-row">
              <label>Dropdown</label>
              <div class="form-row-input">
                <div class="dropdown dropdown-form-control">>
                  <input class="btn btn-dropdown-toggle" data-toggle="dropdown" value="Dropdown" readonly>
                  <ul class="dropdown-menu">
                    <li><a href=#>Option 1</a></li>
                    <li><a href=#>Option 2</a></li>
                    <li><a href=#>Option 3</a></li>
                    <li><a href=#>Option 4</a></li>
                    <li><a href=#>Option 5</a></li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="form-row">
              <label>Calendar</label>
              <div class="form-row-input">
                <div id="calendar-1" class="calendar"></div>
              </div>
            </div>

            <div class="form-row">
              <label for="e-input-group">Input group</label>
              <div class="form-row-input">
                <div class="input-group">
                  <input type="text" id="e-input-group" placeholder="Input field">
                  <div class="input-extension">
                    <button class="btn btn-sec">Button</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="spacer"></div>

            <h3 class="box-title">Additional form fields</h3>

            <div class="form-row">
              <label for="e-number">Number field</label>
              <div class="form-row-input">
                <input type="number" id="e-number" placeholder="Number field">
              </div>
            </div>

            <div class="form-row">
              <label for="e-tel">Telephone field</label>
              <div class="form-row-input">
                <input type="tel" id="e-tel" placeholder="Telephone field">
              </div>
            </div>

            <div class="form-row">
              <label for="e-password">Password field</label>
              <div class="form-row-input">
                <input type="password" id="e-password" placeholder="Password field" value="mypassword">
              </div>
            </div>
          </div>

          <div class="box-actions">
            <button class="btn btn-faded">Cancel</button>
            <button type="submit" class="btn btn-main">Submit <strong>form</strong></button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- FOOTER SEGMENT -->