Form Elements

• Components

  • Headers
  • Footers
  • Parallax
  • Cards
  • Masonry Grid
  • Buttons
  • Form Elements
  • Carousel
  • Video Pop-up
  • Floating Divs
  • Overlays
  • Zoom Effect
  • Hover Animate
  • Morphext
  • Background
  • Hover Up
  • Blockquote
  • Pagination
  • Map
  • Accordions
  • Circle Block
  • Artworks
  • Spinners
  • Icon Boxes
  • Counters
  • Progress Bars
  • Helper Classes

• Plugins

  • Animations
  • Bootstrap
  • jQuery
  • Masonry
  • Morphext
  • Owl Carousel
  • Parallax
  • Wow
  • Progress Bar
  • ImagesLoaded
  • Popper
  • Waypoints
  • jQuery Forms
  • Google reCaptcha v2

Example Form

This demo form is a modified version of this form. The checkbox and radio buttons are modified according to the theme and the source code for these looks like this:

<!-- Radio Buttons -->
<div class="form-row">
    <div class="form-group col-6 col-md-3">
        <div class="form-check">
            <label class="form-check-label">
                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
                <span class="cl-checkbox-input"></span>
                <span class="mb-0">First radio</span>
            </label>
        </div>
    </div>
    <div class="form-group col-6 col-md-3">
        <div class="form-check">
            <label class="form-check-label">
                <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                <span class="cl-checkbox-input"></span>
                <span class="mb-0">Second radio</span>
            </label>
        </div>
    </div>
</div>

<!-- Checkbox -->
<div class="form-group">
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox">
            <span class="cl-checkbox-input"></span>
            <span class="mb-0">Check me out</span>
        </label>
    </div>
</div>