Title: Form width & submit button color issue Last modified: January 8, 2021 --- # Form width & submit button color issue * [keywon](https://wordpress.org/support/users/keywon/) * (@keywon) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/) * Hello, * Please guide me how to set form width to 100% and also change the submit button color (it shows basic theme colors). * Thanks, Kashif Viewing 15 replies - 1 through 15 (of 15 total) * [Yordan Soares](https://wordpress.org/support/users/yordansoares/) * (@yordansoares) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13882608) * Hello [@keywon](https://wordpress.org/support/users/keywon/) , * You can try adding the following CSS rule in your **Dashboard > Appearance > Customize > Additional CSS**, don’t forget to click on **Publish** button: * ``` /* CF7 text, email, and textarea*/ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100%; } /* CF7 submit button */ input.wpcf7-submit { background-color: green; } ``` * Please read [Styling contact form](https://contactform7.com/styling-contact-form/) to learn more about this subject. * Best regards, Yordan. * Thread Starter [keywon](https://wordpress.org/support/users/keywon/) * (@keywon) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13882915) * It just changed the color of the button and not the width. * [Yordan Soares](https://wordpress.org/support/users/yordansoares/) * (@yordansoares) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13882996) * If you want to change the width of the submit button too, you need to add it as a CSS selector withing the first rule: * ``` /* CF7 text, email, button and textarea*/ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="submit"], .wpcf7 textarea { width: 100%; } ``` * Best regards, Yordan. * Thread Starter [keywon](https://wordpress.org/support/users/keywon/) * (@keywon) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883010) * I don’t want to change the width of the submit button but only the field areas. * The css you provided before change the button color and did nothing to the fields width. * [Yordan Soares](https://wordpress.org/support/users/yordansoares/) * (@yordansoares) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883198) * I got it. Sorry for the confusion. * Maybe your theme is overriding this CSS loading its styles later. Please try adding the `!important` rule to force the application of these styles: * ``` /* CF7 text, email, and textarea*/ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100% !important; } ``` * Best regards, Yordan. * Thread Starter [keywon](https://wordpress.org/support/users/keywon/) * (@keywon) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883246) * Still nothing happened. * [Yordan Soares](https://wordpress.org/support/users/yordansoares/) * (@yordansoares) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883299) * Wow, this is weird, can you provide the URL of your site to see what’s happening? * Thread Starter [keywon](https://wordpress.org/support/users/keywon/) * (@keywon) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883332) * Please check the contact form below the one. * [https://bit.ly/2LxF4BU](https://bit.ly/2LxF4BU) * [Yordan Soares](https://wordpress.org/support/users/yordansoares/) * (@yordansoares) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883402) * Thanks [@keywon](https://wordpress.org/support/users/keywon/), * Please try with this other CSS rule: * ``` /* CF7 label, text, email, and textarea*/ .wpcf7 label, .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100% !important; } ``` * Let me know if it works. * Thread Starter [keywon](https://wordpress.org/support/users/keywon/) * (@keywon) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883419) * Great! It worked. Thanks! * Also please let me know how to change the size, main color, hover color and text color of the button (I want to use hex color code). - This reply was modified 5 years, 5 months ago by [keywon](https://wordpress.org/support/users/keywon/). * [Yordan Soares](https://wordpress.org/support/users/yordansoares/) * (@yordansoares) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883478) * You can add styles to the submit button using the `input.wpcf7-submit` and `input. wpcf7-submit:hover` selectors, this way: * ``` /* CF7 submit button */ input.wpcf7-submit { background-color: #ff6633; color: #fff; width: 100%; } /* CF7 submit button : hover */ input.wpcf7-submit:hover { background-color: #d03400; } ``` * Best regards, Yordan. * Thread Starter [keywon](https://wordpress.org/support/users/keywon/) * (@keywon) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883510) * Thanks again Yordan, * I would also like to know if I can minimize the margin/padding between the fields. * And also how to change the color of the notification messages below send button. * Also if you can provide me with the complete css codes that are required in designing the front end of this form, it will solve all my problems. - This reply was modified 5 years, 5 months ago by [keywon](https://wordpress.org/support/users/keywon/). * [Yordan Soares](https://wordpress.org/support/users/yordansoares/) * (@yordansoares) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883557) * You’re welcome [@keywon](https://wordpress.org/support/users/keywon/), * As you could see, sometimes you have to adapt the selectors to your site, depending on whether your current theme is overwriting the styles or selectors of Contact Form 7. * Please read [Styling contact form to learn more](https://contactform7.com/styling-contact-form/). * Best regards, Yordan. * Thread Starter [keywon](https://wordpress.org/support/users/keywon/) * (@keywon) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883608) * I just tried to fill this form and send so many times, but I don’t know why it’s not submitting. * It always gives the message [There was an error trying to send your message. Please try again later.] * Please guide me on this issue. * [Yordan Soares](https://wordpress.org/support/users/yordansoares/) * (@yordansoares) * [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883636) * Hello [@keywon](https://wordpress.org/support/users/keywon/), * Please [create a new topic](https://wordpress.org/support/plugin/contact-form-7/#new-topic-0) for this issue providing the name of your current theme and other active plugins, besides CF7. * Best regards, Yordan. Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Form width & submit button color issue’ is closed to new replies. * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255) * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/) * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq) * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/) * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/) * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/) ## Tags * [form width](https://wordpress.org/support/topic-tag/form-width/) * 15 replies * 2 participants * Last reply from: [Yordan Soares](https://wordpress.org/support/users/yordansoares/) * Last activity: [5 years, 5 months ago](https://wordpress.org/support/topic/form-width-submit-button-color-issue/#post-13883636) * Status: not resolved