Contact Form 7 Styles – How to Customize Contact Form 7

Contact Form 7 Styles. Everybody love contact Form 7 because of functionality, only thing missing is Style.

Whenever you search the term “Contact form for WordPress” you get a few results and forms you can use. But if you ask me, there is one functional, but not Beautiful ( Contact Form 7) and other nice looking forms but not so functional like  Contact form 7.

In this post I will show you how you can make functional Contact form 7 Beautiful on your WordPress website.

Let’s get to it. I will use Generatepress Theme and ColorMag Theme on new WordPress website I love Generatepress theme because is’t one of the Fastest themes for WordPress blog or website. ColorMag theme is also free and a lot of WordPress websites are using this theme. They both have great FREE versions of theme so you can try it. Now I only have to install Contact Form 7 on our themes.

How to install Contact Form 7 on WordPress?

It’s simple, like you would install any other Plugin in WordPress. Navigate to Plugins in WordPress Dashboard, click Add New, in the search bar type Contact Form 7, and Install and Activate.

Now you have new tab in your WordPress Admin Dashboard, called “Contact” with envelope icon.

How to create and integrate new Contact form on WordPress website page?

Now we have to create new contact form and publish it (put it on live page) on our website.

Hover over new contact tab, click on add new. This plugin now gives you default contact form fields that you can just save, before saving this default Contact Form 7 you have to type name.



How to customize Default Contact Form 7 Styles?

By customizing I mean add new fields and setup Mail for this form. We are not going to set Mailing options and settings in CF7 in this post because, it’s another topic, this is just for styling.

Add new fields in Contact Form 7

First let’s add some new fields to our contact form. By default we get this 4 labels:

<label> Your Name (required)
 [text* your-name] </label>

<label> Your Email (required)
 [email* your-email] </label>

<label> Subject
 [text your-subject] </label>

<label> Your Message
 [textarea your-message] </label>

[submit "Send"]

If you want to add new field click at the end of closing label tag (“</lavel>”), then press “Enter” twice.

You should see this:

Add-new-field-in-contsct-form-7-how-to-style-contact-form-7-in-wordpress

We are going to add URL filed so, if you want to add this field click on “URL” in this fields bar.

New window will pop up, Fill up fields like on image below.

Add-new-URL-field-in-contsct-form-7-how-to-style-contact-form-7-in-wordpress

Click Insert Tag.

Now we have to add “label” tags for our new field and you should do it like this.

<label> Your Name (required)
 [text* your-name] </label>

<label> Your Email (required)
 [email* your-email] </label>

<label> Your Email
[url YourWebsite class:url-field placeholder "http://"] </label>

<label> Subject
 [text your-subject] </label>

<label> Your Message
 [textarea your-message] </label>

[submit "Send"]

Press Save button on the right side of our screen, you’ll see code snippet below our new form Name. Copy this code and go to Pages Tab in Admin dashboard, then past this code on page you want your contact form to appear.

Here is how Contact Form 7 Styles look by default on my example themes.

GeneratePress Theme:

Basic-Contact-Form-7-How to style contact form 7 like a pro

ColorMag Theme:

customize-default-contact-form-7-how-to-style-contact-form-7-in-wordpress

It’s nice looking contact form but it’s not the best looking form. That’s why we are going to style it.

Here is how it looks with our new URL field on ColorMag theme.

customize-default-contact-form-7-add-new-url-field-how-to-style-contact-form-7-in-wordpress

First thing I don’t like is Width of this first three fields. I love when I see all fields with the same width.



Where I Can Customize Contact Form 7 Styles?

Almost every WordPress theme by default have Additional CSS option in your Customize Window. Go to your WordPress Dashboard >> Appearance >> Customize, on left side you have your General Theme Options. At the bottom you should see Additional CSS. Click on it and delete everything from it.

HOW TO CHANGE CONTACT FORM FIELD WIDTH?

Copy and past this short code to change width or your Contact form 7 fields.

For GeneratePress I’m using Elementor Page builder so I can specify with of the page in my page builder. For example: I will set my contact form fields to be 100%, but I will specify Page with in Elementor to be 700px, so my contact form will be 700px.

In ColorMag we have sidebar on contact form page, so my Form with of 100% will just fill the space of content side of page. Also ColorMag theme have specified HTML tags for form fields (text, email, textarea) in their style.css to be 100%.

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
width: 100% !important;
}

