How To Edit a Contact Form in WordPress [Two Easy Methods!]

Discover how to edit a contact form in WordPress easily. Follow this detailed guide to customize, optimize, and troubleshoot your contact forms.

Approximate read time: 6.5 minutes

A default WordPress form just looks...blah.

That's why knowing how to edit a contact form in WordPress is so important. Otherwise, a WordPress site gets a contact form that looks out of place and won't convert.

Get a Form Styler Now!

That's why this guide is here. This post will show you how to edit an existing contact form or a new one in WordPress in two ways: with code and without code.

So, let's start the tutorial.

How to change your WordPress contact form style

As I mentioned, there are two ways to edit a contact form:

1. Edit the form's code in WordPress
2. Use a WordPress form builder

Method 1: Edit the form’s code in WordPress

I assume you already have a form built and want some type of form customization.

If not, you must create a form before editing any code. Once that's ready, we'll start.

Step 1: Get the ID or class of your form

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

An easy way to find it is by right-clicking the form and choosing Inspect.

Here, you can see the form HTML within the theme. 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 I wanted to change the background color of our Contact Us form template, I'd find the outermost piece of code. In this case, it’s a div with the class api-form-box.

We can even test what it’d look like from this console. If I right-click the div and click Add Attribute, I can add a background color style.

Hit Enter, and it shows the changes in the window.

But don’t worry. Whenever the page is refreshed, the form returns to normal. Next, head into the WordPress admin to make the necessary CSS code changes.

Step 2: Change the CSS in your WordPress admin panel

In the WordPress sidebar on the left hand side, choose Appearance → Customize → Additional CSS to style the form.

Here is where you can enter the CSS classes for the form. For example, I decided to change a few things on the form, so here is the code I entered on the left side:

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, I recommend learning more about CSS rules to understand your changes better.

For my 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, my form would look like this:

There are some disadvantages to this method, though. 

An update could break the form’s design and require more work, which is time-consuming. If there are 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 the following method.

Method 2: Use a WordPress form builder

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. I recommend is Formidable Forms.

It’s one of the best contact form plugins in WordPress, so building forms is simple and time-saving. That frees up time to dedicate to other areas of your website.

No coding, no hassle — just easy form building.

Formidable's form styler gives you more power over the form's design. Customize fonts, sizes, colors, and more with a few button clicks.

Best of all, it's in the free version! But Formidable Forms Pro has even more great features:

• Access to form design templates
• Ability to customize the background image
• More form templates to get forms started quicker

So, once Formidable is installed and activated, you're ready to start.

 Get Formidable Forms now!

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

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.

Choose one of our many pre-built templates (a premium feature) or a Blank Form. Next, give your form a name and click Create.

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

You can add any form fields from the sidebar menu, customize the field labels, change the input type, and more.

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

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

Once the contact form is set up, click the Save button to save your changes.

Then, we’ll head to the 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 in the top-right of the style box and click Edit. The Formidable Style is the default style in Formidable.

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 WordPress website called Cheap n’ Cheesy, we designed a form that reflects the business:

The possibilities are endless for you and your beautiful contact form! Once you customize your form, click Update to save your changes.

Step 3: Display the form

Displaying your form is even easier than creating it.

First, go to the post or page where you want to display your form and add a new WordPress block. Next, search for the Formidable Forms block, add it, and select your form from the dropdown menu.

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

Get spam protection for any contact form

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

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.

But there are also spam issues. Whether you choose Cloudflare Turnstile or Google reCAPTCHA, one form builder makes adding a contact form easy and protects it from spam.

And that's Formidable Forms.

So, don’t wait any longer. Grab the best form builder plugin now and get started designing your forms!

 Get Formidable Forms now!

And join our community on Facebook, Twitter, and YouTube for great form tips and tricks!

Read more from the Formidable blog

• How To Add Age Restrictions to WordPress Forms [No Code!]
  Read More

  How To Customize a Form in WordPress [The Easy Way!]
  Read More

  How To Add a WordPress Contact Form Phone Number Field
  Read More