Html wordpress contactform7 textarea cols 和行在较小的屏幕中发生变化

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29025956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:40:07  来源:igfitidea点击:

wordpress contactform7 textarea cols and rows change in smaller screens

htmlwordpresscontact-form-7

提问by Janaka Dombawela

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?

我使用contactform7 为wordpress 站点创建了联系表单。我想为较小的屏幕尺寸减少该表单上 textarea 中的行。我可以使用contactform7自己的语法使用任何方法吗?如果不是,我的选择是什么?

Below is the syntax for textarea in contactform7 btw.

以下是 contactform7 btw 中 textarea 的语法。

 [textarea* your-message 40x7] 

(40 - cols, 7 - rows)

(40 - 列,7 - 行)

回答by Dexter

I know this post is old, sorry for that.

我知道这篇文章很旧,抱歉。

You can also type 10xfor cols and x2for rows, if you want to have only one attribute.

如果您只想拥有一个属性,您还可以输入10xcols 和x2rows。

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

回答by Darren Hall

In the documentaion http://contactform7.com/text-fields/#textarea

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

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

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

The above will generate a textarea with cols="10" and rows="2"

以上将生成一个带有 cols="10" 和 rows="2" 的 textarea

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

回答by Kapil Chhabra

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

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

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

回答by Mahmoud Azzazi

Add it after Placeholder attribute.

在 Placeholder 属性之后添加它。

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

回答by Tariqul_Islam

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/

详情:https: //contactform7.com/text-fields/