How to Add Material Design to Your Form Fields Using CSS

Would you like to add Material Design to your WPForms fields? This type of design is a very popular way to add a modern and clean look to your form fields. Using a small PHP snippet along with CSS you can easily apply this look to your WPForms and in this tutorial, we’ll walk you through each step on how to achieve this.

You may be asking, “what exactly is Material Design?”, we can tell you that according to Google’s 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 in 2014 and its popularity has been growing wildly ever since.

Creating your form

First, you’ll need to create your form and add the fields you wish to add. If you need assistance in creating your form, please review this tutorial.

For the purpose of the tutorial, we’re just creating a simple feedback form. Our example will include the Name, Email, Subject, and Paragraph Text form fields.

Material Design – PHP snippet

Next, we’re going to add a small PHP snippet. We need to do this in order to move the label of the form field from before the form field to after.

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 ) {
    
	// Only run this snippet on form ID 697
	if ( absint( $form_data[ 'id' ] ) !== 697 ) {
	return;
	}
	
	// Remove the action that sets the label before the form field
    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 ) {
	
	// Only run this snippet on form ID 697
	if ( absint( $form_data[ 'id' ] ) !== 697 ) {
	return;
	}
 
	// Set the label to appear after the form field is displayed
    wpforms()->frontend->field_label( $field, $form_data );
}
 
add_action( 'wpforms_display_field_after', 'wpf_dev_display_field_after', 10, 2 );

This snippet will only run on the form ID 697. If the form ID matches, our first function wpf_dev_display_field_before will remove the PHP action that sets the field label to display before the form field. The next function will then force the label to appear after the form field.

Material Design – CSS snippet

Your final step is to add this CSS to your site that will add the Material design look to all of our form fields.

If you need any help in adding CSS to your site, please review this tutorial.

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

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

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

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

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

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

Reference Actions

• wpforms_display_field_after
• wpforms_display_field_before