Как настроить CSS контактную форму 7

Видео: Contact form 7 — настройка формы обратной связи для WordPress. Форма заявки Вордпресс

Содержание

направления
чаевые
предупреждение
Что вам нужно

Контактная форма 7 - это плагин платформы публикации WordPress, который позволяет пользователям быстро создавать пользовательские контактные формы. Хотя формы легко создавать и развертывать, их поля настраиваются минимально, что позволяет интегрировать их с любым сайтом. Создайте свои собственные стили и реализуйте их в полях формы, сгенерированных этим плагином.

направления

Настройте стиль полей Контактной формы 7 с помощью CSS (Comstock / Comstock / Getty Images)

Откройте таблицу стилей темы вашего WordPress и прокрутите до конца. Создайте аннотированную область, чтобы вы могли легко найти свой код. Пример:

/ Здесь начинается мой собственный код CF7 /
Настройте стили ваших полей и текстовых областей. Для этого создайте запись в вашей таблице стилей. Пример:

.wpcf7 input [type = "text"], .wpcf7 areadotexto {}

Добавьте границы, фоны, отступы и размеры текстовых элементов. Примеры:

.wpcf7 input [type = "text"] {background: нет повторить прокрутку 0 0 # F9F9F9; граница: 1px solid # 8E9BA9; обивка: 5px; ширина: 200 пикселей; }
Настройте стили выпадающего меню и меню выбора.Для этого создайте запись в вашей таблице стилей. Пример:

.wpcf7 input [type = "select"] {

}

Настройте поля выбора аналогично текстовым полям. Поля выделения не такие широкие, как текстовые поля, поэтому добавьте несколько дополнительных пикселей к вашей ширине. Пример:

.wpcf7 input [type = "selected"] {background: нет повторить прокрутку 0 0 # F9F9F9; граница: 1px solid # 8E9BA9; обивка: 5px; ширина: 210 пикселей; }
Настройте стиль вашей кнопки отправки. Для этого создайте запись в вашей таблице стилей. Пример:

.wpcf7 input [type = "submission"] {

}

Настройте кнопку отправки, чтобы дополнить внешний вид вашего сайта (он должен по-прежнему выделяться на фоне). Пример красной кнопки отправки:

.wpcf7 input [type = "submission"] {background-color: # 990000; рамка: 4px solid # B34040; цвет: #FFFFFF; }
Сохраните изменения в своей таблице стилей и перенесите данные в папку темы.

чаевые

Попробуйте разные стили и разные цвета рамки.
Сделайте новую проверку форм в Firefox, Safari и Internet Explorer, потому что каждый браузер предоставляет немного разные поля ввода.

предупреждение

Добавляйте собственный CSS в таблицу стилей вашей темы, а не в таблицу стилей плагинов. Если вы сделаете это, при обновлении плагина настройка файлов в вашей папке может быть потеряна.