The popularity of Contact Form 7 plugin<\/strong> is enormous according to its flexibility, ease of use and simple implementation. However, there is nothing perfect and the plugin has its drawbacks.<\/p>\r\n By default the Contact Form 7 plugin does not style its forms, and though looks a bit simple.<\/p>\r\n Hardly surprising, that we insist on setting high standards when it is concerned with our reputation or business. <\/p>\r\n The website is the face of its owner and it is necessary to achieve a flawless result.<\/p>\r\n And now, we will learn how to deal with lack of styles by adding your own styles to the form and make it really attractive and catch visitor’s eye immediately.<\/p>\r\n\r\n We can do it easily by adding simple CSS rules under Appearance -> Customize -> Additional CSS<\/strong> in your admin panel.<\/p>\r\n Let’s start with basics. The top-level element of contact form has wpcf7<\/strong> class. To style the whole contact form, add style rules for that class selector. It will add background color and border to the whole form.<\/p>\r\n As you see, there are some spacing issues, so let’s add the padding to the form:<\/p>\r\n\r\n Great, it looks much better now. Let’s add styles to individual fields<\/strong>. The most common types of fields are text, email, and textarea<\/strong> so we add a style rule for them<\/p>\r\n One of the more common requests is to adjust the width<\/strong> of the fields, so with the codes below, we will extend the areas to desired ones.<\/p>\r\n Moreover, we can adjust color, font-size, font-family etc of labels<\/strong> with the following CSS:<\/p>\r\n\r\n Let’s also learn how to edit the background and border color of submit button both for active and hover view:<\/p>\r\n\r\n Refresh Contact page and enjoy the result of your work. My congratulations! Now, you know how to make the form attractive and eye-catching.<\/p>\r\n\r\n![\"\"](\"\/help\/wp-content\/uploads\/2018\/03\/How_to_Style_Contact_Form_7_Forms_in_WordPress0.png\")
<\/a>Where to add your custom CSS rules?<\/h3>\r\n\r\n
<\/a>\r\nHow to add styles to the whole form?<\/h3>\r\n
.wpcf7 {\r\n background-color: #eaf6ff;\r\n border: 7px solid #0f80be;\r\n}<\/pre>\r\n<\/a>\r\n\r\ndiv.wpcf7 {\r\n padding: 3% 5% 3% 5%;\r\n}<\/pre>\r\n<\/a>\r\n\r\nHow to add styles to the individual fields?<\/h3>\r\n
.wpcf7 input[type=\"text\"],\r\n.wpcf7 input[type=\"email\"],\r\n.wpcf7 textarea {\r\n background-color: #fff;\r\n}<\/pre>\r\n<\/a>\r\n.wpcf7-textarea {\r\n width: 90%; \r\n} \r\n\r\n.wpcf7 input {\r\n width: 50%;\r\n}\r\n\r\n.wpcf7-text {\r\n width: 50%;\r\n}<\/pre>\r\n<\/a>\r\nHow to edit label styles?<\/h3>\r\n
.wpcf7 label {\r\n color: #008287;\r\n font-size: 20px;\r\n font-weight: bold;\r\n}<\/pre>\r\n<\/a>\r\nHow to add styles to submit button?<\/h3>\r\n
.wpcf7 input[type='submit'] {\r\n color: #ffffff;\r\n background-color: #008287;\r\n\tborder: #008287; \r\n}\r\n\t \r\n.submit:hover, input[type='submit'].wpcf7-submit:hover {\r\n color: #ffffff;\r\n background-color: #3b5998;\r\n border-color: #3b5998; \r\n}<\/pre>\r\n<\/a>\r\n\r\n