How to set up and style the Contact Form 7 Styler widget in Elementor.
Contact Form 7 Styler places one of your Contact Form 7 forms on the page and lets you style its labels, fields, submit button and messages with Elementor controls. Use it when you want a form to match your design without writing CSS.
Part of: Bright Addons (free). Before you start: The Contact Form 7 plugin, installed and active, with at least one form created.
| Option | What it does |
|---|---|
| Contact Form | The Contact Form 7 form to show. Up to 100 forms are listed, sorted by title. |
| Hide Label Text | Hides the visible label text. Use placeholders in your form when label text is hidden. |
| Full Width Button | Stretches the submit button to the full width of the form. |
Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
color and typography of the labels. This section is hidden when Hide Label Text is on.
typography, text color, placeholder color, background, border color, focus border color, border width, border radius, padding, space between fields and message box height.
typography, normal and hover colors for text, background and border, border width, border radius and padding.
field error color, success message color and error message color.
Yes. The widget shows a form made with the Contact Form 7 plugin. Without it, the panel shows a notice asking you to install and activate it.
No. You create and edit the form in Contact Form 7. The widget selects a form and styles it.
Yes. The Messages section in the Style tab has a Field Error Color, a Success Message Color and an Error Message Color.
The dropdown lists up to 100 forms in alphabetical order. A form beyond that number will not appear.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide