How To Change Form Width and Height in Contact Form 7 For WordPress

Posted on 2016-05-07

Contact forms are a must for almost every website - whether you run your company website with the CMS or just a blog, you will need a way for people to connect with you.

With over one million active installations, Contact Form 7 is one of - if not the most - popular contact form plugins for WordPress.

It's incredibly simple to use and setup, which makes implementation for novices a breeze. However, when used in some displays such as widget areas, the message field can appear wider than the other fields, and sometimes the depth doesn't work when aligned with the rest of the content.

It's actually very easy to change with width and depth of the form fields in Contact Form 7 - just use the CSS snippets below by placing them within your theme's CSS (stylesheet):

.wpcf7 input.wpcf7-text { width: 100%; }
.wpcf7 textarea.wpcf7-textarea { width: 100%; }
.wpcf7-form textarea { height: 200px; }

You can use either pixels (px) or a percentage (%) to define the size - as you can see from the above code, I have set the widths to 100% to ensure they all fill the content area and are all the same width as each other, and set the message field depth to 200px, though you can change this to your liking.

Dependent on your theme and available space, you can modify the above figures to best suit your requirements to ensure that your forms flawlessly fit your WordPress website.

Posted on 2016-05-07

NRGThemes Blog

Weekly posts, tips and theme news by NRGThemes.

Stay up-to-date with our latest themes!

Get notified when we release new themes & about exclusive offers