Ширина полей contact form 7

Ширина полей contact form 7

Text input fields are the most common factors of a contact form. As you may know, HTML has two types of elements for text input fields: for a single-line input; and

for multi-line input.

Contact Form 7 provides several types of form-tags for representing these two types of HTML elements: text field ( text and text* ); email field ( email and email* ); telephone number field ( tel and tel* ); URL field ( url and url* ); and textarea ( textarea and textarea* ). In this article, I will show you detailed information about the usage and semantics of these form-tags.

Text field

Both text and text* are used for single-line input and accept any form of text. The difference between them is that text* connotes a required field. In Contact Form 7’s convention, all types of tags with an asterisk ‘*’ mean that these are required fields.

Option Examples Description
id: (id) id:foo id attribute value of the input element.
class: (class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [text your-text class:y2008 class:m01 class:d01] .
minlength: (num) minlength:10 The minimum length allowed for this input field.
maxlength: (num) maxlength:90 The maximum length allowed for this input field.
size: (num) size:50 The value of size HTML attribute of this input field.
akismet:author Options for using Akismet.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder .
default:user_login
default:user_first_name
default:user_last_name
default:user_nickname
default:user_display_name
Options for retrieving logged-in user info as default value of field.

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Email field

Both email and email* are for single-line input and accept only e-mail addresses. email* is a required field.

Option Examples Description
id: (id) id:foo id attribute value of the input element.
class: (class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [email your-email class:y2008 class:m01 class:d01] .
minlength: (num) minlength:10 The minimum length allowed for this input field.
maxlength: (num) maxlength:90 The maximum length allowed for this input field.
size: (num) size:50 The value of size HTML attribute of this input field.
akismet:author_email Option for using Akismet.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder .
default:user_email Options for retrieving logged-in user info as default value of field.

These fields can have a zero or one value, and the value will be used as the default value of the input field.

URL field

Both url and url* are for single-line input and accept only URL. url* is a required field.

Option Examples Description
id: (id) id:foo id attribute value of the input element.
class: (class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [url your-url class:y2008 class:m01 class:d01] .
minlength: (num) minlength:10 The minimum length allowed for this input field.
maxlength: (num) maxlength:90 The maximum length allowed for this input field.
size: (num) size:50 The value of size HTML attribute of this input field.
akismet:author_url Options for using Akismet.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder .
default:user_url Options for retrieving logged-in user info as default value of field.
Читайте также:  Сокотерапия при онкологии отзывы

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Telephone number field

Both tel and tel* are for single-line input and accept only telephone number. tel* is a required field.

Option Examples Description
id: (id) id:foo id attribute value of the input element.
class: (class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [url your-url class:y2008 class:m01 class:d01] .
minlength: (num) minlength:10 The minimum length allowed for this input field.
maxlength: (num) maxlength:90 The maximum length allowed for this input field.
size: (num) size:50 The value of size HTML attribute of this input field.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder .

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Textarea

Both textarea and textarea* are for a multi-line input and accept any form of text. textarea* is a required field.

Option Examples Description
id: (id) id:foo id attribute value of the textarea element.
class: (class) class:bar class attribute value of the textarea element. To set two or more classes, you can use multiple class: option, like [textarea your-text class:y2008 class:m01 class:d01] .
minlength: (num) minlength:10 The minimum length allowed for this input field.
maxlength: (num) maxlength:90 The maximum length allowed for this input field.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder .

These fields can have zero or one value, and the value will be used as the default value of the input field.

There is another way to set the default value for a textarea field:

In this manner, you can set a mutli-line default value.

Note: This is a demo. This form doesn’t send a mail practically.

Установка или переустановка Windows на платной основе, продвижение сообществ вк, статьи по ремонту и обслуживанию компьютера.

После установки плагина Contact Form 7 выяснилось, что размеры (ширина) полей формы меня не устраивают, а как их изменять – вопрос.

Пришлось немного повозиться, но, как оказалось, вопрос этот решаем.

Собственно, вот ответ на этот вопрос, размещенный на сайте разработчика Contact Form 7 , но там все на английском (плюс надо еще вычитывать то, что непосредственно относится к делу), поэтому я дам еще и свои пояснения:

На странице настройки плагина Contact Form 7 есть программный код, который определяет, какие поля будут присутствовать в форме.

По умолчанию, этот код выглядит так:

После установки Really Simple CAPTCHA он выглядит так:

Как выяснил я, размеры (ширина) полей Contact Form 7 и расстояние между ними регулируются тоже этим кодом.

Вот как он сейчас выглядит у меня:

Т.е., что я, собственно, сделал:

1. Убрал все лишние теги

и
(за счет чего расстояние по вертикали между полями и надписями Contact Form 7 уменьшились.

2. Добавил в теги полей ввода имени, e-mail, темы и капчи пары цифр 80/200, 120/300 и 20/50 (это ширина поля и максимальное количество символов в нем, на странице разработчика приводятся примеры 40/100 и 20/50, я свои цифры подобрал экспериментальным путем, глядя на то, как меняется ширина полей).

Читайте также:  Intel core i7 3687u

3. Добавил в тег поля сообщения пару цифр 130×20 (160 – это ширина поля в символах, 20 – это высота поля в строчках – тоже подобрал экспериментальным путем).

Все это видно, если просто сравнить эти варианты кодов.

Приветствую Вас, дорогой читатель моего блога.

Сегодня я покажу вам как очень быстро и просто изменить внешний вид contact form 7, что бы она стала более привлекательной.

Навигация по статье:

Изначально Сontact Form7 выглядит достаточно невзрачно. К счастью это поправимо! Для изменения внешнего вида этой формы мы с вами можем воспользоваться либо специальным плагином, либо прописать в файл style.css нашей темы несколько своих стилей.

Обзор плагина Сontact Form7 Style

Итак, начнем с плагина. Устанавливать мы будем плагин Сontact Form7 Style. Переходим в консоль нашего сайта, далее выбираем здесь Плагины -> Добавить новый. В поле поиска вводим название плагина и нажимаем Enter , далее кнопка установить, а затем активируем плагин.

Теперь в боковом меню нашей панели управления сайтом появился отдельный пункт Contact Style.

Данный плагин изначально содержит в себе несколько готовых шаблонов которые можно сразу использовать на своем сайте.

Для того чтобы применить какой то стиль оформления, вы нажимаете либо на ссылку с названием этого стиля, либо на кнопку изменить. Открывается окно настроек данного стиля. Из настроек здесь мы можем выбрать к какой именно форме обратной связи мы хотим применить этот стиль.

После того, как вы все выставили нажимаем на кнопку «Обновить».

Меняем внешний вид Contact Form7 при помощи собственного стиля.

Для этого переходим в пункт Сontact Form7 Style ->Add new. Сразу же вводим название нашего стиля.

И переходим к заданию стилей.

Стили для формы

form Background – цвет всей формы.

form widht — это ширина формы. По умолчанию стоит 100%, если вас это не устраивает, вы можете задать ширину в пикселях, например 600.

form box sizing — определяет алгоритм расчета ширины и высоты того ил иного элемента на странице. Рекомендую оставить по умолчанию.

form border widht — толщина границы нашей формы, задаётся в пикселях.

form border style — определяет стиль границы нашей формы.

Здесь возможно несколько вариантов:

  • none — граница отсутствует;
  • solid — сплошная линия;
  • doted — пунктирная граница;
  • double — двойная линия;
  • groove — эффект вогнутости границы;
  • ridge — эффект выпуклости границы;
  • inset — эффект вдавленности формы;
  • outset — эффект выпуклости формы.

form padding — внутренний отступ, расстояние от границы формы до внутренних элементов формы, т.е. до всех надписей, полей и т.д. Рекомендую устанавливать хотя бы пикселе 20, потому, что изначально элементы прилипают к границе формы, это выглядит не очень красиво.

form margin — это внешний отступ, т.е. это отступ от границ вашей формы до каких-то внешних элементов, который окружают форму.

form border color — цвет границы формы.

form border radius — определяет радиус скругления углов. Задается в пикселях.

form line height — высота строк в форме или междустрочный интервал, задаётся в пикселях.

Стили для полей ввода

input background – цвет фона полей.

input color — цвет текста который будет отображаться внутри полей.

input border color — цвет границы полей ввода.

input font size — размер шрифта.

input line height — высота строки.

input border widht — ширина границы поля ввода.

input border style — стиль границы поля ввода.

input border radius — скругление углов поля ввода.

Читайте также:  Источник бесперебойного питания fsp

input font style — стиль текста, отображаемого в полях ввода.

Можно задать:

  • default — стиль по умолчанию;
  • normal — обычный;
  • italic — курсив;
  • oblique — жирный.

input font weight — жирность шрифта.

  • default — стиль по умолчанию;
  • normal — обычный;
  • bold — жирный;
  • bolder — более жирный;
  • lighter — тоньше;
  • initial — исходный;
  • inherit — это наследование, т.е. будут наследоваться стили родительского элемента. Если к примеру для формы или страницы применен стиль жирный, то и для текса внутри этих полей тоже будет применяться жирный шрифт. Я оставлю здесь «normal».

input width — ширина поля для ввода текста. По умолчанию задается 100%. Если Вам нужно задать в пикселях — ставите в пикселях.

input box sizing — оставляем по умолчанию.

input height — высота полей ввода.

input padding — внутренний отступ от границы поля ввода текста до текста.

input margin — внешний отступ.

Изменяем внешний вид для текстового поля

textarea background color — цвет фона.

textarea height — высота поля для ввода сообщения.

textarea widht — ширина поля

textarea box sizing – алгоритм расчёта ширины и высоты элементов (оставляем стандартные)

textarea border-size — толщина границы

textarea border color – цвет границы

Помимо полей ввода и других элементов на нашей форме также могут содержаться метки, которые позволяют нам выводить какой-то текст рядом с полем ввода. По умолчанию в форме метки не используются, Вы можете их добавлять через генерирование отдельных полей. В плагине Сontact Form 7 Style можно изменять стили для этих меток.

Прямо под блоком, где мы задавали стили для поля Textarea есть блок стилей для меток. Здесь мы можем изменит стиль шрифта, его толщину, его размер, а также высоту строки, и цвет.

Стили для кнопки отправки сообщения.

submit button width — ширина кнопки.

submit button box sizing — оставляем по умолчанию.

submit button height — высота кнопки.

submit button border radius — скругленные углы.

submit button font size — размер шрифта текста на кнопке.

submit button line height — высота строки на нашей кнопке (междустрочный интервал).

submit button border width — толщина границы кнопки.

submit button border style — стиль границы.

submit button color — цвет текста кнопки.

submit button background — цвет фона кнопки.

Вот и все стили, которые мы с Вам задали, помимо это здесь есть еще css-редакторы в котором Вы можете вписать какие-то определенные классы, прописывать для них свойства, и это все будет применяться.

Не забудьте нажать кнопку «Обновить» после того как все стили будут заданы.

Изменяем внешний вид Contact Form 7 без плагина.

Если вы хоть немного разбираетесь в CSS то легко сможете изменить внешний вид формы Contact Form 7 и без плагина. Для этого вам достаточно знать какой класс за что отвечает.

Значения классов для Contact Form 7

.wpcf7-form — контейнер формы, можно также использовать .wpcf7

.wpcf7-form input — поля для ввода имени, темы и т.д., а также кнопка «Отправить»

.wpcf7-form input[type=»text»] – только поля для ввода текста и темы (могут быть и другие в случае если вы добавляли свои поля)

.wpcf7-form input[type=»email»] – поле для ввода email

.wpcf7-form input[type=»submit»] или .wpcf7-submit – кнопка отправки

Для редактирование подписей полей можно использовать .wpcf7-form или .wpcf7

. wpcf7-response-output – вывод уведомлений об отправке сообщения

Для того чтобы применить стиль только для какой то конкретной формы необходимо вычислить её идентификатор и прописать его перед названием класса.

Ссылка на основную публикацию
Что такое экспоненциальная форма записи числа
Запись (значения) — Учётная запись Нотная запись Демо запись Двойная запись Запись MX Алфавитная запись Клятвенная запись Экспоненциальная запись Обратная...
Что мне задали завтра на русский
Проверка орфографии на 5-ege.ru (введите текст в форму ниже): Если нужно проверить пунктуацию, воспользуйтесь сервисом Проверка пунктуации онлайн. Наш сервис...
Что лучше газель некст или фиат дукато
На прошлой неделе Газель-Некст была признана лучшим автомобилем года в России. Эксперты коммерческого транспорта оценили ее в 2–3 раза выше,...
Что такое чувырла википедия
Чувырла - почётный дворянский титул, даётся чучундрам заособые заслуги. Этот вопрос уже закрыт. Вы не можете на него ответить. Ответы...
Adblock detector