Contact form 7 Change message Box Size | textarea width/height

There is no straightforward way of finding how to change the Message box size or textarea width and height in Contact Form 7 in WordPress. Well only "how to find" part is not straightforward but actually changing the Message box or textarea size is darn easy.

Contact form 7 is a very good WordPress Plugin, compared other WordPress Form building plugins it is very simple and lightweight. It is perfect for me, as I like any theme or plugin to be by default as simple as possible but with limitless options to change the design to anything. Contact Form 7 nails it flawlessly.

But I was designing a website with Free Elementor - WordPress Page Builder. Everything was custom designed. Added a form, there also everything but the textarea or message box height, I was not able to change. I have designed these forms, I quite liked these

But wanted the height to be small like these

So, I just discovered it and here I am sharing a step by step guide on - how to reduce the size of contact form 7

1. Contact Form 7 message box height / textarea height:

After a little bit of digging with inspect element (Ctrl+Shift+I) I found that it uses something like columns and rows command, here

So that the cols="xx" and rows="xx" - dictates the width and height of the message box respectively. And seeing it using the class name wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required I became sure that the style is generated by Contact Form 7 plugin only. Previously I was confused if it was coming from the theme style sheet or Elementor.

So, it should be done contact form only. So, here's I discovered how to reduce the size of Contact Form 7 textarea height.

So Here's how you do it, go to Contact Form 7 ("Contact" menu on the left on WordPress), chose the form you want to change, find the text area related code change to this -

 [textarea your-message x5] 

Note: Only "x5" (where 5 is the number of rows) you have to add, everything else should be the same as it was before if you do not want to change anything else. Like, for me the code was

 [textarea* your-message placeholder"Your Message*"] 

I just added "x4", to make like this -

 [textarea* your-message x4 placeholder"Your Message*"] 

2. Change Contact Form 7 textarea width/message box width:

As discussed before, the cols="xx" command in Contact Form 7 is responsible for this.
To change the number of columns just add "4x" (where 4 is the number of columns)

Just have something like -

 [textarea your-message 4x] 

3. Change Contact Form 7 message box size (both Height and Width):

Refer the previous steps and then add "4x5" (where 4 is the number of columns and 5 is the number of rows)

Like this -

 [textarea your-message 4x] 




For me, I only had to change the message box height this way, everything else was available in Elementor only. So if you are interested in learning how to create beautiful contact forms with Elementor Free and Contact Form 7, keep an eye on this blog, I will shortly update a tutorial on it.

Let me know in the comment if you were able to follow along with this tut and design your the contact as you like. Or let me know if you required any other tutorial like this.

Thanks for stopping by.