Привет! Сегодня я покажу вам очень полезный плагин WordPress для настройки внешнего вида контактной формы Contact form 7. Вы можете очень просто и быстро изменить CSS стили формы обратной связи. Можно изменить цвет текста, фона, кнопки, границ, установить фото на фон и т.д. Смотрите инструкцию далее и пишите комментарии, если вам что-то не понятно. Поехали!

 

Установить плагин CF7 Customizer вы можете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, установите и активируйте плагин.

 

CF7 Customizer плагин WordPress

 

Далее, в админ-панели, слева в боковой панели, перейдите на страницу: Внешний вид – Настроить.

Обратите внимание. На вашем сайте, уже должен быть установлен плагин Contact form 7. Форма должна отображаться на сайте.

 

 

Далее, слева у вас откроется окно с настройками. Нажмите на вкладку CF7 Customizer. Справа на сайте откройте страницу где стоит форма связи, чтобы вы могли сразу видеть все изменения.

 

настройка формы

 

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

 

стили изменить

 

Form Text & BG Colors

  • Text Color, цвет текста обозначения полей;
  • Background Color, цвет фона текста названия полей;
  • Background Image, изображение в виде фона;
  • Font Size, размер шрифта, текста.

 

цвет текста

 

Обратите внимание. Фото будет фоном только для области, где отображаются названия полей.

 

фото фон форма

 

Form Padding, Margin & Border

  • Padding, отступ в пикселях от полей формы;
  • Margin, можно расширить границы (форма станет меньше);
  • Border, увеличить размер бордюра;
  • Border Radius, изменить радиус бордюра;
  • Border Color, цвет бордюра, границы.

 

изменить отступ граница

 

Input Fields Styling

  • Make input fields full width? Сделать поля ввода на всю ширину?
  • Input Text Color, изменить цвет текста ввода;
  • Input Background Color, изменить цвет фона текста ввода;
  • Padding, отступы от полей ввода информации;
  • Margin Between Input Fields, разница между полями ввода;
  • Font Size, размер текста;
  • Input Fields Border, граница полей ввода;
  • Input Fields Border Radius, радиус границы полей ввода;
  • Input Field Border Color, цвет границы полей ввода.

 

цвет поле форма плагин

 

Button Styling

  • Full Width Button, сделать кнопку на всю ширину?
  • Button Text Color, цвет текста в кнопке;
  • Button Background Color, цвет фона кнопки;
  • Button Hover Text Color, цвет текста в кнопке при наведении;
  • Button Hover Background Color, цвет фона кнопки при наведении;
  • Border, бордюр, граница;
  • Border Radius, радиус границ;
  • Button Border Color, цвет границ кнопки;
  • Button Border Hover Color, цвет границ кнопки при наведении.

 

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

 

сохранить изменения