WS Form - Smart, fast, forms for WordPress
My Account
Get WS Form

← All Features

Create Floating Field Labels in Your Forms in WordPress

Show labels inside fields and move them out of the way when visitors enter content.

  • Labels float on entry Labels appear inside empty fields and move outside when content is entered.
  • Placeholder-like effect Creates the appearance of a placeholder while keeping a field label in use.
  • Pure CSS method Uses CSS only, with no JavaScript required.
  • No third-party libraries Floating labels work without additional libraries.
  • Set all fields Apply Inside label positioning as the default for fields in a form.
  • Set individual fields Override the default and enable Inside positioning on specific fields.

Floating field labels appear inside a field when it is empty and move outside the field when it contains content. This creates a placeholder-like effect while keeping the label visible as people type.

In WS Form, this approach helps forms occupy less screen real estate. The feature uses a pure CSS method and does not require JavaScript or third-party libraries.

You can set label positioning to Inside for all default fields in a form or apply it to individual fields in your forms in WordPress. Styling options are also available to adjust how inside labels behave when a field is populated.

  • Save screen space

    Floating labels help forms occupy a smaller amount of screen real estate.

  • Inside when empty

    The label appears inside the field while the field is empty.

  • Moves with content

    When a field contains content, the label moves outside the field.

  • Form-wide default

    Set the Default Label Position to Inside so fields using the Default setting inherit it.

  • Field-level override

    Change Label Position to Inside on a specific field to override the form default.

  • Styler controls

    Use the Styler to adjust how the label appears when a field is populated.

  • Move or hide

    Inside Label behavior can be set to Move or Hide.

  • Adjust appearance

    Vertical Offset and Scale settings are available for Move behavior.

Real Customer Reviews

Trusted by thousands of WordPress professionals.

  • I have been using WordPress since 2006. I’ve used hundreds of different plugins, including many of the popular (and not so popular) form plugins. Gravity forms is great. WS Form is better.

    – thinkgobig

  • Very great plugin with the best support team. If you want to create individual forms for WooCommerce products, you definitely need this!

    – markdaily

  • WS Form is by far the best WordPress form I have used. Without WS Form I would have required a bespoke solution.

    – kassim786

Frequently Asked Questions

What are floating field labels?

Floating field labels appear inside a field when it is empty and move outside the field when it contains content.

Why use floating field labels?

They create a placeholder-like effect and help forms occupy a smaller amount of screen real estate.

Does WS Form use JavaScript for floating field labels?

No. WS Form uses a pure CSS method that does not require JavaScript or third-party libraries.

Can I enable floating labels for all fields?

Yes. You can set the Default Label Position to Inside in the form Styling settings. Fields using the Default label position will then use Inside.

Can I enable floating labels on individual fields?

Yes. You can set Label Position to Inside on a specific field to override the form default.

Can I change how inside labels behave?

Yes. In the Styler, Inside Label settings include Behavior, Vertical Offset, and Scale. Behavior can be set to Move or Hide.

How do I enable floating field labels in WS Form?

Set Label Position to Inside for all fields or for individual fields. You can also adjust Inside Label settings in Styles. For step-by-step guidance, see Create Floating Inside Field Labels With CSS.

Resources