How to Style Forms Using the Form Styler Extension

Live Example #

Once the styles are applied, you can preview the changes on the front-end to ensure the form matches your desired design.

Steps to Style Forms with the Form Styler Extension #

To style form to CF7, make sure that both the Contact Form 7 and Extensions for CF7 Pro plugins are activated on your website.

Step 1: Enable the Form Styler Extension #

Go to WordPress Dashboard > HT Cf7 Extension > Extensions. From the list of extension, turn ON the Form Styler extension.

After turning on the Form Styler Switcher, just click the Save Settings button to save this settings.

Step 2: Configure Global Form Styling #

Once the Form Styler Extension is enabled, a new Gear Icon option becomes available. Click on the Gear icon to access settings where you can customize the styles for Labels, Input Fields, and Submit Button to match your design preferences.

After completing all the styling, click the Save Settings button to apply the changes.

Step 3: Style Individual Forms #

Once the Form Styler Extension is enabled, navigate to the contact form you want to style. Scroll to the bottom of the form editor, where you’ll find options to customize the styles for Labels, Input Fields, and the Submit Button according to your preferences. Enable the form styler switcher to apply your custom styles and align the design with your requirements.

After completing all the styling, click the Save button to apply the changes. This will override the global styling settings for the specific form.