wordpress contactform7 textarea cols and rows change in smaller screens

Question

I used contactform7 to create the contact form for a wordpress site. I want to reduce the rows in a textarea on that form for smaller screen sizes. Is there any method I can use using contactform7's own syntax? If not what are my options?

Below is the syntax for textarea in contactform7 btw.

 [textarea* your-message 40x7] 

(40 - cols, 7 - rows)

Dipetalous

I don't think tha's possible trough the backend. The easyest way would be to set the height with CSS an set some breakpoints. – Unfolded

that was my first idea. but I want to avoid the scroll bar. thanks. – Dipetalous

I used this jQuery Plugin. It adjusts the height of the textarea whenever you have a line-break: jacklmoore.com/autosize – Unfolded

Answer 1

Even though this question is more than 5yrs old, it is still active regularly, and like me many of us trying to get a clear answer to this question.

You can also type 10x for cols 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 -->

Rosiorosita

If there are CSS rules already applied, those won't be working. I recommend using CSS if you are not sure whether your content is styled using CSS or not. – Campinas

Answer 2

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

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

The above will generate a textarea 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>

Transferor

Unfortunately it's not in the current documentation. Do you think I can disable cols and rows all together? – Keddah

It works thank you, but I am interested to know why this is not in the documentation. 2 years since your comment and I can't find it in the docs anywhere. You might consider updating your link because there is nothing there. – Khalif

Answer 3

Code will be As below.

[textarea id:message 0x0 class:custom-class "Insert text here"]<!-- No Rows 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 -->

For Details: https://contactform7.com/text-fields/

Patrol

This same answer was already posted 3 years before this one. Did you even read through the other answers? – Hypochondria

Answer 4

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

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

Obituary

Answer 5

Add it after Placeholder attribute.

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

Symposiarch

That would be before the placeholder. – Homeless

Answer 6

To add cols and rows, use x e.g. You need cols=80 and rows=5, it will be 80x5 It must be placed after the name of the control.

[textarea* your-message id:your-message 80x5]

Statolatry

Upvote for "It must be placed after the name of the control". Important distinction; doesn't work otherwise. – Stickle

Answer 7

First create a form for your article and use this syntax

[textarea* your-message 40x7]

Koran

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Construe

Answer 8

You can try by adding additional css:

.master-cf7-0 .wpcf7 textarea{height:150px;}

Disseminule

Answer 9

[textarea your-message  rows:4]

Livingstone