[Plugin: Contact Form 7] Resizing Text Box area so that its wider not longer

I would recommend doing this in the css:

example:

input[type=”text”] {
height: 30px;
width: 300px;
}

ngoodfellow.. Would I put it in this file? contact-form-7/modules/textarea.php What do I replace?

I would put the css at the end of your style.css file

please include a link to your site and be more specific

Having the same issue. Just a simple out of the box form. I added the example above to the css, it does change the size of the text fields. Eg. Name, Email and Subject.

For others with same issue our theme has a custom.css that overrides the style.css check your theme to see where would be best to add the edit.

But not the “Your Message” area.

Using the Generate tag option in the plugin, adding a new Your Message box, no mater the size selected the width of the box never changes, the height does.

Just further info, I cam make “textfields” any width with the generator.

“Textarea” just does not go beyond 200 pixels or so.

Hi Steveyoung,

Thats exactly my issue. I only want to change the “Your Message area” and make it wider. The Generate Tag only works for making it longer. Im not familiar with CSS, I have found the style sheets though.

I am continuing to work on it. I will post here if I figure it out. Make sure you put comments in your .css file so you remember what you did. Also if you are working in the source style .css make a backup because when you upgrade it will wipe out what you did.

Also we have a few techs here that work on the projects. We keep a “Post” (that we never publish) of all the changes we make to any particular site with notes on why. A year later it is hard to remember what you did to “fix that problem” when an upgrade breaks it again.

Add the following to your .css file

/*added to widen contact form 7 text field*/
textarea {
   height: 30px;
   width: 500px;
}

Where “500” is how wide you want “Your Message” field to be.

The comment is optional, that’s the stuff between /* and */

Hi Steve, I’m not sure I am copying it into the right area. Is this correct: Apperance: Editor: Style Sheet (Style .CSS) Paste it into that page?

That’s what I did and nothing changed. What am I doing wrong?

paste this to your theme’s style.css

textarea[class*=”wpcf7-form-control wpcf7-textarea”] {
height: 200px;
width: 280px;
}

you can also change class area for
name:
[class*=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required”]

email:
[class*=”wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email”]

subject:
[class*=”wpcf7-form-control wpcf7-text”]

I copied and pasted

textarea[class*=”wpcf7-form-control wpcf7-textarea”] {
height: 200px;
width: 280px;
}

at bottom of:
COMMANDER THEME: Stylesheet (style.css)

With no change, Am I missing something here?

try this one ??
.wpcf7-form textarea { height: 200px; max-width: 280px; }

lol, the common problem is: its too wide, how to reduce size of box? but yours. so you must set the sizes bigger.
for example:
height: 500px; max-width: 600px;

note: if you write here your site url, we can check it for other problems.

Still no change, Here’s my URL https://www.mystepmedia.com/contact-us/

It works as suggested. Paste:
/*added to widen contact form 7 text field*/
textarea {
height: 250px;
width: 500px;
}

to your theme’s style.css file