Change width of contact form fields

[nicholaspanetta]

I’ve built 2 forms using Contact Form 7 on this website:

www.1stcallwedoitall.com.au

I’d like to change the width of the input fields of the form on the contact page only (it also appears in the sidebar on internal pages). I’d be happy with 50% width.

I’ve tried a few ways, and have been successful in changing the width of the “Contact Form”, but it reduces the width where it appears on internal pages in the sidebar, which makes the fields very narrow.

How can i do this?

Thank you in advance.

[prakash_s]

Hello @nicholaspanetta,

Thanks for writing to us.

To change the width of this page input field. I would suggest you go to the page builder Section —>Click on the customize ---->Element CSS.

@media (min-width: 978.98px){
$el .wpcf7 textarea, $el input[type=email], $el .wpcf7 input[type=text]
{
width:50%;
}
}  

Please note the code would only work on the desktop mode, if you want to decrease the width in all the devices then you need to remove the media query line from the CSS code. You to add only this code.

$el .wpcf7 textarea, $el input[type=email], $el .wpcf7 input[type=text]
{
width:50%;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks