Как настроить ширину полей Contact Form 7 на WordPress.
После установки плагина Contact Form 7 выяснилось, что размеры (ширина) полей формы меня не устраивают, а как их изменять – вопрос.
Пришлось немного повозиться, но, как оказалось, вопрос этот решаем.
Собственно, вот ответ на этот вопрос, размещенный на сайте разработчика Contact Form 7 , но там все на английском (плюс надо еще вычитывать то, что непосредственно относится к делу), поэтому я дам еще и свои пояснения:
На странице настройки плагина Contact Form 7 есть программный код, который определяет, какие поля будут присутствовать в форме.
По умолчанию, этот код выглядит так:
<p>Ваше имя (обязательно)<br />
[text* your-name] </p>
<>Ваш E-Mail (обязательно)<br />
[email* your-email] </p>
<p>Тема<br />
[text your-subject] </p>
<p>Сообщение<br />
[textarea your-message] </p>
<p>submit «Отправить»]</p>
После установки Really Simple CAPTCHA он выглядит так:
<p>Ваше имя (обязательно)<br />
[text* your-name] </p>
<>Ваш E-Mail (обязательно)<br />
[email* your-email] </p>
<p>Тема<br />
[text your-subject] </p>
<p>Сообщение<br />
[textarea your-message] </p>
<p>Введите код с картинки<br />
[captchac captcha-287]
[captchar captcha-287] </p>
<p>submit «Отправить»]</p>
Как выяснил я, размеры (ширина) полей Contact Form 7 и расстояние между ними регулируются тоже этим кодом.
Вот как он сейчас выглядит у меня:
<p>
Ваше имя (обязательно):
[text* your-name 80/200]
Ваш E-Mail (обязательно):
[email* your-email 80/200]
Тема:
[text your-subject 120/300]
Текст сообщения, вопроса или описания собственной ситуации:
[textarea your-message 130×20]
Введите код с картинки
[captchac captcha-941]
[captchar captcha-941 20/50] </p>
<p>[submit «Отправить»]</p>
Т.е., что я, собственно, сделал:
1. Убрал все лишние теги <p>, </p> и <br /> (за счет чего расстояние по вертикали между полями и надписями Contact Form 7 уменьшились.
2. Добавил в теги полей ввода имени, e-mail, темы и капчи пары цифр 80/200, 120/300 и 20/50 (это ширина поля и максимальное количество символов в нем, на странице разработчика приводятся примеры 40/100 и 20/50, я свои цифры подобрал экспериментальным путем, глядя на то, как меняется ширина полей).
3. Добавил в тег поля сообщения пару цифр 130×20 (160 – это ширина поля в символах, 20 – это высота поля в строчках – тоже подобрал экспериментальным путем).
Все это видно, если просто сравнить эти варианты кодов.