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)
This question is related to
html
wordpress
contact-form-7
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>
I know this post is old, sorry for that.
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 -->
I was able to get this work. I added the following to my custom CSS:
.wpcf7-form textarea{
width: 100% !important;
height:50px;
}
Add it after Placeholder attribute.
[textarea* message id:message class:form-control 40x7 placeholder "Message"]
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/
Source: Stackoverflow.com