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 on the form ID 1139.

The example form to use for the Material Design CSS

1) Adding the PHP code

You’ll need to add a PHP code snippet that moves the field Label’s position from above the form field to below the form field.

For assistance on how to add a code snippet to your site, please review this tutorial.

/**
 * Move label position from above form field to below
 *
 * @link https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/
 */
function wpf_dev_display_field_before( $field, $form_data ) {

if ( absint( $form_data['id'] ) !== 1139 ) {
return;
}
    remove_action( 'wpforms_display_field_before', array( wpforms()->frontend, 'field_label' ), 15 );
}

add_action( 'wpforms_display_field_before', 'wpf_dev_display_field_before', 10, 2 );

function wpf_dev_display_field_after( $field, $form_data ) {
if ( absint( $form_data['id'] ) !== 1139 ) {
return;
}

    wpforms()->frontend->field_label( $field, $form_data );
}

add_action( 'wpforms_display_field_after', 'wpf_dev_display_field_after', 1, 2 );

2) Adding the CSS

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

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

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

#wpforms-form-1139 .wpforms-field input, 
#wpforms-form-1139 .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-1139 .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-1139 .wpforms-field input:focus, 
#wpforms-form-1139 .wpforms-field textarea:focus { 
  border-bottom: 1px solid #51BBBE; 
}

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

#wpforms-form-1139 .wpforms-field input:focus + label.wpforms-field-label,
#wpforms-form-1139 .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.

Action References: