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 WordPress Customize feature to adjust how the label appears when it is populated with content.

To do this:

1. Click on Customize in the WS Form WordPress menu.
2. Click the Advanced tab.
3. Change the Inside Label Vertical Offset setting to determine how far the label should move in vertical position. This defaults to -19 pixels.
4. Change the Inside Label Scale setting to determine how the label is scaled. 1 = Same size. 0.5 = Half size. This defaults to 0.9.
5. Click Publish to save your changes.

When you change these values, you can see the result in the preview pane.

CSS Class

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