<section>

  <h2>Form</h2>

  <form role="form" method="post" action="" class="form">
    <div class="form-group">
      <label for="form1-input1" class="required">Form 1</label>
      <input id="form1-input1" name="form1-input1" type="text" class="form-control error" required="required">
    </div>
    <div class="form-group">
      <label for="form1-input2">Form 2</label>
      <input id="form1-input2" name="form1-input2" type="text" class="form-control" required="required" >
    </div>
    <div class="form-group">
      <label for="form1-dropdown">Doropdown</label>
      <select id="form1-dropdown" name="form1-dropdown"  class="form-control">
        <option>All</option>
        <option>Option 1</option>
      </select>
    </div>
    <div class="form-group">
      <label for="form1-comment">Comment</label>
      <textarea class="form-control" name="form1-comment"  id="form1-comment" rows="10"></textarea>
    </div>
    <div class="form-group">
      <div class="checkbox">
          <input id="form1-check-true" name="form1-check-true" type="checkbox" >
          <label for="form1-check-true">Checkbox label</label>
      </div>
      <div class="checkbox">
          <input id="form1-check-false" name="form1-check-false" type="checkbox" checked="checked">
          <label for="form1-check-false">Active label</label>
      </div>
    </div>
    <div class="form-group">
      <div class="radio">
          <input id="form1-radio-true" name="form1-radio" type="radio" value="true">
          <label for="form1-radio-true">Radio label</label>
      </div>
      <div class="radio">
          <input id="form1-radio-false" name="form1-radio" type="radio" value="false" checked="checked">
          <label for="form1-radio-false">Active label</label>
      </div>
    </div>
    <div class="form-group">
      <button type="submit" class="button blue">Submit</button>
    </div>
    <p class="error">Please fill out required fields</p>
  </form>

</section>

<section>

    <h2>Form - Blue Background</h2>

    <form role="form" class="blue form" method="post" action="">
      <div class="form-group">
        <label for="form2-input1" class="required">Form 2</label>
        <input id="form2-input1" name="form2-input1" type="text" class="form-control error" required="required">
      </div>
      <div class="form-group">
        <label for="form2-input2">Form 2</label>
        <input id="form2-input2" name="form2-input2" type="text" class="form-control" required="required">
      </div>
      <div class="form-group">
        <label for="form2-dropdown">Doropdown</label>
        <select id="form2-dropdown" name="form2-dropdown"  class="form-control">
          <option>All</option>
          <option>Option 1</option>
        </select>
      </div>
      <div class="form-group">
        <label for="form2-comment">Comment</label>
        <textarea class="form-control" name="form2-comment"  id="form2-comment" rows="10"></textarea>
      </div>
      <div class="form-group">
        <div class="checkbox">
            <input id="form2-check-true" name="form2-check-true" type="checkbox" >
            <label for="form2-check-true">Checkbox label</label>
        </div>
        <div class="checkbox">
            <input id="form2-check-false" name="form2-check-false" type="checkbox" checked="checked">
            <label for="form2-check-false">Active label</label>
        </div>
      </div>
      <div class="form-group">
        <div class="radio">
            <input id="form2-radio-true" name="form2-radio" type="radio" value="true">
            <label for="form2-radio-true">Radio label</label>
        </div>
        <div class="radio">
            <input id="form2-radio-false" name="form2-radio" type="radio" value="false" checked="checked">
            <label for="form2-radio-false">Active label</label>
        </div>
      </div>
      <div class="form-group">
        <button type="submit" class="button blue">Submit</button>
      </div>
      <p class="error">Please fill out required fields</p>
    </form>
  </section>
