### [How to Style Contact Forms in WordPress (No CSS!)](https://wpforms.com/how-to-style-contact-forms-in-wordpress/)

**Published:** April 28, 2023
**Author:** Kacie Cooper

**Excerpt:** Matching your contact form style to your WordPress site theme used to involve CSS knowledge and was understandably intimidating. That's no longer the case with WPForms' form styling options. In this post, we'll show you the easiest, fastest way to change your WordPress contact form style.

**Content:**

When small business owners venture into creating their own WordPress forms, the results often end up being plain and uninspiring. This is a pattern that I’ve consistently observed over the years.

Without the expertise of developers and designers, these forms may function well enough but lack the visual appeal that can engage users and drive conversions.

The good thing is that you don’t need coding knowledge or design expertise to create beautiful forms anymore. You just need the right plugin.

In this post, I’ll show you the code-free way of styling your contact forms to make a strong first impression on your visitors.

[Create Your Custom Styled WordPress Form Now 🎨](https://wpforms.com/pricing/)

## How to Style Contact Forms in WordPress

Now that you know our styling tool is the best and easiest styler for WPForms, let’s break it down step by step.

- [1. Install & Activate WPForms](#aioseo-1-install-activate-wpforms)
- [2. Open Your Form in the Builder](#create-form)
- [3. Choose Your Theme](#aioseo-3-choose-your-theme)
- [4. Customize Field Styles](#aioseo-4-customize-field-styles)
- [5. Customize Label Styles](#aioseo-customize-label-styles)
- [6. Customize Button Styles](#aioseo-6-customize-button-styles)
- [7. Customize Container Styles](#aioseo-7-customize-container-styles)
- [8. Customize Background Styles](#aioseo-8-customize-background-styles)
- [10. Save, Preview, and Test](#aioseo-10-save-preview-and-test)

### 1. Install & Activate WPForms

First, you’ll want to install the WPForms plugin if you don’t already have it.

Form styling is available with all versions of WPForms, including WPForms Lite (the [best free form builder](https://wpforms.com/best-free-wordpress-contact-form-plugins/)).

![Navigating to the WPForms homepage](https://wpforms.com/wp-content/uploads/2024/11/WPFormsHomepage-1024x429.png)*Need some help with this step? Check out this guide for beginners on [how to install a WordPress plugin](https://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/).*

Now, let’s make sure you’re all set up with the versions you need:

- WordPress version: 6.0 or higher.
- WPForms 1.9.7.

Are you an Elementor user? WPForms supports[ no-code form styles for Elementor](https://wpforms.com/how-to-elementor-contact-form/). This allows even more powerful style customizations for your form.

### 2. Open Your Form in the Builder

Now it’s time to create your form! To get started, hover your cursor over WPForms in the sidebar of your WordPress admin menu and click on **Add New**.

![Add New](https://wpforms.com/wp-content/uploads/2020/09/add-new.png)After that, it’s time to begin setting up your form, starting with the form name and template selection. There are hundreds of [form templates for marketing](https://wpforms.com/templates/category/marketing/) and various other functions that you can use. You can also create your form completely from scratch if you like.

The Simple Contact Form is one of our most popular templates. It’s also pretty apt for this tutorial, so we’re going to select it by clicking the **Use Template** button.

![Contact form template](https://wpforms.com/wp-content/uploads/2020/04/contact-form-template.png)Once you make your selection, you can build or customize your form using the user-friendly WPForms drag-and-drop builder.

![Simple Contact Form template](https://wpforms.com/wp-content/uploads/2018/07/contact-form-template.png)Need a little guidance? No sweat. We have a doc to teach you [how to create your first form](https://wpforms.com/docs/creating-first-form/).

### 3. Choose Your Theme 

Now you’re ready to style your form’s theme directly within the form builder.

Go to **Settings >> Themes** to access styling controls.

![](https://wpforms.com/wp-content/uploads/2023/12/accessing-form-themes-1-1024x570.png)The left panel shows all style options. The right panel displays a live preview using sample fields.

This is where you’ll choose the theme.

Themes are your shortcut to a great-looking form. They set coordinated colors and styles for fields, labels, buttons, container, and background, all in one click.

And they’re accessible to all users! For those with WPForms Lite, “Classic” and “Modern (Default)” themes are available.

Users with a WPForms license have access to the full theme library, including 15 varying themes.

![](https://wpforms.com/wp-content/uploads/2024/04/lush-1024x896.png)Lush is my favorite!

I checked out all the themes myself and made this descriptive overview for each one:

T**heme Name** L**ook & Feel****Accent Color****Background Color****Notes****Modern** (Default)Clean, contemporaryBlueNoneDefault for all new forms**Classic**MinimalistGrayNoneVery little CSS, great for a bare-bones look**Ocean**Similar to ModernDark TealNoneGreat for cool-toned Brands**Tangerine**Warm, energeticOrangeNoneStands out on neutral sites**Aero**Light and airyBlueLight gray w/ box shadowSlight “card” effect**Concrete**IndustrialPinkConcrete textureRequires downloading background images**Elegance**RefinedMatches imageDecorative imageRounded corners on container**Fresh**Nature-inspiredGreenLeafy image Great for eco/organic brands**Gloom**Dark modeGreenDark backgroundHigh contrast form elements**Hallway**DramaticDark ImageBold, immersive container**Lush**TexturedBlack Brick wall imageRounded corners and boxed shadow**Monstera**Playful GreenWatercolor imageRounded corners**Range**VibrantGreenSunset imageBorders and box shadows**Spring**Soft gradientBlueGradient imageBox shadow for depth**Vintage**Retro YellowSolid colorWarm, nostalgic feelTake a look at our full document that covers [many of these themes in detail](https://wpforms.com/docs/using-form-themes/).

### 4. Customize Field Styles

Once you’ve settled on a theme, head over to **Field Styles** to adjust:

- **Size:** Small, Medium, Large
- **Border:** Solid, Dashed, Dotted
- **Border size & radius:** Control thickness and corner roundness
- **Colors:** Set background, border, and text. Use theme palette, HEX code, or color picker

![](https://wpforms.com/wp-content/uploads/2023/12/form-themes-field-styles-1024x623.png)These additional touches really lend themselves to the effect and vibe you’re going for with each form. For instance, rounded corners feel friendly, square edges feel formal.

You’ll also find options here to update the **Background**, **Border**, and **Text** colors of your form fields.

Click on the label to open the color picker and make changes. You can either choose a color visually or enter a specific hex code for specific control.

![](https://wpforms.com/wp-content/uploads/2023/12/form-themes-field-styles-colors-1024x339.png)### 5. Customize Label Styles

Labels are the short bits of text above your form fields that tell users what to enter—things like Name, Email Address, or Message. Done well, they make your form easy to follow, helping users avoid confusion and mistakes.

In **Label Styles**, you can change:

**Size:** Small, Medium, or Large text. For example, you might want small labels for a minimalist newsletter form, but large, bold labels for a job application form where clarity matters most.

**Colors:**

- **Label Text**: The main title above each field.
- **Sublabels & Hints**: Helpful instructions, like “First name only” or “We’ll never share your email.”
- **Error Messages**: Text that appears when the user makes a mistake, like “This field is required.” This color also controls the asterisk on required fields

![](https://wpforms.com/wp-content/uploads/2023/12/form-themes-label-styles-1024x686.png)For example, if your site has a dark background, you might set label text to white, sublabels to a soft gray, and error messages to a bright red so they pop immediately when something’s wrong.

### 6. Customize Button Styles

Your submit button is the final “call to action” for your form. It should stand out enough that visitors don’t have to hunt for it.

In **Button Styles**, you can adjust:

- **Size:** Small, Medium, or Large. Large buttons work well on mobile, while medium might suit desktop layouts better.
- **Border Style:** Solid, Dashed, or Dotted—though most modern designs stick with Solid or None for a cleaner look.
- **Border Size & Radius:** Thicker borders and sharper corners feel more formal; thinner borders and rounded corners feel friendlier and more casual.
- **Background and Text Colors:** These set your button’s main look.

![](https://wpforms.com/wp-content/uploads/2023/12/form-themes-button-styles-1024x760.png)💡 **Tip:** The background color here also becomes the **accent color** for the rest of your form, including field focus states, progress bars, and even checkboxes. So if you make your button teal, expect that teal to subtly show up throughout your form for a coordinated look.

### 7. Customize Container Styles

The container is like the “frame” around your form. It separates the form visually from the rest of the page and can help it feel more intentional.

In **Container Styles**, you can change:

- **Padding:** How much space is inside the container around your form fields. More padding gives a clean, spacious feel; less padding creates a compact, space-saving look.
- **Border Style, Size, and Radius:** Match this to your site’s visual tone—square corners and solid borders for a corporate look, rounded corners and subtle borders for a softer feel.
- **Shadow:** Adding a small or medium drop shadow can make your form appear “lifted” off the page. Great for making it stand out on flat backgrounds.
- **Border Color:** Often overlooked, but a colored border can tie your form to your brand palette.

![](https://wpforms.com/wp-content/uploads/2023/12/form-themes-container-styles-1024x642.png)For a photography portfolio site, for instance, you might use a container with generous padding, a thin white border, and a soft drop shadow to create an elegant “card” effect.

### 8. Customize Background Styles

The background is where you can get creative, but also where it’s easy to go overboard. A good background complements the form without making it hard to read. So fight the urge!

Options here include:

- **Image Source:** Upload from your **Media Library** or browse WPForms’ built-in **Stock Photos** (the first time you use stock photos, you’ll download the whole library).
- **Position:** Control where the image sits — Top Center, Center Center, Bottom Right, etc.
- **Repeat:** Choose **No Repeat** for a single image, **Tile** to repeat across the background, or horizontal/vertical repeats for patterns.
- **Size:** **Cover** makes the image fill the container area. **Dimensions** lets you set an exact width and height.
- **Solid Background Color:** A great option if you want something simple or if your image doesn’t load.

![](https://wpforms.com/wp-content/uploads/2023/12/form-themes-background-styles-2-1024x541.png)💡Avoid busy backgrounds that make text hard to read. If you love a busy image, tone it down with a color overlay before uploading.

## 10. Save, Preview, and Test

Once you’ve made your changes, all that’s left to do is save your form. Click on **Save** in the form builder.

Or, usse **Preview** (top right) to see your styles applied to a sample form layout. Then, go to your page in the WordPress editor and preview the actual form with real fields.

Don’t forget, you can also **Test it:**

- Fill out each field to check spacing and alignment.
- Trigger an error message to see if your colors are clear.
- View the form on mobile, tablet, and desktop to confirm it’s responsive.

And that’s it! You can now start styling your contact forms (or any other forms) you have in WordPress, right there in the form builder.

Happy styling!

### Styling Contact Forms – FAQs

Here are a few common questions about styling contact forms in WordPress without code:

#### Will my styles apply everywhere?

Yes. When you style a form in the WPForms builder, those settings are saved with the form itself—not just the page you’re working on.

That means if you embed the same form on multiple pages or posts, it will look consistent everywhere by default. The only exception is if you intentionally override the style in the Block Editor or Elementor during embedding. Those changes apply only to that specific page.

#### Can I style a form template?

Absolutely. Templates in WPForms — like “Simple Contact Form” or “Newsletter Signup” — are just prebuilt sets of fields. As soon as you embed a template-based form, you can choose a theme and adjust its styling exactly the same way you would for a custom-built form

#### Can I delete a custom theme?

Yes, but do it carefully. When you delete a custom theme from the Themes panel in the builder, it’s gone for good.

### Next, Connect Your WordPress Forms to ChatGPT

Curious about how you can automate your workflow when it comes to forms? Find out [how to connect ChatGPT to your WordPress forms](https://wpforms.com/wpforms-chatgpt-how-to-send-ai-generated-notifications/) and streamline replies with AI.

Looking for a way to make your forms more appealing? Check out our [tips on creating interactive forms](https://wpforms.com/tips-to-create-interactive-forms/) that grab users’ attention.

[Create Your WordPress Form Now](https://wpforms.com/pricing/)

Ready to build your form? Get started today with the easiest WordPress form builder plugin. [WPForms Pro](https://wpforms.com/pricing) includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on [Facebook](https://facebook.com/wpforms) and [Twitter](https://twitter.com/easywpforms) for more free WordPress tutorials and guides.

**Categories:** WordPress Tutorials

**Tags:** style, submit button styles

---