Стилизация полей Contact Form 7

Question

Стилизация полей Contact Form 7

18 янв. 2013 г., 22:10:18

Просмотры: 18.9K

Голосов: 0

Мы используем плагин Contact Form 7 для WordPress и хотим задать ширину поля "Тема" (предполагаю, что решение применимо и к другим полям), а также расположить поле "Ваш Email" рядом с полем "Ваше Имя". В результате должно получиться: Email и Имя на одной строке, Тема на всю ширину под ними, а Ваше Сообщение под полем Тема.

user26221

1

плагин contact form 7 css

Комментарии

Без дополнительной информации это выглядит как вопрос по чистомy CSS, который не соответствует тематике сайта согласно [faq]

s_ha_dum

18 янв. 2013 г. 22:34:59

Contact Form 7 позволяет добавлять любой необходимый HTML в формы - посмотрите его админку. Также: покажите нам, что вы уже пробовали. Пока что это звучит как несоответствующий теме вопрос по CSS, как и сказал @s_ha_dum.

chrisguitarguy

18 янв. 2013 г. 23:01:08

Я достаточно хорошо знаком с CSS, но не смог найти его на странице Внешний вид/Редактор. Также я не смог найти .php файлы, поэтому не знал, с чего начать. Я вижу админку, где находится шорткод, но никогда не пытался изменять шорткоды, поэтому не знал, где их искать. Любые подсказки помогут мне сдвинуться с места. Извините, если я не в том разделе. Я думал, что видел другие вопросы по Contact Form 7 здесь.

user26221

19 янв. 2013 г. 04:27:33

Дайте ваши предложения по CSS. Я использовал инструмент Firefox "Инструменты/Веб-разработчик/Исследовать" (очень удобно!), чтобы хотя бы изменить ширину в соответствии с блоком комментариев. Делюсь этим здесь для других:

user26221

19 янв. 2013 г. 04:35:11

/ Увеличить ширину поля ввода в форме / input[type="text"], textarea { width:80%

user26221

19 янв. 2013 г. 04:35:53

Все ответы на вопрос

Mayeenul Islam 12.9K · Answer 1 · 2013-01-19T07:53:25Z

Я сам не пробовал, но вы можете попробовать:

Contact Form 7 использует что-то вроде этого:

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

Вместо тега параграфа (<p>) используйте span (<span>) и немного встроенного CSS, например:

<span style="width: 48%; float: left; position: relative;">Ваше имя (обязательно)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Ваш Email (обязательно)<br />
    [email* your-email] </span>

width: 48% позволит вам добавить отступы (margin). Затем используйте <div> для очистки float со всех сторон:

<div style="clear:both;"></div>

Затем остальной код:

<p>Тема<br />
    [text your-subject] </p>

<p>Ваше сообщение<br />
    [textarea your-message] </p>

<p>[submit "Отправить"]</p>

Таким образом, весь код будет выглядеть так:

<span style="width: 48%; float: left; position: relative;">Ваше имя (обязательно)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Ваш Email (обязательно)<br />
    [email* your-email] </span>
<div style="clear:both;"></div>

<p>Тема<br />
    [text your-subject] </p>

<p>Ваше сообщение<br />
    [textarea your-message] </p>

<p>[submit "Отправить"]</p>

НЕ ЗАБУДЬТЕ ИЗМЕНИТЬ СПЕЦИФИЧНЫЕ СЛАГИ, ТАКИЕ КАК your-email, your-subject, В СООТВЕТСТВИИ С ID ВАШЕЙ КОНТАКТНОЙ ФОРМЫ.
Удачного кодинга!

Travis Pflanz 1.95K · Answer 2 · 2013-01-29T07:59:02Z

Гораздо проще, чем в предыдущем ответе:

Добавьте классы к вашим полям ввода в конструкторе форм - [text* your-name class:your-name]

Затем задайте стили в вашем CSS-файле.

Пример:

#wpcf7-f613-p57-o1 form .your-name {width:48%;} - Где #wpcf7-f613-p57-o1 - это ID формы, с которой вы работаете.

Travis Pflanz

1.95K

29 янв. 2013 г. 07:59:02