Как настроить стиль контактной формы 7, чтобы он соответствовал вашему веб-сайту

Contact Form 7 - один из самых популярных плагинов WordPress за всю историю существования более миллиона активных установок. Его популярность, вероятно, во многом связана с правдой, стоящей за его описанием: «Простой, но гибкий».

Контактная форма 7 позволяет создавать несколько контактных форм, используя только простую разметку HTML (которую она генерирует для вас). После создания каждую форму можно быстро развернуть, разместив соответствующий шорткод там, где вы хотите, чтобы форма отображалась; в области страницы, публикации или виджета. Сообщения, отправленные через формы, отправляются на адрес электронной почты, указанный в настройках плагина, а борьба со спамом осуществляется с помощью поддержки CAPTCHA и Akismet.

Контактная форма 7 настолько проста, что кажется, что ее может эффективно использовать буквально каждый. Стиль тоже должен быть простым. Но, возможно, для некоторых это слишком просто. По умолчанию плагин Contact Form 7 не стилизует свои формы. Любой стиль, который у них есть, является результатом стилей по умолчанию, присутствующих в таблице стилей темы WordPress.

Обычно в результате получается что-то довольно простое, например:

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

В сегодняшнем посте я собираюсь поделиться рядом советов, которые откроют широкий спектр возможностей стилизации Contact Form 7 для всех, кто использует любую тему.

Как настроить стиль контактной формы 7, чтобы он соответствовал вашему веб-сайту

Подпишитесь на наш канал Youtube

Где редактировать контактную форму 7 CSS (и почему)

Важно, чтобы при добавлении пользовательского CSS вы не добавляли его в таблицу стилей контактной формы 7 или родительской темы. Любые изменения или дополнения, которые вы сделаете там, будут перезаписаны, как только тема и / или плагин будут обновлены.

Вместо этого вы захотите добавить приведенный ниже CSS в CSS вашей дочерней темы. Вы также можете использовать настраиваемую функцию CSS в Jetpack, или, если ваша тема предоставляет раздел в своей панели администратора для настраиваемого CSS, вы также можете использовать его.

Хорошо, теперь, когда мы знаем, где разместить стили, которые мы рассмотрим ниже, приступим!

Как создать стили формы для всего сайта

Начнем с внесения некоторых общих изменений, которые будут применяться ко всей форме. Мы можем сделать это, используя селектор классов .wpcf7, а затем добавив стили под ним.

(Я также настоятельно рекомендую вам разместить закомментированный заголовок, который я написал ниже, в вашей таблице стилей, чтобы обозначить, где начинаются ваши стили Контактной формы 7.)

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

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

Как видите, есть некоторые проблемы с интервалами. Чтобы исправить это, вам нужно отрегулировать поля между рамкой и внутренними элементами формы. Вы можете сделать это с помощью приведенного ниже кода.

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

На моем тестовом сайте это привело к следующему:

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

Как создать стили полей формы для всего сайта

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

Приведенный ниже код расширит область сообщения до желаемой ширины (после настройки). В этом примере я установил 95%, так как это лучше всего выглядело в моем воображаемом сценарии использования. Вы также можете установить его в соответствии с вашими потребностями - используя процентное или фиксированное количество пикселей.

.wpcf7-textarea {

width: 85%;

}

Вы также можете настроить ширину других полей, отрегулировав селектор класса ввода .

.wpcf7 input {

width: 50%;

}

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

.wpcf7-text {
width: 50%;
}

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

Я лично не хотел менять цвет кнопок, но думаю, что это, скорее всего, еще одно частое желание. Поэтому, если вы хотите изменить цвет кнопки, вы можете использовать приведенный ниже CSS для экспериментов.

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

С этими фрагментами CSS каждая форма, созданная с помощью Contact Form 7, будет выглядеть как последнее изображение выше. Но что происходит, когда вы хотите, чтобы одна форма, в частности, отличалась от всех остальных?

Как создать определенную форму

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

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

Затем, используя функцию проверки элементов Google Chrome или что-то подобное в другом браузере, взгляните на код формы. Используя это, вы найдете полный идентификатор формы.

В моем случае идентификационный номер в моем шорткоде был 4407 . Полный ID оказался wpcf7-f4407-p4405-o1 . Это означало, что я мог вносить дальнейшие изменения только в эту конкретную форму, используя приведенный ниже код с различными критериями, которые отличались от настроек всего моего сайта.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

Как стилизовать определенные поля

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

Когда вы создаете тег для размещения в конструкторе форм, вы заметите, что есть два варианта создания идентификатора, класса или того и другого.

В этом примере я решил создать класс с именем custom-field . Если вы сделаете то же самое (или что-то подобное), вы сможете стилизовать только это поле, используя свой новый идентификатор (или класс), как показано ниже.

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

Как создавать собственные макеты форм для флажков и радиальных кнопок

По умолчанию флажки и радиусы отображаются слева направо.

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

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

.wpcf7-list-item {
display: block;
}

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

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

Бонусный совет: как удалить заголовки полей и использовать вместо них текст-заполнитель

Этот совет не требует использования CSS, как предыдущие, а скорее простой настройки разметки, используемой в конструкторе форм Contact Form 7.

Иногда необязательно иметь заголовки полей, особенно когда вы можете поместить в сами поля текст-заполнитель, который объясняет, какая информация там принадлежит.

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

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

Результат - более чистая форма с меньшим количеством беспорядка.

В заключение

Я надеюсь, что в приведенных выше примерах я показал, что плагин Contact Form 7 легко настраивается. Правда, это требует немного повозиться, но для бесплатного плагина, которого можно ожидать.

Я думаю, что отсутствие параметров стиля по умолчанию - большая часть того, почему плагин так хорошо работает для многих. Так что будет справедливо, если любой, кто получает от этого большую пользу, кто хочет большего стиля, посвятит несколько минут тому, чтобы отказаться от версии одного из приведенных выше примеров кода.

У вас есть собственные советы по стилю Contact Form 7? Есть какие-нибудь избранные, которыми вы бы хотели поделиться? Напишите нам в комментариях ниже!

Миниатюра статьи через Dmitry Lemon5ky // shutterstock.com