Create Floating Inside Field Labels With CSS

Floating field labels appear inside a field it is empty and move outside the field when it contains content. This makes fields appear to have a placeholder, but when you enter text into the field the label moves out of the way. The advantage of this method is that your forms occupy a smaller amount of screen real estate.

There are various ways of achieving this effect. WS Form PRO uses a pure CSS method that doesn’t require JavaScript or third party libraries.

Enabling Inside Label Positioning

You can enable inside label positioning in WS Form PRO by setting Label Position to Inside either on all fields or a specific field.

Setting All Fields

To set the label position to Inside for all fields:

• Click the settings icon at the top of the layout editor.
• Click the Styling tab.
• Change the Default Label Position setting to Inside.
• Click Save & Close.

This sets all fields that are set to label position Default to Inside.

Setting Individual Fields

• Click the settings icon on a field.
• Click the Advanced tab.
• Change the Label Position setting to Inside.
• Click Save & Close.

You can use this method to override the Default (Form setting) label position on individual fields.

Change Inside Label Positioning Parameters

It is possible to use the Styler to adjust how the label appears when it is populated with content.

To do this:

1. Click on Styles in the WS Form admin menu.
2. Edit a Style.
3. Search for: inside
4. Change Inside Label settings to suit your preference:
   1. Behavior: Move or Hide
   2. Vertical Offset: Defaults to -20px (Applies to Move only)
   3. Scale: Defaults to 0.9 (Applies to Move only)
5. Click the Save icon to save your changes.

When the hidden behavior is chosen, the class wsf-label-position-inside-hide will be added to the form element.

CSS Class

The CSS class applied to fields that support this feature is: wsf-label-position-inside.