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.
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?
Get Better Forms FREE!
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
- Edit your form’s code in WordPress
- Use a form builder with a visual styler
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.
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 with the class api-form-box.
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.
Hit Enter, and the changes are immediately shown in the window.
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.
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:
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:
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.
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:
- Access to form design templates
- Ability to customize your background image
- More form templates to get your form started quicker
- And much more
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:
- Create a form
- Style the form
- 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.
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.
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.
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:
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.
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!
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 Facebook, Twitter, and YouTube for more great form tips and tricks!
Read more from the Formidable blog
How To Use WordPress to Send Emails to Multiple AddressesRead More
Form vs Survey [What's the Difference Between Them?]Read More
How To Create a WordPress Custom Search Form [6 Steps!]Read More
Did you know that Formidable Forms is one of the fastest WordPress form builder plugins available today? If you're not already using it, get started with our free pluginor the full-featuredpro version!