After you past it you should see live result in your WordPress Customization Window.

CHANGE CONTACT FORM 7 BACKGROUND COLOR

Next thing you might want to do is change fields background color. Copy and past this code

background-color: #f2f2f2 !important;

below width: 100% !important;  and remember to stay inside { } Your code should look like this:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
width: 100% !important;
background-color: #f2f2f2 !important;
}

For CSS colors you can use Hex Color Code. Just google “Hex Color Picker” and pick perfect color for fields background.

CONTACT FORM 7 BORDER

Now we have this border color witch I don’t like. If you like it, you can leave it like it is, or if you want to remove it

Copy and past this code below “background color” just remember to stay inside { }

border: none !important;

If you want to change color you should use this code:

border-style: solid;
border-color: #444696 !important;

Now you just need to find your border color hex code and change mine (#444696).

To change thickness or your border add this to below this code

border-width: 2px !important;

Now change this “2” with number you want.

CONTACT FORM 7 TEXT STYLE

I decided to remove border from my form and we are now going to make some changes to text that goes to this fields.

Here is what we are going to do now:

  • Set Font Size
  • Font Color
  • Padding for the fields because we want them to look more elegant.

To do this simply add this piece of code:

font-size: 18px;
color: #000 !important;
padding: 14px !important;

Now, depending on type of your fields background color use your Font color by changing this “#000”. Just play with it a little bit and you’ll get it.

Now go outside { } and press enter on your keyboard we are now going to style new object

CUSTOMIZE CONTACT FORM 7 BUTTON

I’ll not go in more details about CSS basics. You can now add this code below }

.wpcf7-submit {
color: #fff !important;
width: 40% !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 18px;
font-weight: 400;
border-radius: 50px;
padding: 6px 20px;
line-height: 1.7em;
border: 2px solid;
}

I have rounded button in my form if you want button with no radius simply delete this row border-radius: 50px;



HOW TO CENTER CONTACT FORM 7 BUTTON

If you want to have your contact form Submit button centered add this code below }

