How to Create a Form With Floating Labels

Would you like to create a form with floating labels? Floating labels are something that can provide a modern but interactive look to your form with very little effort. For further information on that, you can always review the documentation found on Material Design’s site.

With a small PHP snippet and some custom CSS added styles, you can easily create this look for your form and we’ll show you how!

Creating the form

We’ll begin by creating a simple contact form. If you need any assistance with creating a form, please review this documentation.

You’ll also need to add Placeholder text to each field as well. This text can be added by selecting the field and clicking on the Advanced tab to add the text.

If you need help on how to do this, please check out this article.

Adding CSS Classes

Next, we’re going to add a CSS class of floating to the fields we wish to have floating labels for.

Select each field one by one and click the Advanced tab and add floating inside the CSS Classes field.

Floating Labels – PHP snippet

We’re going to add a couple of small PHP snippets that will remove the label from being on top of the form fields to being just below the form fields.

If you need assistance on how and where to add snippets to your site, please review this tutorial.

/**
 * Remove the field label from the top of the field
 *
 * @link https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/
 */
 
function wpf_dev_display_field_before( $field, $form_data ) {
 
	// Only run this snippet on the form ID 1289
	if ( absint( $form_data[ 'id' ] ) !== 1289 ) {
		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 );
 
/**
 * Move the field label to below the field
 *
 * @link https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/
 */
 
function wpf_dev_display_field_after( $field, $form_data ) {
 
	// Only run this snippet on the form ID 1289
	if ( absint( $form_data[ 'id' ] ) !== 1289 ) {
		return;
	}
 
    wpforms()->frontend->field_label( $field, $form_data );
}
 
add_action( 'wpforms_display_field_after', 'wpf_dev_display_field_after', 1, 2 );

What this snippet is doing is removing the position of the field label from being displayed before the field and placing it after the field.

It’s important to note that in both functions above, we’re only targeting the form ID of 1289. You’ll need to update this to match the form ID you have on your site. If you’re not sure where to find your form ID, please check out this tutorial.

Floating Labels – CSS snippet

Now that our form is created and our snippets are in place, we need to add the custom CSS to our site to pull this all together.

For assistance in how and where to add custom CSS, please review this tutorial.

form#wpforms-form-1682 {
	position: relative;
}
form#wpforms-form-1682 .floating label:nth-of-type(2) {
    display: none;
}
.floating input {
    position: relative;
    min-height: 65px;
	  padding: 15px 10px 10px 15px !important;
}
.floating textarea {
	position: relative;
	min-height: 200px;
	padding: 35px 15px 15px 15px !important;
}
.floating input + label {
    position: relative !important;
    top: -50px !important;
    padding: 15px 0 0 15px !important;
    opacity: .5;
	font-size: 12px !important;
	transition: all .5s ease-in-out 0s;
}
.floating textarea + label {
    position: relative !important;
    top: -200px !important;
    padding: 35px 15px 15px 15px !important;
    opacity: .5;
	font-size: 12px !important;
	transition: all .5s ease-in-out 0s;
}
.floating input:focus + label, .floating input:not(:placeholder-shown) + label {
	top: -70px !important;
	opacity: 1;
}
.floating textarea:focus + label, .floating textarea:not(:placeholder-shown) + label {
	top: -220px !important;
	opacity: 1;
}
.floating.wpforms-has-error em.wpforms-error {
    position: relative;
    top: -50px;
    left: 10px;
}
.wpforms-field-textarea.floating.wpforms-has-error em.wpforms-error {
	position: relative;
    top: -190px;
    left: 10px;
}
.floating.wpforms-has-error label {
    display: none;
}
.floating ::-webkit-input-placeholder { /* Chrome and Safari */
   color: transparent !important;
}
.floating :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: transparent !important;
}
 
.floating ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: transparent !important;
}
 
.floating :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: transparent !important;
}
 
.floating ::-ms-input-placeholder { /* Microsoft Edge */
   color: transparent !important;
}

Some of the CSS listed above is still only targeting the form ID 1289. Remember to update this ID to match your own form ID.

And that’s it! You’ve now created a form with floating labels that float up when the user starts to type in the field.

Would you like to change the color of the confirmation message or just completely remove it? Take a look at our article on How to Remove Confirmation Message Box Styling.

Reference Actions

• wpforms_display_field_after
• wpforms_display_field_before

FAQ

Q: Will the field validation still display?

A: Absolutely! The validation errors will keep the same style.

Q: Why isn’t this working for me?

A: Be sure to run back through the steps above, if you missed placing the Placeholder text in the fields, the labels wouldn’t appear to have the floating effect when a user clicks inside the field.