Responsive form Design in CSS Example

In modern web page designing, responsiveness plays key role in creating best user experience, many people access web page from mobile device and low speed internet, and everyone wants the page to be loaded first. Here we see how to make responsive html form using css, so that page can load faster.

.div1
{
 width: 780px;
    width: 80%;
    
}

If you want to use this class in all the form in your project then you can apply style properties to all form elements like example below.

CSS Responsive Form Example

Style for input textbox, select elements and textareas for all form, Other property of form, you can change any colour here to match with your colour scheme , these style properties will be applied to all form control wherever you add the css file reference

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

Now if you want the class to be used only in some particular form then write class name like inputText

.inputText{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

Other property of form, you can change any colour here to match with your colour scheme

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 10px ;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Style the container */
.form-container {
  border-radius: 5px;  
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Here is the code to adjust form elements to current screen width.

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) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

You should also check Responsive form design in Bootstrap