Simple Form

<form>
  <div class="container wrap">
    <div class="basis4 flex">
      <input type="text" name="" value="" placeholder="Name" autofocus="autofocus">
    </div>
  </div>
</form>

Simple Form with label

<form>
  <div class="container wrap">
    <div class="basis4 flex">
      <div class="input">
        <label for="">Name:</label>
        <input type="text" name="" value="" placeholder="Ex: Gustavo Quinalha">
      </div>
    </div>
  </div>
</form>

Form + icon

<form>
<div class="container wrap">
    <div class="basis4 flex">
      <div class="input-group">
        <div class="input-group-icon">
          <i class="fa fa-user" aria-hidden="true"></i>
        </div>
        <input type="text" name="" value="" placeholder="Name">
      </div>
    </div>
  </div>
</form>

Form + icon + label

<form>
  <div class="container wrap">
    <div class="basis4 flex">
      <label for="">Name:</label>
        <div class="input-group">
          <div class="input-group-icon">
            <i class="fa fa-user" aria-hidden="true"></i>
          </div>
        <input type="mail" name="name" value="" placeholder="Ex: Gustavo">
      </div>
    </div>
  </div>
</form>

Form + icon + label vertical

  <form>
  <div class="container wrap">
    <div class="basis4 flex">
      <div class="container center-center">
        <div class="basis1 text-right">
          <label for="5name">Name: </label>
        </div>
        <div class="flex">
          <div class="input-group">
            <div class="input-group-icon">
              <i class="fa fa-user" aria-hidden="true"></i>
            </div>
            <input type="mail" name="5name" id="5name" value="" placeholder="Ex: Gustavo">
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Required feedback

Just add form-validate in the container, and required in the input.

<form>
  <div class="container wrap">
    <div class="basis4 flex form-validate">
      <label for="name">Name:</label>
      <div class="input-group">
        <div class="input-group-icon">
          <i class="fa fa-user" aria-hidden="true"></i>
        </div>
        <input type="text" name="name" id="name" placeholder="Ex: Gustavo" required>
      </div>
    </div>
  </div>
</form>

Required

<form>
    <div class="container wrap">
      <div class="form-validate basis4 flex">
        <div class="input">
          <label for="">Name:</label>
          <input type="text" name="" value="" placeholder="Ex: Gustavo Quinalha" required>
        </div>
      </div>
    </div>
</form>

Simple select (radio)

Image select (radio)

Advanced select (checkbox)

Advanced select (radio)