Title and Description are part of WpForms Header. You can read our article regarding styling WpForms header section if you want to add background or border to it. In this article you will know how to change font size, color etc of title and description. This can be achieved using WpForms Styler plugin or with CSS code. Both the methods have their own advantages and drawbacks.
Pro’s and Con’s of using Styler for WpForms
- Easy to use.
- Live preview changes.
- Can use color picker to add colors.
- Live preview changes before saving them.
- Changes stay even if the theme is changed.
- Can only change the properties that comes inbuilt in the plugin
Steps to Change Design of WpForms Title and Description
- Install and Activate Styler for WpForms from WordPress plugin repository.
- Go to customizer and then Styler for WpForms panel. Under this panel you will only have the option to select the form.
- Once you select a form then the customizer will reload and provide all the options to design the form.
- Now navigate to ‘Title & Description’ section.
- Form Title and description includes the settings for the title and description of the form. It includes the following settings:
- Title font color: Using this option you can give the color to the title of the form.
- Title font size: You can also specify the size of the title by using the title font size property. You can give any value in px,% or ems .
- Title font alignment: This option can be used to align the title in whichever way you like. You can align it at the left,center,right and also justify it .
- Margin: This property enables you to create a space around the title.You can use the margin-top,margin-right, margin-bottom and margin-left properties .
- Padding: By using the padding property you can specify the space between your title and the border. You can use the padding-top, Padding-right, Padding-bottom and padding-left properties.
- Description font color: This option can be used to provide color for the description.
- Description font size : This option is used to give the font size to the form description.
- Description font alignment: By using this property you can also align the form description .You can align it to the left, right ,center or justify it.
- Margin: It is used to provide the space between your title and description. You can use the margin-top,margin-right, margin-bottom and margin-left properties .
- Padding : This option is used to give the padding for the description . You can use the padding-top, Padding-right, Padding-bottom and padding-left properties.
Here is the video tutorial demonstrating how you can easily alter the design of WpForms Title and Description
Change Design of WpForms Title & Description using CSS
You can use the following code to change the design of title and description of WpForms using CSS.
Note: You should replace FORMID in above code with the id of the form you are working on.
body #wpforms-FORMID .wpforms-head-container .wpforms-title
The above code will target the title of the form. Everything you write under it will affect how the title is displayed. Ex. we have given red color to title and made its font size 24px large.
body #wpforms-FORMID .wpforms-head-container .wpforms-description
The above code will target the description of the form. Everything you write under it will affect how the description is shown. Ex. we have given green color to description and made its font size 18px large.
If you need any help regarding the design of WpForms then feel free to contact us.