Global Form Styler

Cf7 Global styler - Themefic

Separately styling each form on the website is possible, but this feature introduces additional, unnecessary workloads. As most websites share a similar design language throughout the UI, being able to style all of the Contact forms in one place saves time. 

The Pro version of Ultimate Addons for Contact Form 7 offers the Global Styler addon to achieve that — without necessitating style sheet languages like CSS. 

Installing and Activating Ultimate Global Settings

  • Assuming you have the Pro version of UACF7 installed, the next step is to visit Themefic’s download portal and download the Global Settings addon (available in .zip format). 
  • Once downloaded, visit the WordPress dashboard and click on the Add New button under the Plugins tab. Since you’ve downloaded the plugin file, click on Upload Plugin and then Browse to locate the file on your storage. Then, install and activate the plugin. 

Creating Global Form Styles

  • After the installation, you’ll find an option named Ultimate Global Settings under the Contact tab. This will take you to the form styling page.
    Assuming you have published pages with the forms embedded in them, any changes you make in the global section will now affect the forms.
  • You’ll find three categories here — Label Options, Input Field Options, and Submit Button Options.
    • Label options modify the header of each input field, where you can change the font color, size, weight, background color, or family in one place. You can put in your own hex color codes or rely on the color picker, while the font size requires values in px.
    • Input field options let you customize the usual font properties within the text fields. In addition, you can modify the border color, size, or radius around the field.
    • The submit button options offer changes in the button’s color, size, padding, background, and border properties. You can also change its font properties in a similar manner as the previous sections.  

Custom CSS

If you’re comfortable using a style sheet language, it’s possible to add your own CSS modifications to the forms as well. All you need to do is target a specific element through its CSS class or ID (beginning with a ‘.’ and ‘#’ sign respectively) and make the changes. 

Once you’re done modifying the form elements as necessary, click on Save Styles, and the changes should be live.  

Overriding Global Styles for Specific Elements

If you want a certain form element to follow a separate styling for some reason, you can do that through an addon as well. To do that: 

  • Go to the Addons Settings section by clicking on the Ultimate Addons tab, enable the Complete Form Styler addon, and save the changes.
  • Afterward, click on the Contact Forms tab to find the list of the Contact forms you’ve created. Once you’ve found the target form, click on Edit.
  • On the edit page, you should now see a tab named UACF7 Form Styler. Click on that, and it’ll bring up a similar form styling page that allows you to modify the labels, input fields, or submit buttons. The support for custom CSS is present as well.
    The changes here will be specific to that form and override any global styling.

Once you’ve made the changes, click Save and publish the page. You should now see that Global Styler has affected every form except the specific forms you’ve modified with Form Styler

Please see this: