---
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-04-12
author: "Aditya Sharma"
description: "As a website owner, you understand how important it is to collect contact information from your visitors. Having a contact form is one of the most effective ways to do..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-Customize-Contact-Form-7-in-Elementor-NO-CSS-1024x536.jpg
word_count: 1055
---

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

## Key Takeaways

- The Plus Addons for Elementor includes a Contact Form 7 widget that allows styling without CSS.
- Users can style input fields, text areas, checkboxes, radio buttons, and submit buttons from the Style tab.
- The widget provides options to customize typography, color, background, and margins for form elements.
- The Plus Addons for Elementor simplifies the styling of the File Upload Button with preset styles and customization options.

As a website owner, you understand how important it is to collect contact information from your visitors. Having a contact form is one of the most effective ways to do this, and Contact Form 7 is one of the most popular contact form plugins available. 

But do you know how to customize Contact Form 7 in Elementor? 

By customizing your contact form, you can make it look and feel more professional and ensure it fits with the overall design of your website.

Here we will show you how easily you can style the Contact Form 7 in Elementor using The Plus Addons for Elementor Contact Form 7 widget without using any CSS. 

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

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

## Required Setup

- [Contact Form 7 Plugin](https://wordpress.org/plugins/contact-form-7/) installed and activated.

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- Make sure the Contact Form 7 widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Contact Form 7 and activate.

## How to Activate and use the Contact Form 7 Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2023/02/contact-form-7-activation-1024x363.png)

Once the widget is activated, make sure you have created at least one form in the Contact Form 7 plugin.

Now add the Contact 7 widget on the page and go to **Content** > **Select Form** and choose your form from the dropdown list.

Now you will be able to see the contact form on the page with a preset style.

You can set the overall alignment of the form from **Alignment**.

From the **Outer Section Styling** dropdown under the Extra Options tab, you can choose a styling option for the outer sections of the form.

## Key features

- **Easily style input fields**: You can easily style the form input fields like text, email, URL, number, telephone etc. from one section.

- **Style Textarea**: Easily style the text area of your form.

- **Checkbox/Radio button styling**: Add a beautiful style to checkboxes and radio buttons.

- **Style File Upload button**: Easily style the tricky file upload button.

- **Outer styling**: You can style the form outer section rows.

- **Style the Submit button**: Easily style the submit button to match your website design.

- **Style form messages**: You can even style the various form messages like form error messages, success messages or validation messages.

## Styling Input Fields of Contact Form 7 in Elementor

Contact Form 7 is one of the most popular contact form plugins in WordPress because it has minimum settings and is very easy to use. But the downside of this it has no styling options.

So styling the Contact Form 7 elements like the Input Fields can be difficult for non-technical users.

But with The Plus Addons for Elementor Contact Form 7 widget, you can easily style the various Input Fields like text, email, URL, number, telephone etc.

To style, the Contact Form 7 Input Fields, go to the **Style** tab **Input Fields Styling**.

From here, you can style everything related to the Input Fields like typography, colour, background, border, padding, margin, placeholder colour etc.

![contact form7 input styling](https://theplusaddons.com/wp-content/uploads/2023/02/contact-form7-input-styling.png)

## Styling Textarea of Contact Form 7 in Elementor

When it comes to styling the Text area, often called the message box in Contact Form 7, it has different properties compared to the Input Fields.

That is why you will find a different section in The Plus Addons for Elementor Contact Form 7 widget for the text areas.

So in order to style the Textarea go to the **TextArea (Message) Field** in the **Style** tab.

Similar to the Input Fields, you will find all the styling options for the Textareas like typography, colour, background etc.

## Styling Submit Button of Contact Form 7 in Elementor

By default, the Contact Form 7 Submit button uses your current theme colours. But what if you want to customize the Submit button colours?

There are no settings within Contact Form 7 to change the style of the Submit Button, you have to use custom CSS for that.

But The Plus Addons for Elementor Contact Form 7 widget makes this process extremely easy, even for a non-technical person.

To style, the Submit Button of Contact Form 7, go to the** Submit/Send Button** in the **Style** tab.

From here, you can customize the Submit Button any way you want, like setting a custom width, padding, margin, typography, colour, background, border etc.

## Styling Radio Button or Checkbox of Contact Form 7 in Elementor

The default Radio button and Checkbox style are defined by the browser itself, so the look varies from browser to browser.

For a better UI, you should have uniform styles for your checkboxes and radio buttons in forms.

But styling a checkbox or radio button is not very easy even with the knowledge of CSS, it requires advanced CSS knowledge.

The Plus Addons for Elementor Contact Form 7 widget makes this task easier for you, as it applies a unique style to the Checkbox and Radio buttons of the Contact Form 7.

From the **Style** tab, you can easily adjust some of its stylings.

Go to **Checkbox/Radio Field**, and from here, you can set the style for Checkboxes and Radio buttons individually.

You can manage things like typography, checked colour, unchecked colour, checked background colour, unchecked background colour etc.

![contact form7 checkbox style](https://theplusaddons.com/wp-content/uploads/2023/02/contact-form7-checkbox-style.png)

## Styling File Upload Button of Contact Form 7 in Elementor

Are you using the File Upload Button in your Contact Form 7?

File Upload Buttons are one of those tricky form elements that are difficult to style and customize according to the rest of the form. So if you want to style your Contact Form 7 File Upload Button it can be a tedious task.

But not so if you are using The Plus Addons for Elementor Contact Form 7 widget to style your Contact Form 7.

To make things easy for you, the Contact Form 7 widget adds a beautiful style out of the box to the boring File Upload Button.

Then from the **Style** tab, you can further customize some of its stylings.

From the **File/Upload Field** section, you can manage the field height, typography, colour, background, icon colour, alignment etc.

![contact form7 file upload style](https://theplusaddons.com/wp-content/uploads/2023/02/contact-form7-file-upload-style.png)

Also, check [How to Customize WPForms in Elementor](https://theplusaddons.com/docs//customize-wpforms-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if the Contact Form 7 widget is not showing up in Elementor?**
A: If the Contact Form 7 widget is not appearing, first ensure that both the Contact Form 7 plugin and The Plus Addons for Elementor plugin are installed and activated. Then, check that the widget is activated by going to The Plus Addons u2192 Widgets and searching for Contact Form 7. If itu2019s not toggled on, enable it to make the widget available.

**Q: Can I customize the styling of the Submit button in Contact Form 7 using Elementor?**
A: The Plus Addons for Elementor allows you to easily customize the Submit button of Contact Form 7 without needing CSS. You can adjust properties like width, padding, margin, typography, color, background, and border from the Submit/Send Button section in the Style tab. This flexibility helps ensure the button matches your website's design.

**Q: What are the key features of the Contact Form 7 widget in The Plus Addons for Elementor?**
A: Key features include easy styling for input fields, text areas, checkboxes, radio buttons, and file upload buttons. You can manage typography, colors, backgrounds, and more from a centralized styling section. This makes it user-friendly for non-technical users who want to create visually appealing forms.

**Q: How can I style the input fields in Contact Form 7 using The Plus Addons for Elementor?**
A: To style input fields, navigate to the Style tab and select Input Fields Styling. Here, you can customize typography, color, background, border, padding, margin, and placeholder color. This feature is particularly useful because Contact Form 7 lacks built-in styling options, making The Plus Addons for Elementor a valuable tool.

**Q: What is the best way to style the Textarea field in Contact Form 7 using Elementor?**
A: To style the Textarea field, go to the Style tab and select the TextArea (Message) Field section. You can adjust typography, color, and background specifically for the Textarea, which is essential since it has different properties compared to input fields. This targeted styling helps maintain a cohesive design across your form.