How to Style Contact Forms in WordPress (No CSS!)

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 🎨

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.

Looking for a way to adjust the vertical spacing between your fields? See this guide on modifying spacing between fields.

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

WPForms home

 

Need some help with this step? Check out this guide for beginners on how to install a WordPress plugin.

The next step depends on which version of WPForms you’re running.

  • For new users installing WPForms 1.8.1 and later, skip to step 3.
  • If you installed WPForms prior to the 1.8.1 release, you’ll need to enable modern markup. Simply continue on below to see how.

Are you an Elementor user? WPForms supports no-code form styles for Elementor. This allows even more powerful style customizations for your form.

2. Enable Modern Markup

If you had at least one form on your website before updating to WPForms 1.8.1, you must enable modern markup.

To do that, navigate to the General tab in the WPForms settings menu.

Navigating to the General settings tab in WPForms

On that page, check the box to Use Modern Markup.

Enable Modern Markup in WPForms

Don’t forget to save your settings once you’ve completed this step.

3. Create Your Form

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

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

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

Need a little guidance? No sweat. We have a doc to teach you how to create your first form.

4. Embed Your Form

When you’re finished creating your form, it’s time to embed it on your site. You have to complete this step to access the form styling options.

The easiest way to embed your form is to click the Embed button at the top of the form builder.

Embed your form with the embed button

A modal popup window will open, asking you to select the page where you want to embed the form. You can select an existing page or create a new one.

Select your option for embedding your form

If you click the Select Existing Page button, you’ll get a dropdown where you can select from your existing pages.

If you select Create a New Page, you’ll have the opportunity to name your new page.

Name your new page

You can also embed your form using a widget or shortcode.

Click on the Let’s Go! button, and the draft page will open with your embedded form in place.

5. Style Your Form

Now it’s time for the fun part: styling your form!

Click on the form in the block editor, and settings for that block will open in the sidebar on the right. This is where you can access all the styling options for your form.

Field styles

If you’re a WPForms Pro user, you’ll notice dozens of themes available. These professionally designed themes make it easy to style your form with pre-defined color schemes, button styles, containers, and background images.

So, if you want to add some extra oomph to your form instantly, just select any theme from the side panel. In the example below, I’m using the Frost theme which is one of my favorites.

WPForms Frost Theme

Get All Form Themes With WPForms Pro 🎨

While every theme uses unique styles for each form element, you can also edit these individual elements yourself without any CSS.

There are 5 main form elements that you can style with simple point-and-click controls:

  • Field styles
  • Label styles
  • Button styles
  • Container styles
  • Background styles.

Available styling options

Let’s look at what each one does and how you can adjust the form style.

Field Styles

Field Styles is where you adjust input field size, border radius, and colors. If you want to make your form match others elsewhere on your site, this is where the look begins to take shape.

This is what the default style settings will look like.

Available field style options

Changes are easy to make with no CSS editing needed. Here’s what these different options mean:

  • Size: Adjusts the overall size of your fields.
  • Border: Controls the border style. Options include Solid, Dashed, or Dotted borders.
  • Border Size: Sets the thickness of your field borders.
  • Border Radius: Allows you to apply rounded corners for a sleek and modern look.

Under these options, you’ll also find settings for Colors. These will let you use a color picker to add colors to different aspects of your fields.

Available field colors

If you want to make sure the form blends seamlessly with your WordPress theme colors, you can choose from those options. The colors you see there will depend on the theme you’re using.

There are also default colors you can select.

The custom color at the top lets you customize your form field colors. You can use the color picker, enter a hex code, and adjust the opacity without editing the CSS.

For instance, you could use the color picker if you wanted to add a custom color to the input field text. If you have the hex code of the color you want to add, you can also directly paste the hex code to get the exact color you want.

Field text color

Once you’ve made your updates, you should see those changes immediately reflected on the form in the block editor. Then it’s time to move on to editing Label Styles.

Label Styles

Labels are the text that appears above a form field. For example, Name or Email Address. Adjust the label styles to control the size and color of labels on your form and create a consistent look across your site.

Default label styles

You can use the Size dropdown to change the label text size. The Sublabel & Hint section lets you choose colors for sublabels and additional hints that appear below the field to prompt specific information.

The Error Message color is for field validation messages that appear if the field receives unexpected input. The same color is used for the asterisk to denote a required field.

As you did in the Form Field section, you can use default colors, theme colors, or use the color selector to choose a custom color for your label styles.

Button Styles

For Button Styles, you get settings similar to Field Styles, with the option to change the size, border, border radius, and color. This allows you to make sure your buttons always stand out and match the other buttons on your site.

Here’s what the default style settings look like for the theme that I’m using (Frost).

Button styles

Note that your button color choices will be used on other form fields like Multiple Choice, Checkboxes, Rating, and NPS surveys.

The theme that I’m using applies a slightly round Border Radius of 8 px. The Border is selected as None, which means the button doesn’t have a border outline.

Container Styles

WPForms also allows you to add a custom-styled container to your form. You’ll find most of the same settings as in the sections above, with the exception of two options that are unique to containers:

  • Padding: Use this to adjust the spacing inside your form container
  • Shadow: Add a shadow effect of a particular size or choose none at all.

Container Styles

The theme I’m using added these default container settings automatically, and since I’m pretty happy with the result, I’ll leave these as-is.

However, feel free to experiment and adjust the container if you’d like to add your own creative touch to this design.

Background Styles

With Background Styles settings, you can add a background image or solid colors to accentuate your form’s attention-grabbing qualities even further.

Background styles

Conveniently, there’s a library of stock photos that our team has carefully curated to complement WordPress forms. You can quickly add an image background to your form by selecting one from the Stock Photos.

Stock photos

And if you’d rather upload your own custom images, you also have that option. You can either upload a new image or select one from your WordPress media library conveniently from the Background Styles options.

To do that, just select Media Library from the Image dropdown and then press Choose Image.

Add custom background image

After that, the WordPress Media Library model will open, where you can upload a new image or choose an existing one like you typically would.

Now, you could be done here. At this point, your form is perfectly styled. But there’s one more feature for form styles that I want to show you.

Access Advanced WPForms Styling Features 🎨

Advanced

Below the field, label, and button styles, there’s another section for Advanced. Don’t let the name fool you; it’s still easy to manage!

Open it, and you’ll see a lot of custom CSS code.

Advanced style settings

As you use the built-in styler for WPForms, this custom CSS code is automatically generated and stored here. If you want to use this exact same form style on multiple forms on your site, copy this CSS code and paste it into the form style advanced settings in each one. Within seconds, your forms match!

If you want to reset your form styles back to default, you can click the Reset Style Settings button.

And if, after all of that simple form styling, you still want to make some additional customizations to your style sheet, there’s still a field for Additional CSS Class(es).

And that is truly it! You’ve styled your form and it was super easy, right? No need to write your own CSS!

Don’t forget to save and test it before you publish it!

Styling Contact Forms – FAQs

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

What styling options are typically available in contact form plugins?

Every contact form plugin offers different levels of customization. In many plugins, the only way to edit your form style is by using custom CSS. More advanced options like WPForms and Formidable Forms offer no-code style customizations that let you edit your field labels, field borders, error and validation messages, and submit button styles.

WPForms even goes the extra mile by letting you customize your form notification emails with custom headers, color schemes, light and dark themes, and several pre-configured notification templates.

Can I preview changes to the contact form before publishing them?

Yes, with WPForms, you have several ways for previewing your form before publishing it. The easiest way is to use the Preview button at the top of the form builder which lets you see how your form would look on a typical page on your site after embedding.

You can also preview your form from the WordPress editor page. If you want to see a preview of your form that also displays any styling changes you’ve made to your field and submit button, using the preview option from the WordPress editor will let you see all these stylistic changes.

Finally, if you’re using Elementor to embed a form built with WPForms, you can use Elementor’s native preview option to see a live preview of your form along with any other elements you’ve added to the page.

How can I ensure that my styled contact form is responsive and mobile-friendly?

WPForms is designed to be responsive and mobile-friendly by default. That means you don’t need to make any extra adjustments to ensure the form you’ve built using WPForms is responsive across all devices.

Can I Style WPForms With Elementor?

Yes, WPForms supports a broad range of form styling options when used with Elementor. Besides, WPForms automatically integrates with Elementor without requiring you to perform any manual steps to sync your forms with Elementor. So if you prefer building pages with Elementor rather than by using the default WordPress editor, you can freely leverage Elementor to style your contact forms that you’ve previously created with WPForms.

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 and streamline replies with AI.

Looking for a way to make your forms more appealing? Check out our tips on creating interactive forms that grab users’ attention.

Create Your WordPress Form Now

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPForms is funded, why it matters, and how you can support us.

Renee DeCoskey

Renee DeCoskey has been blogging since 2001 and using WordPress since 2007. When she's not writing about WordPress plugins, you can find her curled up with a book or having fun in Rotary. Learn More

The Best WordPress Drag and Drop Form Builder Plugin

Easy, Fast, and Secure. Join over 6 million website owners who trust WPForms.

Please enable JavaScript in your browser to complete this form.

25 comments on “How to Style Contact Forms in WordPress (No CSS!)

  1. I’m trying to figure out how to style a form using the Divi module and if that is not possible, what workaround is needed.

    1. Hey Ashley – Currently, the Form Styles can be used with the WordPress Block editor or a theme with Full Site editing. I agree that support for other builders would be great, and the option to apply the styling from the forms would be great. I’ll place this on our feature request tracker so that it’s on the radar of our developers.

      1. Hey Stale – I apologize, we currently don’t have the feature to edit the forms style in Divi. I do agree this would be helpful, and I’ll place this on the radar of our developers.

  2. Is this a premium feature? I don’t see such an option in my install from the WordPress repository. It shouldn’t be this hard to specify the color we want for form inputs. It’s not right to take a basic change option and make it a “premium” feature.

    1. Hey Boreas – This feature is available in our all paid versions including the free one (for the block editor and all Full Site Editor(FSE) themes).

      In case you are missing the option to enable Modern Markup, please know that the users with at least one form on their website before updating the WPForms lite plugin to version 1.8.1.1 will see the modern markup option. Also, this option won’t be visible if you started using WPForms lite from version 1.8.1.1.

      In case it helps, you can learn more about this option from the following tutorial: https://wpforms.com/docs/styling-your-forms/

      If you are still facing any issues with this, please reach out to us at WPForms Lite WordPress.org support forum. Thanks.

  3. Hi! I’ve recently upgraded the plugin to version 1.8.2. And one feature I liked is no more available. before I could write custom HTML code inside the form fields, like in checkbox choice I could add – Tomato Read more → , it didn’t let me do it now

  4. I am using WP Forms Pro on my website. I have the form on two different pages. One on page, the text is in a serif font, on the other page, it’s in a sans serif. I have no idea why, I just built the form and placed it. Any indication as to why?

    I am building with Divi builder.

  5. I don’t see this option on my wpforms lite. I have 1.8.2.2, and there isn’t any option for this. I need to change the colors to the fonts for the whole form. How would I go about doing this in my form?

    1. Hey Larry – This feature is available in our all paid versions including the free one (for the block editor and all Full Site Editor-FSE themes).

      In case you are missing the option to enable Modern Markup, please know that the users with at least one form on their website before updating the WPForms lite plugin to version 1.8.1.1 will see the modern markup option. Also, this option won’t be visible if you started using WPForms lite from version 1.8.1.1.

      In case it helps, you can learn more about this option from the tutorial here

      If you are still facing any issues with this, please reach out to us at WPForms Lite WordPress.org support forum.

      Thanks.

  6. Hi. I’ve created my first form with wpforms. My problem is, that the fonts are different within the same form. Some labels have a sans kind of font, some like a times new roman like, but all the choices are with the sans kind of font. How to set them for the same type? I use the regular wp editor, and when I open the page in the editor, where the form is, I see all the fonts in the same style (times new roman). But on the publicated version becomes different. What could be the problem?

  7. I think it should be noted that unless you add the form as a block, the above options for label, hint, etc. styling do not show. I was using the short code originally. Still this tutorial led me to try something else. Thank you.

    1. Hey Jesse – Under “Style Your Form” and “Field Styles” we’ve mentioned that the Forms style works with WordPress block editor. While the styling feature isn’t available for shortcodes, we’re working to expand the Forms styles, and I’ll add your request to our feature request tracker.

    1. Hey Rodrigo – I apologize, we currently don’t have the feature to edit the forms style in Elementor. I do agree this would be helpful, and I’ll place this on the radar of our developers.

  8. My problem was different fonts in the same form. Some labels have sans font type, some labels like times new roman typeface, but all selections are in sans font type.

  9. I’m trying to edit an embed located in the Footer. UI’m assuming there’s no way to do that? My footer is dark in color, so the text can’t default to black. Is there a way to edit that?

  10. hey can you please tell me that how can i remove border on focus input textbox text area of wpforms?

    i really need the answer please.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.