WpForms lets you specify field labels but they don’t have inbuilt support for changing its design like font color, padding, font size etc. You have to either take the help of CSS or you can use Styler for WpForms that handles all the CSS and all you have to do is use its interface to make the changes. Form title is not considered as label so, if you want to design it then you should checkout this method to change design of WpForms title.
In this article I will guide you through process of using custom CSS and Styler for WpForms plugin. Both methods works great and you can choose which ever you find more appropriate for your needs.
Style WpForms Field Labels with Styler Plugin
- Install Styler for WpForms plugin.
- After you activate the plugin then you will be greeted with a welcome screen with all the steps to use the plugin.
- Open wordpress customizer and then select the form for which you want to change the design of labels.
- Now navigate to Field Labels section and you will get the options to modify the look of labels.
- You can use the field labels settings to style the labels of the form. It includes the following properties:
- Hide labels: This option allows you to hide the labels .
- Label font Size : This property is used to determine the size of the labels. You can give the size value in px, ems or %.
- Label font color: You can select any color for your label by choosing label font color property .
- Padding: You can also provide the space between your labels and fields by using the padding property.
- Every change you make in the in the customizer will be live previewed instantly. Once you are satisfied with the design then click on Publish button and the changes will become active for your form.
Checkout the below video tutorial to view all the above steps in action
Style WpForms Field Labels with CSS
The following code can be used to change any css properties of WpForms labels
Change FORMID in the above code to the actual id of your form . Ex. 1
body #wpforms-FORMID .wpforms-form .wpforms-field-radio li label
The above code will target all the field labels used in the form. We have used this code to give yellow color, font size of 20px and padding of 10px to our label.
Facing any issue and need help then leave us a comment below.