How to Change a WordPress Contact Form Style

Want to change your WordPress contact form style? Then this guide is for you! You’ll learn how WordPress form styling can be super easy! Find out more.

How to Change a WordPress Contact Form Style

Approximate read time: 6 minutes

You only have one chance to make a first impression.

And getting your visitors’ attention with a beautiful form is a way to make an excellent impression.

It’s also the perfect way to get them to fill out your form. After all, how can they fill it out if they don’t see it?

So, if you’re ready to go from basic to beautiful with your forms, this guide is for you.

We’ll show you two ways to easily change your WordPress contact form style!

Let’s get into it.

How to change your WordPress contact form style

As we mentioned, there are two ways to customize your form’s style

Which one you choose will depend on your comfort level with coding. But we’ll show you both methods, so you know all the available options.

Method 1: Edit your form’s code in WordPress

So, you want to dive headfirst into the coding waters, huh?

We assume you already have a form built and want to customize it. If you don’t have a form, head over to our guide on creating a form to get yourself started.

Step 1: Get the ID or class of your form

To start, you need to get the ID or Class of your form.

An easy way to do this is by heading to your website, right-clicking on your form, and clicking Inspect. Here, we’ll see the form HTML template within your child theme.

Inspect button

The Google’s Developer Tools sidebar will slide out, and you can view the different code sections for your form.

The most important thing is to find the area you want to customize and keep track of the ID or Class name. You’ll use this to make changes.

For example, if we wanted to change the background color of our Contact Us form template, we’d find the outermost piece of code. In this case, it’s a div withthe class api-form-box.

Google's Developer Console

We can even test what it’d look like from this console.

If we right-click the div and click Add Attribute, we can add a background color style.

Example CSS code

Hit Enter, and the changes are immediately shown in the window.

Contact form with black background

But don’t worry. Whenever you refresh the page, the form will go back to normal.

Next, head into your WordPress admin to make the necessary CSS code changes.

Step 2: Change the CSS in your WordPress admin panel

Now that you’ve taken note of a few things you want to change on our form, head to your WordPress admin to start.

Next, in your WordPress sidebar, choose Appearance → Customize → Additional CSS to style the form.

Customize settings in WordPress

Here is where you can enter the CSS classes for your form.

For example, we decided to change a few things on our form, so here is the code we entered:

Custom CSS classes

To tag a Class, you must include a . before the class name. For an ID, you put a #.

However, if you’re using this method, we recommend learning more about CSS rules to understand your changes better.

For our example, it’d break down like this:

  • .api-form-box is changing the background color to light blue
  • .frm-button-submit is changing the submit button background to yellow and the text to black
  • .frm-submit is centering the button in the form

With these changes, our form would look like this:

Example form with CSS

From here, your power is unlimited. You can customize your form however you like if you learn how to use CSS.

There are some disadvantages to this method, though. 

An update could break your form’s design and cause you to do it again. Not to mention it’s time-consuming. If you have multiple contact forms, you’ll have to edit the HTML code and add custom CSS to each one.

But if you want something more straightforward and unbreakable, we recommend checking out the following method 👀.

Method 2: Use a form builder with a visual styler

Coding is a skill that takes time to learn.

And many people don’t have the time to learn. If that’s you, a form builder is your best option.

And one we recommend is Formidable Forms.

Formidable Forms banner

It’s WordPress’s most advanced form builder WordPress plugin, meaning form building is simple and time-saving, which is more time to dedicate to other areas of your website.

No matter the type of form on your website, Formidable can handle it all quickly.

No coding, no hassle — just easy form building.

There are other form builders to choose from (WPForms, Gravity Forms, and more), but they don’t offer the styling abilities that come with Formidable. And that means you get more power over how your form looks.

We recommend checking out Formidable’s premium plans as well. 

While they’re not required to style your form, you get many great features:

So, once you get Formidable installed and activated, you’ll be ready to start.

 Get Formidable Forms now!

It’s just three simple steps to style your form and make it live on your site:

  1. Create a form
  2. Style the form
  3. Display the form

Step 1: Create a form

To style a form, you need a form to style, right?

So, head to your WordPress admin and go to Formidable → Forms → Add New.

You can choose one of our many pre-built templates (premium feature) or a Blank Form to get started.

Next, give your form a name and click Create.

The plugin will take you to its drag-and-drop builder, where you can easily edit your form.

Formidable Forms drag and drop builder

Add any form fields you’d like, customize the field labels, change the input type, and more from the sidebar menu.

If you’re creating a contact form, it’s best to add the following:

  • Text field for the visitor’s name
  • Email for a way to contact them
  • Paragraph for a message they want to add

Once your contact form is set up, click Update to save your changes.

Then, we’ll head to the Style tab.

Formidable Style tab

Step 2: Style the form

Under the Style tab, you’ll see a few options.

You can choose one of our pre-made design templates to save you time (premium) or start designing your own.

To design your own, click the three dots next to Formidable Style and click Edit. The Formidable Style is the default style in Formidable.

Formidable Design Template

This will take you to our Formidable Style designer, where you can customize your form.

You can change the size and color of your labels, input fields, font size, and background color, and even upload a background image!

For example, for a test website called Cheap n’ Cheesy, we designed a form that reflects the business:

Example Formidable Forms form

The possibilities are endless for you and your contact form!

So, click Update to save your changes once you customize your form.

Now we just have to get it displayed!

Step 3: Display the form

Displaying your form is even easier than creating it.

First, head to the post or page where you want to show your form and add a new WordPress block.

Next, search for the Formidable Forms block, add it and choose your form from the dropdown menu.

Formidable WordPress block

Last, update your post or page, and your form will be live on your page!

We told you it was easy, as with everything with Formidable.

 Get Formidable Forms now!

Ready to style WordPress contact forms on your site?

Having the ability to style contact forms is something you need, not want.

You may see searches for the Contact Form 7 plugin involving their customization. Things like Contact Form 7 CSS, input type text in WPCF7, or input type email with WPCF7.

None of that is necessary with these two methods. And this post taught you how to customize a contact form in WordPress, so your form looks how you want. Whether you enter custom HTML, CSS, and more, or go with Formidable Forms. You won’t be disappointed.

So, don’t wait any longer. Grab Formidable Forms and get started designing your forms!

And follow us on YouTube for more great form tips and tricks!

Read more from the Formidable blog

This content was originally published here.