How to Create a Form With Floating Labels

Overview

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. 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!

Setup

To begin you can either edit a form you’ve already created or create a new form. For assistance on creating a new form, please review this documentation.

Once you’ve created your form, remember to add a Placeholder for each form field. In our example, we’ve added Name (Simple format), Email, Website/URL, Numbers and a Paragraph Text form fields to our form.

Using some PHP and CSS you can make your form have floating labels.

1) Adding the PHP

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.

Copy and paste this snippet to your site.

/**
 * Remove the field label from the top of the field for form ID 1289
 *
 * @link https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/
 */

function wpf_dev_display_field_before( $field, $form_data ) {

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 for form ID 1289
 *
 * @link https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/
 */

function wpf_dev_display_field_after( $field, $form_data ) {
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 );

2) Adding CSS Classes

We’re going to add a CSS class of floating so that we can use that CSS class to target our styling.

Select each field and click on the field in the preview panel to open its Field Options.

Under Advanced Options, you’ll need to add floating to the CSS Classes field.

If using more than one CSS class for a field, just be sure to put a space between each class name.

Inside the form builder under Field Options, add the floating class name to the CSS Classes

3) Adding the CSS

Finally, you just need to copy and paste this CSS to your site.

form#wpforms-form-1289 {
	position: relative;
}
form#wpforms-form-1289 .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 ::-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;
}

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.

You've successfully added floating labels to your WPForms

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.

Action References: