Contact Form 7 is the most installed contact form plugin in WordPress, and it ships with no styling options at all. Out of the box your form inherits whatever your theme happens to do with form fields.
The Contact Form 7 widget in The Plus Addons for Elementor puts those fields in the Elementor panel instead. You pick an existing form and style its inputs, text area, choice fields, file upload button and submit button from the Style tab — no CSS.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — the Contact Form 7 widget ships in the free The Plus Addons for Elementor plugin, and every styling control described here is available without Pro. Verified by deactivating the Pro plugin: the rendered form and its computed styles were unchanged.
- Widget to enable: Contact Form 7, switched on under The Plus Addons > Widgets. It only appears there while the Contact Form 7 plugin is active.
- You need the form plugin: Contact Form 7 installed and activated, with at least one form already created. The widget styles a form that plugin renders; it does not build one.
- Elementor: the free Elementor plugin is enough. None of these controls needs Elementor Pro.
- You need a form: create at least one form in Contact > Add New before you add the widget. The Select Form dropdown lists only forms that already exist.
Turn the Widget On
- Go to The Plus Addons > Widgets in the WordPress dashboard.
- Search for Contact Form 7.
- Switch its toggle on.
The widget only appears in this list while the Contact Form 7 plugin is active. Deactivate Contact Form 7 and the widget disappears from Elementor too.
Add the Widget and Pick a Form
- Edit a page with Elementor.
- Drag the Contact Form 7 widget on to the canvas.
- In Content > Select Form, choose your form.
- Set Alignment if you want the form left, centre or right. It can be set separately for desktop, tablet and mobile.
The form appears on the canvas straight away. What you will notice is that it looks plainer than the same form outside Elementor: the widget removes Contact Form 7’s inherited field borders and backgrounds so you can build the look yourself.
That is the starting point, not a bug — but it does mean you should plan to style at least the input fields, or visitors will see fields with no visible edges.
Style the Input Fields
Go to Style > Input Fields Styling. This one section covers every single-line field Contact Form 7 renders — text, email, URL, telephone, number, date and select.
- Padding and Margin, per device.
- Typography, Text Color and Placeholder Color.
- Background Type — a flat Color, a gradient or an image.
- Border Options — switch Box Border on first. Border Style, Border Width and Border Color only apply while that switch is on.
- Border Radius, which works whether or not Box Border is on.
- A Normal / Focus tab, so you can change the border colour and radius while the visitor is typing in the field.
Style the Text Area
The message box is a separate element with its own height and resize behaviour, so it has its own section: Style > Text Area (Message) Field. The controls mirror Input Fields Styling — padding, margin, typography, text and placeholder colour, background, Box Border with style, width and colour, border radius, and a Normal / Focus tab.
Styling the input fields does not style the text area. If your message box still looks different from the rest of the form, this is why.
Style the Submit Button
Open Style > Submit/Send Button. You get width, padding, margin, typography, text colour, background (colour, gradient or image), border options and border radius, each with a Normal and a Hover tab.
Style Checkboxes and Radio Buttons
Contact Form 7 leaves checkboxes and radio buttons to the browser, which is why they look different on Windows, macOS and Android. The widget hides the native control and draws its own in place of it, so the same markup looks the same everywhere.
Style > CheckBox/Radio Field has two tabs, Check Box and Radio Button, with the same controls on each:
- Typography and Icon Size.
- Checked Color and Checked Bg Color — the tick and its box once the option is selected.
- UnChecked Color and UnChecked Bg Color — the same two for the unselected state.
- Check Box Position — whether the box sits before or after its label.
- Box Border, with Border Style, Border Color and Border Radius.
Style the File Upload Button
A file field in Contact Form 7 renders as the browser’s own file picker, which cannot be styled with CSS in any reliable way. The widget hides that control completely and draws a button in its place, which you then style from Style > File/Upload Field: padding, typography, Min Height Field, Text Color, Icon Color, Alignment, Style, Background Type and border options.
The Result
Here is the same form after the input fields, text area, choice fields, file button and submit button have been styled from those five sections — with no custom CSS anywhere on the page.
The Other Sections
| Section | What it styles | Default |
|---|---|---|
| Extra Options > Outer Section Styling | Which element the Outer(Field) Styling section targets: the form’s own label wrappers, or your own .tp-cf7-outer class. | Default Label Field |
| Outer(Field) Styling | The row that wraps each field — padding, margin, background, border. | unset |
| Response Message | The success, error and validation messages Contact Form 7 prints under the form. | unset |
| Ajax Response | The loading indicator Contact Form 7 shows while the form is being submitted. | unset |
| On Scroll View Animation | An entrance animation for the whole form as it scrolls into view. | off |
How It Behaves
- Every setting is CSS the widget writes for that one widget instance. Two Contact Form 7 widgets on the same page can style the same form differently.
- The widget does not touch the form itself. Fields, validation, mail settings and spam protection all stay in Contact > your form.
- Padding, margin, typography, alignment and border widths can be set per device, so the form can be laid out differently on mobile.
- Choice fields and the file button are redrawn by the widget, so they look the same in every browser — that is the point of those two sections.
Limitations
- With no Style settings the widget removes Contact Form 7’s field borders and backgrounds, so an unstyled form has invisible input boxes. Style at least Input Fields Styling before you publish.
- The tick inside a checked box is a Font Awesome glyph, and The Plus Addons does not load Font Awesome itself. On a page that uses no other icon, the tick can render as an empty square. Putting any Elementor icon widget on the same page loads the font and fixes it.
- Border Style, Border Width and Border Color do nothing until Box Border is switched on. This catches people out in every one of these sections.
- The widget styles what Contact Form 7 renders. Markup added by a third-party Contact Form 7 add-on is not covered.
Troubleshooting
The widget is not in the Elementor panel
Check that Contact Form 7 is active, then that the Contact Form 7 toggle is on under The Plus Addons > Widgets. The widget is only registered while the form plugin is active.
Select Form is empty
There is no form to pick yet. Create one in Contact > Add New and reload the Elementor editor.
My border colour does nothing
Switch Box Border on in that section. Border Style, Border Width and Border Color are all conditional on it.
The input fields have no visible edges
That is the unstyled state. Give them a background or switch Box Border on under Input Fields Styling.
The checkbox tick is a blank square
Font Awesome is not loaded on that page. Add any Elementor icon to the page, or load Font Awesome from your theme.
