How to Add Material Design to Your Form Fields Using CSS

Overview

Would you like to add Material Design to your WPForms fields without the need for JavaScript? You can easily customize your form fields to add a Material Design look using pure CSS. In this tutorial, we’ll show you how to achieve this with CSS only.

What is Material Design? According to their own definition:

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

Google created this design language some time ago and its popularity has been growing wildly ever since.

Setup

For the purpose of this documentation, we’re going to keep the example form simple. The form has a few standard form fields and a textarea for comments or messages.

The example form to use for the Material Design CSS

The CSS shown below is targeting the form ID of 225, please remember to update this CSS to match your own form ID number.

Simply copy following CSS to your site you can customize the look of your form.

#wpforms-form-225 { 
  float: left; 
  width: 100%; 
  text-align: center; 
  margin: 30px auto 30px auto; 
}

#wpforms-form-225 .wpforms-field {
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
	margin-bottom: 15px;
  position: relative;
}

#wpforms-form-225 .wpforms-field input, 
#wpforms-form-225 .wpforms-field textarea {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #ccc;
  background-color: transparent;
  margin: 0px auto;
  padding: 5px;
  outline: none !important;
  font-size: 14px;
  color: rgba(0,0,0,0.8);
  background: -webkit-linear-gradient(bottom, #51BBBE 50%, #51BBBE 50%);
  background: linear-gradient(to top, #51BBBE 50%, #51BBBE 50%);
  background-position: left bottom;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition: all .2s ease-in-out;
  max-width: 100%;
}

#wpforms-form-225 .wpforms-field label.wpforms-field-label {
  text-align: left;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 200;
  background: transparent;
  color: rgba(0,0,0,0.6);
  margin: 0px auto;
  cursor: text;
  transition: all .15s ease-in-out;
}
 
#wpforms-form-225 .wpforms-field input:focus, 
#wpforms-form-225 .wpforms-field textarea:focus { 
  border-bottom: 1px solid #51BBBE; 
}

#wpforms-form-225 .wpforms-field input:focus,
#wpforms-form-225 .wpforms-field textarea:focus { 
  background-position: left bottom;
  background-size: 100% 1px;
}

#wpforms-form-225 .wpforms-field input:focus + label.wpforms-field-label,
#wpforms-form-225 .wpforms-field textarea:focus + label.wpforms-field-label { 
  color: #51BBBE;
}

.wpforms-field.wpforms-has-error input.wpforms-error, 
.wpforms-field.wpforms-has-error textarea.wpforms-error {
    border-bottom: 1px solid #e57373 !important;
    background-color: transparent;
    background: transparent !important;
}

.wpforms-field.wpforms-has-error label.wpforms-field-label, 
.wpforms-field.wpforms-has-error label.wpforms-error {
	color: #e57373 !important;
}

Material design animated form field focus

And that’s it! You’ve now customized your form fields! If you’d like to try out some other CSS solutions, take a look at all of our Styling Documentation.