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

# How to Customize Contact Form 7 in Elementor (NO CSS)

## 

- The Contact Form 7 widget in The Plus Addons for Elementor styles an existing form from the Elementor panel, and the Style tab covers inputs, text area, choice fields, file upload button and submit button without CSS.
- The widget ships in the free The Plus Addons for Elementor plugin, and every styling control in the post is available without Pro; Elementor free is enough.
- Style > CheckBox/Radio Field redraws checkboxes and radio buttons so the same markup looks the same on Windows, macOS and Android, with Checked Color, UnChecked Bg Color and Check Box Position controls.
- Style > File/Upload Field replaces Contact Form 7’s browser file picker with a styled button, while unstyled forms lose field borders and backgrounds and can show invisible input boxes.

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

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

## 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 Plus Addons Widgets screen with the Contact Form 7 widget switched on](https://theplusaddons.com/wp-content/uploads/2023/02/contact-form-7-activation-1024x363.png)

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

![Select Form and Alignment in the Contact Form 7 widget Content tab](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-cf7-select-form.webp)

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.

![A Contact Form 7 form rendered by the widget with no Style settings applied](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-result-cf7-default.webp)

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.

![Input Fields Styling section of the Contact Form 7 widget](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-cf7-input-fields.webp)

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

![CheckBox/Radio Field section with the Check Box and Radio Button tabs](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-cf7-checkbox-radio.webp)

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

![File/Upload Field section of the Contact Form 7 widget](https://theplusaddons.com/wp-content/uploads/2026/09/formstylers-cf7-file-upload.webp)

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

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

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

## Related Docs

- [How to Customize WPForms in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-wpforms-in-elementor/)- [How to Customize Ninja Forms in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-ninja-forms-in-elementor/)- [How to Customize Gravity Forms in Elementor (NO CSS)](https://theplusaddons.com/docs/customize-gravity-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 customizing Contact Form 7 in Elementor without CSS?**
A: The setup is simple, but it depends on a few pieces being in place: Contact Form 7 must be installed and active, at least one form has to already exist, and Elementor free is enough. The Contact Form 7 widget also ships in the free version of The Plus Addons for Elementor, so Pro is not required. The key point is that the widget styles an existing form, it does not create one.

**Q: Why does the Contact Form 7 widget disappear from Elementor?**
A: That usually happens when Contact Form 7 is deactivated. The widget only appears in Elementor while the form plugin is active, and it also needs the Contact Form 7 toggle switched on under The Plus Addons > Widgets. If either side is off, Elementor will not register the widget. That behavior matters because the widget depends on Contact Form 7’s rendered form markup.

**Q: How do I style Contact Form 7 fields in Elementor without writing CSS?**
A: The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides a Contact Form 7 widget with styling controls inside the Elementor panel. Input fields, text area, submit button, checkboxes, radio buttons, and file upload all have their own Style sections. A useful detail is that single-line fields and the message box are separate controls, so you need to style both if you want a consistent look.

**Q: Why do my Contact Form 7 input boxes look invisible in Elementor?**
A: That is the unstyled state. The widget removes Contact Form 7’s inherited field borders and backgrounds so you can build the design yourself inside Elementor. If you leave it untouched, visitors may see fields with no visible edges. The practical fix is to style at least Input Fields Styling before publishing, either by adding a background or switching Box Border on.

**Q: How do I fix a blank square instead of the checkbox tick?**
A: The tick inside a checked box uses a Font Awesome glyph. If Font Awesome is not loaded on that page, it can render as an empty square. A simple workaround is to place any Elementor icon widget on the same page, which loads the font and fixes it. This only affects the drawn checkbox style used by the widget.

**Q: What are the main limitations when customizing Contact Form 7 this way?**
A: The biggest limitation is that the widget only styles what Contact Form 7 renders. Markup added by a third-party Contact Form 7 add-on is not covered. Another gotcha is that Border Style, Border Width, and Border Color do nothing until Box Border is switched on. Also, choice fields and file buttons are redrawn by the widget so they look consistent across browsers.