CF7 Skins Ready offers you a Label Position option for each form field. Using this option, you can choose where to display a label with respect to a form field.

Label Position Bottom in a CF7 Form

In this article, we show you how to use the Label Positions option from the CF7 Skins Visual Editor quickly and easily.

The Label Position option is available in our CF7 Skins Ready Add-on.

Label Positions in CF7 Skins Visual Editor

Adding the label position option can offer the following benefits:

  • helps make forms easier to read.
  • lower user errors when completing form fields.
  • more control and flexibility over customization of your forms.

Tip: The Label Position feature is available only for CF7 Skins Ready users.

Adding Label Position

You can apply the Label Position option with three different methods:

1. Using Form Options.

2. Editing the Label Options field from the CF7 Skins Visual Editor.

3. Using the Label Options dropdown in the CF7 Skins Visual Editor.

Tip: With the CF7 Skins Visual Editor you don’t need to work directly with CF7 Tags. Our drag & drop Visual Editor includes support for all Contact Form 7 tags & options.

1. Using Form Options

To add label position using Form Options:

1. Go to your Contact Form 7 form and scroll down to the CF7 Skins Visual Editor.

CF7 Skins Visual Editor

2. Select Form Options.

Form Options in CF7 Skins Visual Editor

3. Choose a Label Position from the drop-down menu.

Label Options in Form Options panel

4. Scroll down and click Save Visual.

CF7 Skins Visual Editor - Save Visual button

Tip: Using this method, you can easily set the Label Position for all the form fields at once.

2. Editing the Label Options field

To add label position by editing the corresponding form field:

1. Go to your Contact Form 7 form and scroll down to the CF7 Skins Visual Editor and edit the required form field.

Edit form field in CF7 Skins Visual Editor

2. Choose an option from the Label Position drop-down menu.

Editing Label Position in CF7 Skins Visual Editor

3. When you completed making changes on the relevant form fields, scroll down and click Save Visual.

Tip: The Label Position added using this method overrides the position added from the Form Options.

3. Using the Label Options dropdown

To add label position using the Add-ons drop-down menu for a form field:

1. Go to your Contact Form 7 form and scroll down to the CF7 Skins Visual Editor.

2. Select the drop-down menu for the required form field.

Label Positions in CF7 Skins Visual Editor

3. Click Label Position and select the required position from the drop-down menu.

4. When you are done making changes on all your form fields click Save Visual.

Tip: You can use the Add-ons drop-down menu to make quick & easy changes directly on each form field.

Final Form

After using the Label Position options, you can customize your form as follows:

Contact Form

This form is made with CF7 Skins + CF7 Skins Pro + CF7 Skins Ready

The Label Position in all the fields of this form are set to Bottom.

Before CF7 Skins v2.3

Prior to CF7 Skins v2.3, the Label Position option was not available in CF7 Skins Ready. The position of the labels was based on the chosen style and it could not be modified.

Further Reading

  • CF7 Skins Ready – Structure Contact Form 7 forms
  • Quick & Easy Ready styling options for Contact Form 7 forms

    %d bloggers like this: