web-dev-qa-db-ja.com

wordpress contactform7 textareaの列と行は小さな画面で変更されます

Contactform7を使用して、wordpressサイトの連絡先フォームを作成します。画面サイズを小さくするために、そのフォームのtextareaの行を減らしたいです。contactform7の構文を使用できる方法はありますか？そうでない場合、私のオプションは何ですか？

以下は、contactform7 btwのtextareaの構文です。

 [textarea* your-message 40x7]

（40-列、7-行）

htmlwordpresscontact-form-7
15
Janaka Dombawela

私はこの投稿が古いことを知っていますが、ごめんなさい。

属性を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 -->
49
TheHive

ドキュメント内 http://contactform7.com/text-fields/#textarea

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

上記は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>
10
Darren Hall

この作品を手に入れることができました。カスタムCSSに次を追加しました。

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

コードは次のようになります。

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

1
Tariqul_Islam

プレースホルダー属性の後に追加します。

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