wordpress contactform7 изменение столбцов и строк текстового поля на небольших экранах

Я использовал contactform7 для создания контактной формы для сайта WordPress. Я хочу уменьшить количество строк в текстовом поле этой формы для меньших размеров экрана. Есть ли какой-либо метод, который я могу использовать, используя собственный синтаксис contactform7? Если нет, каковы мои варианты?

Ниже приведен синтаксис для текстового поля в контактной форме7, кстати.

 [textarea* your-message 40x7]

(40 столбиков, 7 рядов)


wordpress html contact-form-7
person Janaka Dombawela    schedule 13.03.2015    source источник
comment
Я не думаю, что это возможно через бэкэнд. Самый простой способ - установить высоту с помощью CSS и установить несколько точек останова.   -  person Nico Martin    schedule 13.03.2015
comment
это была моя первая идея. но я хочу избежать полосы прокрутки. Благодарю.   -  person Janaka Dombawela    schedule 13.03.2015
comment
Я использовал этот плагин jQuery. Он регулирует высоту текстовой области всякий раз, когда у вас есть разрыв строки: jacklmoore.com/autosize   -  person Nico Martin    schedule 13.03.2015
comment
красивый. Благодарю. очень ценю это...! :)   -  person Janaka Dombawela    schedule 13.03.2015

Ответы (7)


arrow_upward
84
arrow_downward

Несмотря на то, что этому вопросу уже более 5 лет, он по-прежнему регулярно актуален, и, как и я, многие из нас пытаются получить четкий ответ на этот вопрос.

Вы также можете ввести 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 -->
person Dexter    schedule 14.09.2016
comment
Если уже применены правила CSS, они не будут работать. Я рекомендую использовать CSS, если вы не уверены, стилизован ли ваш контент с помощью CSS или нет. - person Mycodingproject; 19.04.2020

arrow_upward
13
arrow_downward

В документации 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>
person Darren Hall    schedule 27.01.2016
comment
К сожалению, его нет в текущей документации. Как вы думаете, я могу отключить столбцы и строки вместе? - person Barney Szabolcs; 14.08.2020

arrow_upward
6
arrow_downward

Я смог получить эту работу. Я добавил следующее в свой пользовательский CSS:

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

arrow_upward
4
arrow_downward

Добавьте его после атрибута Placeholder.

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

arrow_upward
4
arrow_downward

Код будет таким, как показано ниже.

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

person Tariqul_Islam    schedule 30.01.2019

arrow_upward
0
arrow_downward

Чтобы добавить столбцы и строки, используйте x, например. Вам нужно cols=80 и rows=5, это будет 80x5. Он должен быть размещен после имени элемента управления.

[textarea* your-message id:your-message 80x5]
person N. Chauhan    schedule 24.04.2021

arrow_upward
0
arrow_downward

Вы можете попробовать, добавив дополнительный css:

.master-cf7-0 .wpcf7 textarea{height:150px;}
person Asep supian tsaori    schedule 27.04.2021