Form Styler (Global)

In this article, we will explain how to style all your Contact Form 7-based forms from one place with the help of our Pro addon called “Global Form Styler for Contact Form 7”.

What is Global Form Styler for Contact Form 7?

The Global Styler is an add-on that allows you to uniformly style all your Contact Form 7 forms from a single location. Typically, our free add-on: form styler requires you to style each form individually. However, if you have multiple forms, say 10, on your website and wish to apply the same style to all of them, editing each form separately is impractical. This is where the Global Styler add-on becomes extremely useful.

In this tutorial, we will demonstrate how to activate this add-on and effectively utilize it.

What’s needed

Global Form Styler for Contact Form 7

Creating Global Form Styles

  • After the installation, Go to Ultimate Addons -> Settings -> Global Form Styler. 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.

Contact Form 7 Style CSS

You’ll find 4 Sections here — Label Options, Input Field Options, Submit Button & Custom CSS Option.

  • Label options modify the header/label 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 similarly change its font properties as the previous sections.

Custom CSS

If you’re comfortable using CSS, 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.

Contact Form 7 WordPress CSS Style

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

Create Form

Go to Contact -> Add New in your WordPress Dashboard to create a new form.

Overriding Global Styles for Specific Forms

If you want a certain form to have a separate design, you can do that through our free add-on: form styler. Just go through the article to know the complete style setup process of the single forms.

Add Other Fields

Once you are done adding styles, you can add your remaining form fields (based on your needs). For example, name, email, address and so on.

Copy the Shortcode

If your form is ready, click save and copy the Contact form shortcode.

contact form 7 Contact Form 7 Custom Style

Time to Publish

Paste the shortcode wherever you want to show your form (Pages/Posts/Custom Post Types/Sidebars). In the front end, the form should show the design you created using the Global Styler.

Watch Complete Video

If you are still confused, we suggest you watch this video. In this video, we tried to describe the whole step of how to enable Global Contact Form 7 Custom Style in WordPress:

Still Not Clear? Please contact us. Open a ticket from here.