The Form Styler Extension in the Extensions for CF7 plugin allows users to easily customize the appearance of Contact Form 7 (CF7) forms. With this extension, you can apply global styling to all forms or customize styles for individual forms. This guide will explain how to use the Form Styler Extension effectively.
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.
That’s it! Thank you for choosing Extensions for CF7 to enhance your user experience. If you need additional assistance, feel free to contact our support team. Our dedicated support team would be more than happy to assist you.