CF7 Skins Ready now 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.
In this article, we show you how to use the Label Positions option from the CF7 Skins Visual Editor quickly and easily.
What’s New?
The Label Position option is available in our CF7 Skins Ready Add-on.
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:
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.
2. Select Form Options.
3. Choose a Label Position from the drop-down menu.
4. Scroll down and click Save Visual.
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.
2. Choose an option from the Label Position drop-down menu.
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.
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:
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 styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. and it could not be modified.
Further Reading