.wpcf7-submit {
 display: block;
 margin: 0 auto;

HOW TO CHANGE COLOR OF CONTACT FORM 7 BUTTON

All you need to do is add this code and replace this Hex Code Value with your color

.wpcf7-submit {
background-color: #0063dd !important;
}

Now we have to make our button color on hoover change it you want

CONTACT FORM 7 BUTTON HOOVER COLOR CHANGE

Add this code for hoover color in your Contact form 7

.wpcf7-form input[type="submit"]:hover {
background: #000 !important;
color: #fff !important;
}

And here it is. All you need to know to be able to customize most functional contact form for WordPress.

You can also find button styles for your contact form there on our website:

10 Beautiful HTML CSS button styles

Here is two examples one is from test and other is from our website.

If you want to setup and customize Contact Form 7 on your website you can contact us on our Contact Us page.

Contact-Form-7-Test-Style

 

Contact-Form-7-Digitalbalkan.com

Share on
previous post
42 Replies to “Contact Form 7 Styles – How to Customize Contact Form 7”
  1. Hello,

    I just wanted to check if you’d recieved my last message regarding Uparoo.co.uk and getting 24×7 Live Chat Agents on your website?

    It’s great getting people to your website but if that visitor cant find the answer; instead of them leaving, we bridge that gap and can convert or generate a lead.

    If you’d like any more information on the benefits or to start our free trial please let me know.

    Many Thanks
    Jake Connolly

  2. Hello,

    I just wanted to check if you’d recieved my last message regarding Uparoo.co.uk and getting 24×7 Live Chat Agents on your website?

    It’s great getting people to your website but if that visitor cant find the answer; instead of them leaving, we bridge that gap and can convert or generate a lead.

    If you’d like any more information on the benefits or to start our free trial please let me know.

    Many Thanks
    Jake Connolly

  3. Hi,

    I’ve just been on your website digitalbalkan.com and think there’s a great opportunity for us to work together.

    I work for Uparoo.co.uk were based in the UK and offer 24×7 Live Chat Agents (Live chat answering) for your website. We act as an online “front desk” for your website where our role is to greet your website visitors, engage them in conversation, and then convert them into a lead.

    We offer a 14-day trial and it’s a really cost-effective solution to increasing leads / sales and customer support on your behalf.

    If you’d like any more information please ping me an email or you can visit our website at uparoo.co.uk

    I hope to hear back from you soon.

    Many Thanks
    Jake

  4. Hi,

    I’ve just been on your website digitalbalkan.com and think there’s a great opportunity for us to work together.

    I work for Uparoo.co.uk were based in the UK and offer 24×7 Live Chat Agents (Live chat answering) for your website. We act as an online “front desk” for your website where our role is to greet your website visitors, engage them in conversation, and then convert them into a lead.

    We offer a 14-day trial and it’s a really cost-effective solution to increasing leads / sales and customer support on your behalf.

    If you’d like any more information please ping me an email or you can visit our website at uparoo.co.uk

    I hope to hear back from you soon.

    Many Thanks
    Jake

  5. i like to ask something.Waiting for your reply.
    Thank you

  6. i like to ask something.Waiting for your reply.
    Thank you

  7. Hello,
    I recently came across digitalbalkan.com while I was trying tro help a client. I noticed that you had some critical mistakes with your website that is costing you money because your competitors have it and you don’t.

    Instead of writing about it, I created a personal video about it. In the video I also take a look at those competitors.

    Reply back if you want to see the video.

    Cheers,
    Bolton Young

  8. Hello,
    I recently came across digitalbalkan.com while I was trying tro help a client. I noticed that you had some critical mistakes with your website that is costing you money because your competitors have it and you don’t.

    Instead of writing about it, I created a personal video about it. In the video I also take a look at those competitors.

    Reply back if you want to see the video.

    Cheers,
    Bolton Young

  9. Hey,

    I was doing some research for a client with one of my tools and came across your website, digitalbalkan.com . I saw some major inconsistencies that need to be fixed that are preventing the website from showing up higher in the search engines.

    I know you probably get similar messages all the time so I apologize in advance, but my message is actually real! I just wanted to reach out to you and give you the heads up since this is what I do for a liiving.

    I’d like to speak to you on the phone sometime this week, when is a good time to get on a call?

    Thanks for your time,
    Ryan Thomspon

  10. Hey,

    I was doing some research for a client with one of my tools and came across your website, digitalbalkan.com . I saw some major inconsistencies that need to be fixed that are preventing the website from showing up higher in the search engines.

    I know you probably get similar messages all the time so I apologize in advance, but my message is actually real! I just wanted to reach out to you and give you the heads up since this is what I do for a liiving.

    I’d like to speak to you on the phone sometime this week, when is a good time to get on a call?

    Thanks for your time,
    Ryan Thomspon

  11. Hello,

    I was doing some research for a client in one of my tools and came across your website, digitalbalkan.com . I saw some major inconsistencies that need to be fixed: they’re preventing the website from shoing up higher in the search engines.

    I know you probably get similar messages all the time so I apologize in advance, but my message is actually real! I just wanted to reach out to you and give you the heads up since this is what I do for a liiving.

    I’d like to speak to you on the phone sometime this week, when is a good time to get on a call?

    Thanks for your time,
    Blake Boyles

  12. Hello,

    I was doing some research for a client in one of my tools and came across your website, digitalbalkan.com . I saw some major inconsistencies that need to be fixed: they’re preventing the website from shoing up higher in the search engines.

    I know you probably get similar messages all the time so I apologize in advance, but my message is actually real! I just wanted to reach out to you and give you the heads up since this is what I do for a liiving.

    I’d like to speak to you on the phone sometime this week, when is a good time to get on a call?

    Thanks for your time,
    Blake Boyles

  13. Hello! You can use our professional web design services to improve your online business and website conversions. 8+ years of successful work, reasonable pricing. Please, confirm the request to find out more.

  14. Hello! You can use our professional web design services to improve your online business and website conversions. 8+ years of successful work, reasonable pricing. Please, confirm the request to find out more.

  15. Hello! May be you need help in website development? We can help you. We are web development team with 8+ years of experience. Our portfolio has projects starting from simple one-pagers to complex e-commerce solutions with an intricate back-end logic. Please, confirm the request to find out more.

  16. Hello! May be you need help in website development? We can help you. We are web development team with 8+ years of experience. Our portfolio has projects starting from simple one-pagers to complex e-commerce solutions with an intricate back-end logic. Please, confirm the request to find out more.

  17. Hello. Please, consider using our professional SEO services to bring traffic and conversions to your website:
    – SEO audit
    – Keyword Research
    – Creating content specifications
    – On-page SEO
    – Link building campaign
    We have 5+ years of experience and more than 30+successful projects behind our back.
    If you are interested in using one or more our services, or full complex, please, confirm the request to find out more.

  18. Hello. Please, consider using our professional SEO services to bring traffic and conversions to your website:
    – SEO audit
    – Keyword Research
    – Creating content specifications
    – On-page SEO
    – Link building campaign
    We have 5+ years of experience and more than 30+successful projects behind our back.
    If you are interested in using one or more our services, or full complex, please, confirm the request to find out more.

  19. Spot on with this write-up, I really suppose this web site wants way more consideration. I’ll most likely be again to read much more, thanks for that info.

  20. Spot on with this write-up, I really suppose this web site wants way more consideration. I’ll most likely be again to read much more, thanks for that info.

  21. It’s arduous to seek out knowledgeable people on this subject, but you sound like you recognize what you’re talking about! Thanks

  22. It’s arduous to seek out knowledgeable people on this subject, but you sound like you recognize what you’re talking about! Thanks

  23. It’s not my first time to pay a quick visit this
    web page, i am visiting this site dailly and obtain nice facts from here all the time.

  24. It’s not my first time to pay a quick visit this
    web page, i am visiting this site dailly and obtain nice facts from here all the time.

  25. Fantastic post however I was wondering if you could write a litte more on this topic? I’d be very thankful if you could elaborate a little bit further. Thank you!

  26. Fantastic post however I was wondering if you could write a litte more on this topic? I’d be very thankful if you could elaborate a little bit further. Thank you!

  27. I use contact form 7 widget on the contacts page of my website iand it s always worked well. Today I checked and noticed that if I wrote a message, the text color was white as the background, making it impossible to read. I tried to change the font color but the change applied to the labels text which are supposed to remain white. The strange thing is that the white fonts only occur in the message field, while name, email and the other fields are still readable when I type in the field. I temporarily tweaked it editing the contact form script writing “text area” and instead of “textarea”, but it resized the message field. Can someone help me telling me what I did wrong, or should I just use another firm plugin? / here’s the page in case someone wants to take a look www,argenteriafala,com/it/contatti/

    • Hi, thanks for visiting our website. Here is what you should do i order to fix that problem.
      Go to your WordPress dashboard, under “Appearance” tab choose “Customize”, Then find option “Custom CSS”.
      Then you find Custom CSS put this code inside and Save. Tell me if it worked.

      textarea {
      color: #767676;
      }

  28. I use contact form 7 widget on the contacts page of my website iand it s always worked well. Today I checked and noticed that if I wrote a message, the text color was white as the background, making it impossible to read. I tried to change the font color but the change applied to the labels text which are supposed to remain white. The strange thing is that the white fonts only occur in the message field, while name, email and the other fields are still readable when I type in the field. I temporarily tweaked it editing the contact form script writing “text area” and instead of “textarea”, but it resized the message field. Can someone help me telling me what I did wrong, or should I just use another firm plugin? / here’s the page in case someone wants to take a look www,argenteriafala,com/it/contatti/

    • Hi, thanks for visiting our website. Here is what you should do i order to fix that problem.
      Go to your WordPress dashboard, under “Appearance” tab choose “Customize”, Then find option “Custom CSS”.
      Then you find Custom CSS put this code inside and Save. Tell me if it worked.

      textarea {
      color: #767676;
      }

  29. you’ve got a fantastic weblog right here! would you wish to make some invite posts on my blog?

  30. you’ve got a fantastic weblog right here! would you wish to make some invite posts on my blog?

  31. I like what you guys are up also. Such intelligent work and reporting! Keep up the superb works guys I have incorporated you guys to my blogroll. I think it’ll improve the value of my web site

  32. I like what you guys are up also. Such intelligent work and reporting! Keep up the superb works guys I have incorporated you guys to my blogroll. I think it’ll improve the value of my web site

  33. Hey! Someone in my Facebook group shared this website with us so I came to look it over. I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers! Wonderful blog and fantastic style and design.

  34. Hey! Someone in my Facebook group shared this website with us so I came to look it over. I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers! Wonderful blog and fantastic style and design.

    Leave a Reply