---
title: "How to Customize WPForms in Elementor (NO CSS)"
url: https://theplusaddons.com/docs/customize-wpforms-in-elementor/
date: 2023-02-15
modified: 2026-09-17
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-Customize-WPForms-in-Elementor-NO-CSS-1024x536.jpg
word_count: 939
---

# How to Customize WPForms in Elementor (NO CSS)

## 

- WPForms widget in The Plus Addons for Elementor moves form styling into the Elementor panel, so labels, fields, choice buttons and the submit button are restyled from the Style tab without CSS.
- Edition Free ships the WPForms widget, and every styling control in the post is available without Pro; Elementor Pro is not required.
- Style sections cover Input Fields Styling, Textarea Fields Styling, Submit/Send Button, CheckBox/Radio Field, Outer Field, Form Container, Response Message and On Scroll View Animation.
- Must use image choices in WPForms reveals Image Checkbox Normal and Image Checkbox Selected controls for image choices, while file upload fields stay unstyled because there is no File/Upload Field section.

**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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/wpforms-styler/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

![The Plus Addons Widgets screen with the WPForms widget switched on](https://theplusaddons.com/wp-content/uploads/2023/02/wp-forms-activation-1024x360.png)

## 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.

![Select Form and Display Options in the WPForms widget Content tab](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-wpforms-select-form.webp)

## 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.

![WPForms fields on the front end before and after the widget's field styling](https://theplusaddons.com/wp-content/uploads/2023/02/wpforms-field-preview.gif)

## 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.

![WPForms submit button before and after styling it with the widget](https://theplusaddons.com/wp-content/uploads/2023/02/wpforms-submit-styling-1024x310.png)

## 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**.

![Styled radio buttons and checkboxes in a WPForms form](https://theplusaddons.com/wp-content/uploads/2023/02/wpforms-checkbox-radio-styling.png)

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

![A WPForms form on the front end after styling it with The Plus Addons widget](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-result-wpforms.webp)

## 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.

## Related Docs

- [How to Customize Contact Form 7 in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-contact-form-7-in-elementor-no-css/)- [How to Customize Ninja Forms in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-ninja-forms-in-elementor/)- [How to Customize Everest Forms in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-everest-forms-in-elementor/)- [How to Create an Elementor Form for Free](https://theplusaddons.com/docs/create-an-elementor-form-for-free/)

## Frequently Asked Questions

**Q: What do I need before I can customize WPForms in Elementor without CSS?**
A: WPForms has to be installed and activated, and you need at least one form already created in WPForms. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides the WPForms widget in the free plugin, so Elementor Pro is not required. The key limitation is that this widget styles an existing WPForms form, it does not build the form itself.

**Q: Why is the WPForms widget not showing in the Elementor panel?**
A: The usual cause is that WPForms is not active or the WPForms widget toggle is still off under The Plus Addons > Widgets. This widget only appears there while the WPForms plugin is active, so the plugin state matters before anything else. If it still does not show up, reload the Elementor editor after confirming both plugins are active.

**Q: Can I style a WPForms form that was already built in WordPress?**
A: That is exactly how this widget works. Pick a form you have already created in WPForms and restyle its labels, fields, choice buttons, and submit button from the Elementor Style tab. The Plus Addons for Elementor keeps the form logic inside WPForms, while the visual styling moves into Elementor.

**Q: How do I hide the form title and description in Elementor?**
A: Form Name and Form Description are controlled from Content > Display Options, not from WPForms itself. Both are set to Hide by default, which means the widget can show only the fields if you leave those options alone. That matters when you want a cleaner embedded form and do not want extra text above it.

**Q: Why are my checkbox or radio styles not applying to image choices?**
A: Image choices need an extra switch: Must use image choices in WPForms under CheckBox/Radio Field. Until that is enabled, the image-choice controls stay hidden and only the normal box or radio styling applies. That setup matters because image choices use picture tiles instead of the standard checked boxes.

**Q: What are the main limitations of styling WPForms with The Plus Addons for Elementor?**
A: The biggest limits are file uploads and add-on markup. There is no File/Upload Field section, so file upload fields keep the browser’s own control. Markup added by WPForms add-ons sits outside what these sections target. Also, Border Style, Border Width, and Border Color do nothing until Box Border is turned on.