Contact form 7 размеры полей (настройка ширины, высоты)

Contact form 7 – отличный плагин обратной связи для WordPress. который является чуть ли не самым распространенным плагином в своем роде. Порой бывает нужно сделать небольшие оформления формы обратной связи, к примеру настроить ширину полей в Contact form 7. О том как это сделать. мы рассмотрим ниже.

Когда форма выходит за пределы сайдбара, хочется сделать индивидуальный размер или наоборот хочется сделать поля шире чем они есть. Нужно делать следующее.

Задаем ширину полям text, url, mail, tel, quiz в Contact form 7

Итак. чтобы задать размеры полей в Contact form 7, нужно в самой форме указать ширину полей. Делается это следующим образом:

В текстовые поля указывается после типа поля и его названия цифры через дробь, к примеру 5/20

где первая цифра 5 – это ширина поля в символах, а 20 – это максимальное количество символов, которое можно ввести в данное поле.

Код будет выглядеть так

<p>Ваше имя (обязательно)<br />
    [text* your-name 5/20] </p>

Если вы вставляете другие значения в скобки, к примеру текст заполнить поле “Значение по умолчанию”, то обязательно нужно размеры задать после назначения поля, его названия и перед текстом.

[text text-233 16/55 "Текст по умолчанию"]

Иначе поле не будет выводиться вообще.

Можно вводить ширину в формате size:50

[text* your-name size:50]

Также отдельно можем задать минимальную “minlength:5” и максимальную “maxlength:10” длину заполненного поля.

[text* your-name size:50 minlength:5 maxlength:10]

Такой формат подходит для многих полей таких как text, url, mail, tel, quiz, но для поля textarea – нужны другие настройки.

 

Задаем ширину полям textarea в Contact form 7

textarea – это поле для ввода данных идет другой формат установки ширины и высоты в Contact form 7 нужно указать следующее

Вставить после кода и названия коля цифры 25х4, где первая цифра 25 – это ширина поля в символах, а 4 – это высота поля в символах.

(cols)x(rows) (колонки)x(строки)

Выглядит это в коде следующем образом:

<b style="color:#99958c;">информация<br />
[textarea your-message 25×4] </b>

На картинке видно, я изменяю ширину поля. чтобы он уместился в сайдбар.

Можно также использовать эти значения по отдельности. к примеру. 25x или же x4.

[textarea your-message 25x]

[textarea your-message x4]

Другие поля

Такие поля как number, date, select (drop-down menu), checkbox, radio (radio buttons), acceptance, submit не имеют таких настроек, потому как ширина их задана изначальна и минимальна. Поэтому скорее всего вам и не понадобиться их настраивать.

Есть 1 комментарий
  1. Айнур:

    почему съезжает форма в разделе контакты?

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>