Как безопасно переопределить стили Contact Form 7?

Вот несколько способов достичь этого.

Если вы используете собственную тему, вы можете отредактировать файл style.css и внести необходимые изменения стилей.

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

Вы можете создать собственный файл стилей и просто добавить ссылку на него в файле header.php используемой темы.

Мой сайт также использует Contact Form 7 с пользовательскими стилями и Bootstrap: http://splash.inting.org/wp/

Вот доступные варианты:

1) При создании формы заключайте поля в другие HTML-элементы (с соответствующими классами), как показано ниже:

<div class="control-group">
    <label class="control-label" for="input01">Имя*</label>
    <div class="controls">
        [text* FirstName id:FirstName class:input-xlarge]
    </div>
</div>

Вы также можете определять ID и классы для элементов Contact Form 7, как показано выше.

2) Создайте файл custom.css и обновите header.php текущей темы, убедившись, что таблица стилей добавляется последней (непосредственно перед закрытием заголовка). Если она добавлена последней, вероятность переопределения её стилей темы или плагина будет ниже.

3) Используйте !important в определениях CSS-классов и ID, чтобы они не переопределялись другими стилями.

Я просто отключил загрузку встроенной таблицы стилей плагина. Это описано в документации на http://contactform7.com/controlling-behavior-by-setting-constants/ и выглядит следующим образом:

/* Настройки для Contact Form 7 */
define('WPCF7_LOAD_CSS', false);

Этот фрагмент кода нужно добавить в файл wp-config.php.

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

Вот пример моих стилей для контактной формы:

.wpcf7-form { margin-top: 1em; }
.wpcf7-form fieldset p { margin: 0; }
.wpcf7-form label { display: block; float: left; clear: left; width: 150px; text-align: right; margin-right: 5px; margin-bottom: 1.5em; }
.wpcf7-form input[type="text"], .wpcf7-form textarea { display: block; float: left; width: 250px; margin-top: 0; }
.wpcf7-form textarea { width: 450px; }
.wpcf7-form fieldset.submit { margin-top: 1em; position: relative; }
.wpcf7-form input[type="submit"] { display: block; margin-left: 154px; width: 150px; }

.wpcf7-display-none { display: none; }
.wpcf7-response-output { margin: 0 155px; border: 1px solid #000; padding: 0.5em; top: -1em; position: relative; }
.wpcf7-mail-sent-ok { border-color: #398f14; }
.wpcf7-mail-sent-ng { border-color: #ff0000; }
.wpcf7-spam-blocked { border-color: #ffa500; }
.wpcf7-validation-errors { border-color: #f7e700; }
.wpcf7 img.ajax-loader { margin: 1em 0 0 155px; }

span.wpcf7-form-control-wrap { position: relative; float: left; }
span.wpcf7-not-valid-tip { position: absolute; top: 20%; left: 20%; z-index: 100; background: #fff; border: 1px solid #ff0000; font-size: 0.9em; padding: 0.2em; }
span.wpcf7-not-valid-tip-no-ajax { color: #f00; font-size: 10pt; display: block; }

Префикс .wpcf7- здесь важен, так как стили применяются только к формам, созданным этим плагином.

Существует распространённое заблуждение, что плагин Contact Form 7 (CF7) управляет внешним видом форм CF7 через свои CSS-стили. На самом деле плагин Contact Form 7 использует лишь минимальную CSS-стилизацию, чтобы формы CF7 гармонично сочетались с большинством сайтов.

Фактический внешний вид форм CF7 на вашем сайте во многом зависит от используемой темы WordPress и CSS-стилей, которые она применяет к стандартным HTML-элементам форм. Чтобы изменить внешний вид форм CF7 в соответствии с вашими требованиями, вам потребуется настроить CSS, используемый текущей темой для этих HTML-элементов форм.

Используйте дочернюю тему для внесения изменений в CSS форм CF7

Самый распространённый и предпочтительный способ изменения стилей форм CF7 — создание дочерней темы. Все необходимые изменения вносите в файл style.css дочерней темы, а не напрямую в style.css родительской темы. Таким образом, ваши изменения не пропадут при обновлении темы.

Файл style.css дочерней темы обычно импортирует все стили из родительской темы, включая следующий CSS-код в начале файла style.css дочерней темы.

/* Импорт родительской темы */
@import url('../parent-theme/style.css');

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