New to the community? Start here

Contact Form 7 CSS – wider fields

Hello!

On thinknettech.com I am using Contact Form 7 version 4.9.1 with WP 4.9.1 and Sage theme. I can’t figure out how to tweak the CSS to get the form fields to use the full width of the column. It looks ok on one page (http://thinknettech.com/contact/) but not on another form page (http://thinknettech.com/current-customers/). Could you please provide some help? I don’t know what else to try after tweaking the CSS to show width: 100% for several attributes related to wpcf7. I’d like to have the fields and input areas all the same width, to take up the horizontal space available in the column, and be responsive. Thank you!

Wed, 27 Dec 2017 5:10:44
More WPMU DEV Dashboard discussions
WPMU DEV Dashboard
  • Nahid
    • Ex Staff

    Hey Heather !

    Hope you are having a great day!

    You can add the following Custom CSS in your site to make the fields of the Contact Form 7 form in the page “Current Customers” take up the whole width available in the column:

    #wpcf7-f4970-p4712-o1 input[type=text], #wpcf7-f4970-p4712-o1 input[type=email], #wpcf7-f4970-p4712-o1 textarea, #wpcf7-f4970-p4712-o1 .wpcf7-form label, #wpcf7-f4970-p4712-o1 input.wpcf7-form-control.wpcf7-submit {
    
width: 100%;
    
}

    You can add the Custom CSS code to the ‘Additional CSS’ option in your WordPress Dashboard->Appearance->Customize. Alternatively, you can also add it to your child theme‘s stylesheet, a Custom CSS plugin or the Custom CSS option in your Theme Options (if available).

    Hope this helps. Let me know if this works for you. Thanks!

    Best,

    Nahid