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
48 Replies to “Contact Form 7 Styles – How to Customize Contact Form 7”
  1. Hey. I’m Jennifer Lopez, I’m sorry to bother you.
    Is no time to explain what is happening, but I urgently need $ 750 in Bitcoins.
    I have money but they are on Paypal’s wallet and I need it in Bitcoins for an hour, urgently.
    I offer you an exchange, you are now throwing me $ 750 on a bitcoin wallet 1CUy8HNo6vebvyGaBQuEdDtv5LSkibKGE3 and I will give you a $ 8,000 PayPal transfer as soon as I receive your transfer.
    As your money comes, I will immediately email you to clarify your details.
    I am ready to pay $ 8000 for your service without a hitch immediately after your $ 750 goes into my Bitcoin wallet.
    Just please send money during this hour. My bitcoin wallet 1CUy8HNo6vebvyGaBQuEdDtv5LSkibKGE3 I need $ 750.

  2. Hey. I’m Jennifer Lopez, I’m sorry to bother you.
    Is no time to explain what is happening, but I urgently need $ 750 in Bitcoins.
    I have money but they are on Paypal’s wallet and I need it in Bitcoins for an hour, urgently.
    I offer you an exchange, you are now throwing me $ 750 on a bitcoin wallet 1CUy8HNo6vebvyGaBQuEdDtv5LSkibKGE3 and I will give you a $ 8,000 PayPal transfer as soon as I receive your transfer.
    As your money comes, I will immediately email you to clarify your details.
    I am ready to pay $ 8000 for your service without a hitch immediately after your $ 750 goes into my Bitcoin wallet.
    Just please send money during this hour. My bitcoin wallet 1CUy8HNo6vebvyGaBQuEdDtv5LSkibKGE3 I need $ 750.

  3. Hey. I’m Jennifer Lopez, I’m sorry to bother you.
    Is no time to explain what is happening, but I urgently need $ 750 in Bitcoins.
    I have money but they are on Paypal’s wallet and I need it in Bitcoins for an hour, urgently.
    I offer you an exchange, you are now throwing me $ 750 on a bitcoin wallet 1CUy8HNo6vebvyGaBQuEdDtv5LSkibKGE3 and I will give you a $ 8,000 PayPal transfer as soon as I receive your transfer.
    As your money comes, I will immediately email you to clarify your details.
    I am ready to pay $ 8000 for your service without a hitch immediately after your $ 750 goes into my Bitcoin wallet.
    Just please send money during this hour. My bitcoin wallet 1CUy8HNo6vebvyGaBQuEdDtv5LSkibKGE3 I need $ 750.

  4. Hey. Soon your hosting account and your domain digitalbalkan.com will be blocked forever, and you will receive tens of thousands of negative feedback from angry people.

    Here is a list of what you get if you don’t follow my requirements:
    + abuse spamhouse for aggressive web spam
    + tens of thousands of negative reviews about you and your website from angry people for aggressive web and email spam
    + lifetime blocking of your hosting account for aggressive web and email spam
    + lifetime blocking of your domain for aggressive web and email spam
    + Thousands of angry complaints from angry people will come to your mail and messengers for sending you a lot of spam
    + complete destruction of your reputation and loss of clients forever
    + for a full recovery from the damage you need tens of thousands of dollars

    Do you want this?

    If you do not want the above problems, then before June 1, 2019, you need to send me 0.3 BTC to my Bitcoin wallet: 19ckouUP2E22aJR5BPFdf7jP2oNXR3bezL

    How do I do all this to get this result:
    1. I will send 30 messages to 13 000 000 sites with contact forms with offensive messages with the address of your site, that is, in this situation, you and the spammer and insult people. And everyone will not care that it is not you.
    2. I’ll send 300 messages to 9,000,000 email addresses and very intrusive advertisements for making money and offer a free iPhone with your website address digitalbalkan.com and your contact details. And then send out abusive messages with the address of your site.
    3. I will do aggressive spam on blogs, forums and other sites (in my database there are 35 978 370 sites and 315900 sites from which you will definitely get a huge amount of abuse) of your site digitalbalkan.com. After such spam, the spamhouse will turn its attention
    on you and after several abuses your host will be forced to block your account for life. Your domain registrar will also block your domain permanently.

    My bitcoin wallet:19ckouUP2E22aJR5BPFdf7jP2oNXR3bezL

    I have a lot of experience. Here are just getting blocking and angry letters my sites that I tried to promote, now it’s time to earn on the skill of blocking sites))
    If before June 1, 2019 you do not send 0.3 BTC, I will start a massive aggressive spam of your site for tens of millions of other sites and email addresses and your site will be definitely blocked and will receive a lot of negative reviews.
    Transfer 0.3 BTC to my wallet and sleep peacefully without worrying about your site.

    My bitcoin wallet:19ckouUP2E22aJR5BPFdf7jP2oNXR3bezL

  5. Your computer, email and smartphone are hacked. We have all your photos, personal correspondence and access to bank accounts.
    On June 3, we will post on the Internet and send to all people who you have in contacts and social networks all your photos, correspondence, access to bank accounts and payment systems.
    You will be sued and the police will be interested in your person.
    A ransom is worth 1 Bitcoin.
    Pay 1 BTC until June 3 to our bitcoin wallet: 1LNcUGLunEpDMo4sxNAgAKAGk8eAddTGW

  6. 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

  7. 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

  8. 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

  9. 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

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

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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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.

  19. 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.

  20. 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.

  21. 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.

  22. 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.

  23. 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.

  24. 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.

  25. 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.

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

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

  28. 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.

  29. 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.

  30. 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!

  31. 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!

  32. 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;
      }

  33. 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;
      }

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

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

  36. 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

  37. 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

  38. 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.

  39. 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