wordpress contactform7文本区域列和行在更小的屏幕中改变

yvfmudvl  于 2023-01-20  发布在  WordPress
关注(0)|答案(9)|浏览(255)

我用contactform 7创建了一个wordpress网站的联系人表单。我想减少表单上文本区域的行数,以获得更小的屏幕尺寸。有没有什么方法可以使用contactform 7自己的语法?如果没有,我有什么选择?
下面是contactform 7 btw中文本区域的语法。

[textarea* your-message 40x7]

(40- 列,7行)

tez616oj

tez616oj1#

尽管这个问题已经有5年多的历史了,但它仍然经常活跃,像我一样,我们中的许多人都试图得到这个问题的明确答案。
如果您只希望有一个属性,也可以为cols键入10x,为rows键入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 -->
8yoxcaq7

8yoxcaq72#

在文档www.example.com中http://contactform7.com/text-fields/#textarea
[textarea* message id:contact-message 10x2 placeholder "Your Message"]
以上代码将生成一个cols=“10”和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>
wqsoz72f

wqsoz72f3#

我能够得到这个工作。我添加了以下内容到我的自定义CSS:

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

1bqhqjot4#

代码如下所示。

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

piztneat

piztneat5#

将其添加到占位符属性之后。

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

pdtvr36n6#

要添加列数和行数,请使用x。例如,您需要列数=80,行数=5,则将为80x5。它必须放在控件名称之后。

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

klr1opcd7#

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

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

nukf8bse8#

首先为article创建一个表单,并使用以下语法
[文本区域 * 您的信息40x7]

sgtfey8w

sgtfey8w9#

我尝试了德克斯特的答案与x2等,它没有工作。
CSS可以很好地更改大小:

.wpcf7-textarea {height: 200px;}

相关问题