Contact Form 7 Style – Everything You Need to Know to Stylize Contact Form 7 Like a Pro

Contact Form 7 Style

The wait is over! Now, you can apply more Contact Form 7 styles to make your website forms look more attractive and act more functional.  Many use this popular form builder tool to build easy-to-use forms on their WordPress websites.

But only a few consider stylizing those forms to match their website theme and brand identity. Some remain successful at designing fantastic forms, while others fail since they don’t have the privilege to customize their website forms. 

Nonetheless, following this comprehensive tutorial, you’ll be able to succeed at stylizing forms on your website. In this context, we discuss how to design and style a form built with contact form 7 using only a little CSS and a dedicated plugin.

Hence, let’s get straight into it.

Create a form with Contact Form 7

You can create a simple form with Contact Form 7 in just a few minutes. To create one, make sure you carefully follow all the steps below:

Step 1: Configuring a form with Contact Form 7

You just need to go to the WordPress Admin Dashboard and then navigate to Contact > Add New.

Create a new contact form

Now, give your contact form a name.

Give contact form a name

After that, scroll down to the bottom of this page and click the Save button.

Click the save button of contact form

You’ll notice a shortcode underneath the title field. You need to copy it and save it in the notepad so you can use this code later for insertion.

Copy and save the shortcode

Step 2: Publishing the Form

It’s time to display the contact form. You can show it on a new/existing page, a post, or a text widget content. We’ll insert this shortcode on a new page. So, to accomplish this task, we’ll head to Pages > Add New Page from the WordPress Admin Dashboard.

Create a new page

Afterward, we’ll add a title to that page.

Add a page title

Then, we’ll paste the copied contact form shortcode into a block underneath the title block.

Paste the contact form shortcode into a block on contact page

Lastly, we’ll click the Publish button.

Click the publish button of Contact Us page

View from the frontend

Now, visit the page to see how this newly built form looks. Our one appears like the screenshot below. Your one may look different based on your WordPress theme.

Screenshot of the Contact Us page

As you can see, it looks pretty simple. We’ll give this form a more professional outlook. 

First, we’ll do this by customizing it with custom CSS, and then we’ll use a plugin called Ultimate Addons For Contact Form 7.

Please read all the steps regarding the contact form design in the following sections. Hence, let’s begin with stylization.

Customize Contact Form 7 in WordPress with custom CSS

Before beginning, you need to thoroughly understand HTML and CSS to design a contact form without plugins. That said, in this article, we’ll show you a few Contact Form 7 CSS styling examples.

Let’s get started with Contact Form 7 stylization with custom CSS. First, navigate to Appearance > Customize from the WordPress Admin Dashboard.

Go to Appearance and Customize option from WordPress Admin Dashboard

Then, click the page where you’ve inserted the shortcode of a contact form. We’ve inserted our one on the Contact Us page. So, we’ll click on this page.

Click on the Contact Us page

We click this page to see the changes we make using CSS in real time. We’ll now go to the Additional CSS tab from the left sidebar.

Go to Additional CSS

Then, we’ll see a box to write down CSS code to design the contact form.

Screenshot of Additional CSS box

Before writing down the CSS code, let’s discuss how the contact form works/interacts with different code elements. 

Contact Form 7 yields standard-compliant codes for forms, each with an ID and a Class. Specifically, Contact Form 7 uses the CSS class .wpcf7, which you can select to design a form.

Let’s see how to do this job. We’ll change the background color of the contact form. Hence, we write down the CSS code “div.wpcf7 { background-color: #7FD8BE; }” in the Additional CSS box.

Add background color to the form with CSS

We’ll now add 22px padding to this form to refine and make it look appealing. So, we write “padding:22px;” underneath the background-color code inside the .wpcf7 class.

Add padding to the form with CSS

Finally, we’ll finish stylizing this contact form by adding a border color. We’ll write the border code “border: 2px solid #22715a;” under the padding code.

Add border to the form with CSS

Then, hit the Publish button.

Click the publish button after editing a form with CSS

Now, visit the contact form page and see how it looks. Our one appears like the screenshot below.

Screenshot of the contact form after designing with CSS

So, that’s how you design a contact form using CSS. As you can see, it’s just a basic design. But we’ll dig deeper and apply advanced customization to this form to make it look more professional.

We’ll begin our journey of advanced stylization in the following section. 

Stylize Contact Form 7 with Ultimate Addons For Contact Form 7

Welcome to the section on advanced customization of Contact Form 7. Here are some practical methods to stylize the Contact Form 7 like a pro. Let’s begin. 

Install Ultimate Addons For Contact Form 7

First, install the Ultimate Addons For Contact Form 7 plugin. To do this, navigate to the WordPress Admin Dashboard and head to the Plugins > Add New Plugin.

Add a new plugin

Search with the keyword “Ultimate Addons For Contact Form 7” in the plugin search bar.

Search Ultimate Addons For Contact Form 7 plugin

Click the Install Now button of the Ultimate Addons For Contact Form 7 plugin.

Click the Install Now button of Ultimate Addons For Contact Form 7 plugin

Then, hit the Activate button.

Click the Activate button of Ultimate Addons For Contact Form 7 plugin

You’ll now notice the UACF7 Setup Wizard page.

UACF7 Setup Wizard page

At this stage, slowly scroll down and toggle on all the free features you need.

Enable all the free features of Ultimate Addons For Contact Form 7

Once you’ve enabled all the necessary free features of this plugin, click the Next button.

Click the Next button in Ultimate Addons For Contact Form 7 setup page

At this point, you’ll see the AI Form Generator page.

AI Form Generator page

You can either use the AI Form Generator to build a basic form or click the Back to Dashboard button to visit the WordPress Admin Dashboard

We won’t create a new form. Instead, we’ll return to the admin dashboard and redesign our existing form. 

Click the Back to Dashboard button of Ultimate Addons For Contact Form 7

There you have it! That’s how you install the Ultimate Addons For Contact Form 7 plugin.

Edit color, background, and other features

To design a form with the Ultimate Addons For Contact Form 7, go to the WordPress Admin Dashboard and then navigate to Contact > Contact Forms.

Go to contact forms

Now, hover the mouse pointer over the form you’ve created. You’ll see Edit | Duplicate options appearing out of nowhere. Click on Edit. 

You’ll now visit the form editor.

Screenshot of the Form editor

Afterward, scroll down a little and click the Form Styler tab of the Ultimate Addons For Contact Form 7.

Click the Form Styler tab of Ultimate Addons For Contact Form 7

Now, toggle on the Enable Form Styles feature.

Toggle on the Enable Form Styles feature

Then scroll down, and you’ll notice Label Options, which you can utilize to change the text and background colors of labels.

Screenshot of Label Options in Form Styler

Let’s see how these features work in the animation below.

Edit labels in Form Styler

As you can see in the animation, we’ve changed the background color and edited the font, padding, and margins of the labels. Let’s glance at the end result.

Screenshot of the contact form after editing in Form Styler

See how easily you can design a form with the Ultimate Addons For Contact Form 7. Just to let you know, we’ve just scratched the surface of what this plugin can do. 

You can do a lot more with this plugin. We encourage you to play around with other features on your own and give a form a professional outlook.

Bonus: Advanced stylization with Ultimate Addons For Contact Form 7

We’ve designed a basic-looking form with the Ultimate Addons For Contact Form 7. It’s time to explore some advanced features of this plugin that can help you build eye-catching forms.

Contact Form 7 placeholder styling

Placeholder Styling is one of the excellent features of Ultimate Addons For Contact Form 7. Let’s uncover how you can reap its benefits. 

First, enable this feature if you haven’t enabled it during the installation of this plugin. We assume you didn’t activate the Placeholder Styling feature. Hence, let’s turn it on. 

To do this, navigate to Ultimate Addons > All Addons from the WordPress Admin Dashboard.

Go to all addons of ultimate addons

Then, scroll down to find the Placeholder Styling feature. Once you see it, toggle it on.

Enable the placeholder styling feature

Afterward, go to Contact > Contact Forms from the WordPress Admin Dashboard.

Navigate to contact forms

Click Edit on the contact form you created earlier (you can create a new form, though).

Click the Edit option of a form

Now, remove the text tag from the label field (or tag) of your form. It’s because we’ll insert a new placeholder text tag.

Remove text tag from label field in a contact form

Here’s how this field (label tag) looks empty after removing the text tag. 

Screenshot of name label after removing the text tag

Now, select the text tab to insert a placeholder text tag inside the form.

Click the text tab

You’ll then see a Form-tag Generator: text popup.

Form-tag Generator text popup

Then, checkmark the Required field option (if users must fill out this field), type your text in the Default value field, and finally, checkmark the “Use this text as the placeholder of the field” option.

Complete all the necessary tasks inside the Form-tag Generator text

Now, hit the Insert Tag button.

Click the insert tag button of Form-tag Generator text

At this point, you’ll see a placeholder text tag under the name label inside the form.

Placeholder text tag inside the form

Similarly, you can now follow these exact steps to insert a placeholder for the email field. This means you need to remove the existing email attributes > click the email tab > accomplish all the tasks inside the Form-tag Generator > and hit the Insert Tag button.

After placeholder email tag insertion, the tag should appear like the screenshot below. 

Placeholder email tag inside the form

Right now, you need to scroll down a bit to find the Placeholder Styler tab. Once you find it, select the tab.

Click the placeholder styler tab

After that, activate it by toggling the Enable Placeholder Styling feature.

Then, scroll down a bit, and you’ll see the Color Options, allowing you to change placeholder text and its background colors. We’ll change the text color. So, we click the Select Color option of Color.

Select color in the placeholder styling feature

Afterward, we choose black as our placeholder text color.

Select black as the text color in the placeholder styling feature

Now, scroll down and define the Font Name, Font Size, and other font features if needed.

Define Font Name, style, etc., in placeholder styling feature

Finally, click the Save button.

Click the save button in placeholder styling feature

It’s as simple as that! You can now visit the contact form page to see the result. Here’s how our one looks.

Final outlook of contact form after using placeholder styling feature

The Bottom Line

A professional and beautiful Contact Form 7 style enhances your website’s visual appeal and user experience. Your targeted audiences are likely to effectively engage with your website when they notice attractive website elements.

So, prioritize customizing your website and even stylize every form as per the design theme in mind. You can design each form with CSS or use a plugin like the Ultimate Addons For Contact Form 7 if you don’t have any coding know-how.

Since you’ll benefit from appealing form design, you need to pay close attention to it. 

If you liked this article, don’t forget to share it with your friends so that everyone benefits from it. You can also subscribe to our newsletters to get more exciting articles, tutorials, news, and offers right in your inbox. Thanks!

EID 2024 Celebration Deal!

Get 50% Off + 2X / Double License on Lifetime Plans.

Grab the Deal

Scroll to Top