WPForms is quick to build with, but the free version gives you almost no control over how the finished form looks. Field styling belongs to your theme, and changing it usually means custom CSS.
The WPForms widget in The Plus Addons for Elementor moves that styling into the Elementor panel. Pick a form you have already built and restyle its labels, fields, choice buttons and submit button from the Style tab.
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 WPForms 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: WPForms, switched on under The Plus Addons > Widgets. It only appears there while the WPForms plugin is active.
- You need the form plugin: WPForms 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: build one in WPForms > Add New first. The Select Form dropdown only lists forms that already exist.
Turn the Widget On
- Go to The Plus Addons > Widgets in the WordPress dashboard.
- Search for WPForms.
- Switch its toggle on.
Add the Widget and Pick a Form
- Edit a page with Elementor.
- Drag the WPForms widget on to the canvas.
- In Content > Select Form, choose your form.
- In Content > Display Options, decide whether to show the Form Name and the Form Description above the fields. Both are set to Hide by default, so the widget shows the fields only.
Style the Labels and Descriptions
WPForms prints a label above each field and, optionally, a short description under it. Each has its own section:
- Style > Label — typography, Label Color, margin, and the colour of the required asterisk.
- Style > Description Text — typography, colour and spacing for the smaller helper text.
Style the Input Fields and Text Areas
Style > Input Fields Styling covers every single-line field — text, email, number, phone, URL and select. Style > Textarea Fields Styling covers the multi-line boxes. Both sections carry the same controls:
- Padding and Margin, per device.
- Typography, Text Color and Placeholder Color.
- Background Type — colour, gradient or image.
- Border Options: switch Box Border on before Border Style, Border Width and Border Color will do anything. Border Radius works either way.
- A Normal / Focus tab for the state while the visitor is typing.
Style the Submit Button
Style > Submit/Send Button gives you width, padding, margin, typography, text colour, background, border options and border radius, with separate Normal and Hover tabs.
Style Checkboxes and Radio Buttons
The widget hides the browser’s own checkbox and radio control and draws its own, so the choice fields look the same in every browser. Style > CheckBox/Radio Field has a Check Box tab and a Radio Button tab with the same controls on each:
- Typography and Text Color for the option label.
- Checked Color and Checked Bg Color for the selected state.
- UnChecked Color and UnChecked Bg Color for the rest.
- Box Border, with Border Style and Border Color.
If your form uses WPForms’ image choices instead of plain text options, switch on Must use image choices in WPForms in the same section. That reveals Image Checkbox Normal, Image Checkbox Selected and a matching pair for radio buttons, which style the picture tiles rather than the boxes.
The Result
The Other Sections
| Section | What it styles | Default |
|---|---|---|
| Outer Field | The row that wraps each field — padding, margin, background and border. | unset |
| Form Container | The box around the whole form — padding, background, border, radius and shadow. | unset |
| Response Message | The confirmation and validation messages WPForms prints. | unset |
| On Scroll View Animation | An entrance animation for the whole form as it scrolls into view. | off |
How It Behaves
- The widget only writes CSS for its own instance. The same form embedded twice with two widgets can be styled two different ways.
- Fields, logic, notifications and confirmations stay in WPForms. The widget never edits the form.
- Padding, margin, typography and border widths are all per-device.
- Unlike the Contact Form 7 widget, this one has no File/Upload section, so a WPForms file upload field keeps the browser’s own control.
Limitations
- There is no File/Upload Field section in this widget. File upload fields are not restyled.
- The tick inside a checked box is a Font Awesome glyph and The Plus Addons does not load Font Awesome itself. On a page with no other icon it can render as an empty square; adding any Elementor icon widget to the page loads the font.
- Border Style, Border Width and Border Color do nothing until Box Border is on.
- Markup added by WPForms add-ons is outside what these sections target.
Troubleshooting
The widget is not in the Elementor panel
Check that WPForms is active, then that the WPForms toggle is on under The Plus Addons > Widgets.
Select Form is empty
Build a form in WPForms > Add New and reload the Elementor editor.
The form title keeps showing (or never shows)
That is Content > Display Options > Form Name, not a WPForms setting. It is set to Hide by default.
My image choices are not styled
Switch on Must use image choices in WPForms under CheckBox/Radio Field. The image-choice controls are hidden until you do.
