Wordpress contactform7 textarea cols and lines change on smaller screens

Question

I used contactform7 to create a contact form for the wordpress site. I want to reduce the lines in the text box in this form for a smaller screen size. Is there any method that I can use using my own contactform7 syntax? If not, what are my options?

The following is the syntax for textarea in contactform7 bit.

[textarea* your-message 40x7] 

(40 - columns, 7 rows)

Answer 1

I know this post is old, sorry for that.

You can also enter 10x for columns and x2 for rows if you want to have only one attribute.

 [textarea* your-message x3 class:form-control] <!-- only rows --> [textarea* your-message 10x class:form-control] <!-- only columns --> [textarea* your-message 10x3 class:form-control] <!-- both --> 

Answer 2

In the document http://contactform7.com/text-fields/#textarea

[textarea* message id:contact-message 10x2 placeholder "Your Message"]

The above will generate a text field with cols = "10" and rows = "2"

 <textarea name="message" cols="10" rows="2" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" id="contact-message" aria-required="true" aria-invalid="false" placeholder="Your Message"></textarea> 

Answer 3

I was able to get this job. I added the following to my custom CSS:

 .wpcf7-form textarea{ width: 100% !important; height:50px; } 

Answer 4

Add it after the Placeholder attribute.

 [textarea* message id:message class:form-control 40x7 placeholder "Message"] 

Answer 5

The code will be as below.

 [textarea id:message 0x0 class:custom-class "Insert text here"]<!-- No row No columns --> [textarea id:message x2 class:custom-class "Insert text here"]<!-- only rows --> [textarea id:message 12x class:custom-class "Insert text here"]<!-- Only Columns --> [textarea id:message 10x2 class:custom-class "Insert text here"]<!-- Both rows and Columns -->