Width of field on Contact Form 7

[eutaw]

Please help me change the size of the Zip input field on contact form 7.

I used the CSS below but it does not work.

.wpcf7 input[type=“Zip”]
{
width: 100px;
}

[matt]

Hi @eutaw,

The reason that your code isn’t working is because the targeted selector is incorrect. There’s no specific Zip input type, but rather, the field type used is just a text input type. However, you cannot just target that because many fields use it and you’d then be affecting the width of all of them with this code.

That said, you already have a field ID set up of ZipCode so you can target that directly instead, using the following code:

#ZipCode { width: 100px; }

I would recommend placing this on the specific page’s custom CSS area.

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

CSS Selector Reference
How to find the css selector in chrome

Hope this helps!

[eutaw]

Thank you.

[ruenel]

You’re welcome!
We’re glad @Matt were able to help you out.