Introduction

HTML Forms are one of the main points of interaction between a user and a web site or application. They allow users to send data to the web site. Most of the time that data is sent to the web server, but the web page can also intercept it to use it on its own.

Stylizer offers you a responsive Forms that you can use for multiple devices.

The form in stylizer use a special grids, you can use it inside a container or beside it.

You can see the example in this pen below.

Example

The form is designed to be responsive inside and beside the container, so it use a special container, row and colmuns.

Code

<div class="form-container">
  <form action="#">
    <div class="form-row">
      <div class="form-col-25">
        <label for="fname">First Name</label>
      </div>
      <div class="form-col-75">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
    </div>
    <div class="form-row">
      <div class="form-col-25">
        <label for="lname">Last Name</label>
    </div>
      <div class="form-col-75">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>
    </div>
    <div class="form-row">
      <div class="form-col-25">
        <label for="country">Country</label>
      </div>
      <div class="form-col-75">
        <select id="country" name="country">
          <option value="algeria">Algeria</option>
          <option value="france">France</option>
          <option value="morocco">Morocco</option>
        </select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-col-25">
        <label for="subject">Subject</label>
      </div>
     <div class="form-col-75">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="form-row">
      <input class="btn btn-block btn-primary" type="submit" value="Submit">
    </div>
  </form>
</div>        
      

SCSS

// ---------------------------------------------------------------
// This file contains all styles related to the form component.
// ---------------------------------------------------------------

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input.border-round {
  border-radius: 8px;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

.form-container {
  border-radius: 5px;
  padding: 20px;
}

.form-col-25 {
  float: left;
  width: 12%;
  margin-top: 6px;
}

.form-col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */

.form-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .form-col-25, .form-col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}