42

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)

Janaka Dombawela
  • 441
  • 1
  • 4
  • 7

9 Answers9

128

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 -->
Dexter
  • 7,911
  • 4
  • 41
  • 40
  • 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. – Mycodingproject Apr 19 '20 at 10:00
26

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>
Darren Hall
  • 920
  • 8
  • 13
  • Unfortunately it's not in the current documentation. Do you think I can disable cols and rows all together? – Barney Szabolcs Aug 14 '20 at 12:26
  • 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. – Emmanuel Motsi Feb 04 '23 at 08:57
7

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

.wpcf7-form textarea{ 
    width: 100% !important;
    height:50px;
}
Donald Duck
  • 8,409
  • 22
  • 75
  • 99
Kapil Chhabra
  • 415
  • 5
  • 7
7

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/

Tariqul_Islam
  • 527
  • 7
  • 7
  • This same answer was already posted 3 years before this one. Did you even read through the other answers? – agon024 Dec 10 '22 at 01:54
4

Add it after Placeholder attribute.

[textarea* message id:message class:form-control 40x7 placeholder "Message"]
slfan
  • 8,950
  • 115
  • 65
  • 78
Mahmoud Azzazi
  • 51
  • 3
1

First create a form for your article and use this syntax

[textarea* your-message 40x7]

Edward R Sattler
  • 11
  • 1
  • 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](/help/how-to-answer). – Community Nov 18 '21 at 02:03
0

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]
N. Chauhan
  • 1
  • 1
0

You can try by adding additional css:

.master-cf7-0 .wpcf7 textarea{height:150px;}
Asep supian tsaori
  • 1
0

I tried the Dexter's answer with the x2 etc and it didn't work.

CSS worked fine to change the size:

.wpcf7-textarea {height: 200px;}
createscape
  • 713
  • 7
  • 20