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.