Question

我使用contactform7为wordpress网站创建联系表单。我希望减少该表单上的textarea中的行以获得更小的屏幕尺寸。我可以使用contactform7自己的语法使用任何方法吗？如果不是我的选择？

以下是contactform7顺便提一下textarea的语法。

 [textarea* your-message 40x7]

（40 - cols，7行）

Answer 1

我知道这篇文章已经过时了，对不起。

如果您只想拥有一个属性，也可以为列添加10x，为行添加x2。

[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

在文件http://contactform7.com/text-fields/#textarea

中

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

以上将生成一个texs = cols =＆＃34; 10＆＃34;和行=＆＃34; 2＆＃34;

<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

我能够得到这项工作。我在自定义CSS中添加了以下内容：

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

Answer 4

在占位符属性后添加它。

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

Answer 5

代码如下。

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

有关详细信息：https://contactform7.com/text-fields/

Answer 6

要添加列和行，请使用 x 例如您需要 cols=80 和 rows=5，它将是 80x5 它必须放在控件名称之后。

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

Answer 7

您可以尝试添加额外的 css：

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

wordpress contactform7 textarea cols和行在较小的屏幕中更改

7 个答案: