WPForms does not include built-in visual styling options, which means forms inherit default browser styles that rarely match your site’s design. The WP Forms widget in The Plus Addons for Elementor gives you full control over every form element: input fields, labels, text areas, checkboxes, radio buttons, and the submit button, all from the Elementor editor without writing a single line of CSS.
Unlike Elementor’s built-in Form widget, WPForms is a standalone form builder with its own submission management, conditional logic, email notifications, and third-party integrations. Using the WP Forms widget in The Plus Addons for Elementor, you get the full form-building power of WPForms with complete visual control over how the form looks in Elementor.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
Best Used For:
- Contact and inquiry pages where the form must match a branded design system
- Lead generation landing pages where submit button style and visibility directly affect conversions
- WooCommerce sites using WPForms for order forms, quote requests, or custom checkout fields
Required Setup
- WPForms Plugin installed and activated.
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- Make sure the WP Forms widget is activated, to verify this visit The Plus Addons → Widgets → and Search for WP Forms and activate.
How to Activate and use the WP Forms Widget?
Go to
- The Plus Addons → Widgets
- Search the widget name and turn on the toggle.
Make sure you have at least one form in the WPForms then add the WP Forms widget on the page and go to WPForms > Select Form and choose your form from the dropdown list.
Note: If your form doesn’t show up in the Elementor editor, enable the Load Assets Globally checkbox from Dashboard > WPForms > Settings.
Key features
- Style input fields: Control typography, color, background, border, padding, margin, and placeholder color for text, email, number, and other input field types.
- Style label and description: Manage the appearance of field labels and descriptions separately from input fields, so each element carries its own visual weight.
- Style text area: Apply the same styling controls available for input fields to text area fields, keeping a consistent look across all form fields.
- Checkbox and radio button styling: Override inconsistent browser defaults with a uniform design for checkboxes and radio buttons, including image choice options.
- Style the submit button: Set the button width, background type (solid, gradient, or transparent), border, shape, and typography to match your site’s design.
- Form row styling: Control the spacing and visual separation between form rows for a structured, readable layout.
- Style form container: Set background color, border, border radius, and padding on the outer form wrapper.
- Style form messages: Apply consistent styling to success, validation, and error messages so they fit your site rather than using default browser or WPForms styles.
Styling Input Field of WPForms in Elementor
When a form contains multiple input types, text, email, phone, and number, default browser styles often produce inconsistent field heights, borders, and font sizes across those fields. The WP Forms widget in The Plus Addons for Elementor consolidates all input field styling into a single panel inside the Elementor editor.
To style the input fields, go to the Style tab and select Input Fields Styling.
From here, set the typography, text color, background color, border, padding, margin, and placeholder color for all input fields. Use a bottom-border-only style when you want a minimal underline look that suits flat design pages. Use a solid background with rounded corners when the form sits on a dark-background section and field boundaries need to be clearly visible.
If you want to show a WPForms form inside a modal rather than inline on the page, the Popup Builder widget in The Plus Addons for Elementor lets you trigger the form on button click without the user leaving the current page. This is useful when the form is a lead capture or newsletter signup that should not disrupt the page flow.
Styling Text area of WPForms in Elementor
Text area fields are taller and more prominent than standard input fields, which makes a visual mismatch between them more noticeable on the finished page.
The WP Forms widget gives you the same styling controls for text area fields that you get for input fields. Go to the Style tab and find the text area options. Set the typography, text color, background, border, padding, and placeholder color to match your input field settings.
This is useful when your form includes both short input fields and a long message field. Matching both sets of controls produces a consistent, intentional form design rather than one that looks assembled from separate elements.
Styling Submit Button of WPForms in Elementor
The submit button is the most visible interactive element on any form. A button that blends into the page background reduces form completions, and WPForms does not include built-in submit button styling.
Go to the Style tab and open the Submit/Send Button section.
Set the button to full width when your form is narrow or when you want the button to span the entire form column. Use a custom width when the button sits alongside other elements on the page. Set a gradient background when the button needs to stand out against a light-colored section. Use a transparent background with a solid border for a minimal outlined style that matches bordered input fields. Increase the border radius to create a pill-shaped button, or set it to zero for a sharp rectangular shape. Hover state options let you set a different background color and border when the user moves the cursor over the button.
If you use Gravity Forms instead of WPForms, see How to Customize Gravity Forms in Elementor for the equivalent styling options available through The Plus Addons for Elementor.
Styling Radio Button or Checkbox of WPForms in Elementor
Checkboxes and radio buttons are among the most visually inconsistent form elements across browsers. A checkbox that renders correctly in Chrome may appear as a plain square in Safari, making the form look unfinished to a portion of your visitors.
The WP Forms widget replaces the browser-default checkbox and radio button rendering with a custom design that stays consistent across all major browsers. Go to the Style tab and open the Checkbox/Radio Field section.
From here, set the size, checked color, border, and background for checkboxes and radio buttons. You can style them separately, for example a square checkbox with a custom checkmark color alongside a round radio button with a filled selected state.
WPForms supports image choices for radio buttons and checkboxes, where users select a product image or icon instead of a text label. The WP Forms widget lets you style those image choice containers as well, including border, padding, selected-state overlay, and image alignment.
The Plus Addons for Elementor includes form styler widgets for other popular form plugins. If you use Contact Form 7, see How to Customize Contact Form 7 in Elementor.
