CODEWITHSUNDEEP
htmlwordpresscontact-form-7
Janaka Dombawela
Janaka Dombawela

Reputation: 471

wordpress contactform7 textarea cols and rows change in smaller screens

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)

Upvotes: 45

Views: 265871

Answers (9)

Ümit Ünver
Ümit Ünver

Reputation: 61

[textarea your-message  rows:4]

Upvotes: 0

Dexter
Dexter

Reputation: 9334

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 -->

Upvotes: 143

Edward R Sattler
Edward R Sattler

Reputation: 21

First create a form for your article and use this syntax

[textarea* your-message 40x7]

Upvotes: 2

Asep supian tsaori
Asep supian tsaori

Reputation: 1

You can try by adding additional css:

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

Upvotes: 0

N. Chauhan
N. Chauhan

Reputation: 11

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]

Upvotes: 1

Tariqul_Islam
Tariqul_Islam

Reputation: 567

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/

Upvotes: 9

Mahmoud Azzazi
Mahmoud Azzazi

Reputation: 91

Add it after Placeholder attribute.

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

Upvotes: 4

Kapil Chhabra
Kapil Chhabra

Reputation: 415

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

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

Upvotes: 7

Darren Hall
Darren Hall

Reputation: 970

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>

Upvotes: 28

Related Questions