Меняем внешний вид Contact form 7

Меняем внешний вид Contact form 7

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

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

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

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

Плагин для изменения внешнего вида Contact Form7

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

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

Меняем внешний вид Contact form 7

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

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

cfs2

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

Меняем внешний вид 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 — высота строк в форме или междустрочный интервал, задаётся в пикселях.

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

внешний вид Contact Form7

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

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

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

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

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

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

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

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

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 — внешний отступ.

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

text-area

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

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

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

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

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

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

Стили меток

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

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

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

изменяем внешний вид Contact form 7

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

Меняем внешний вид Contact form 7

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

Меняем внешний вид Contact form 7

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

Меняем внешний вид Contact form 7

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

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

Меняем внешний вид Contact form 7

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

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

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

Например:

Если у вас остались какие то вопросы, то советую посмотреть видеоинструкцию, которую я для вас подготовила.

На этом пожалуй всё :)

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

Вот теперь точно всё! Удачной вам стилизации Contact Form 7 !

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

12 комментариев

  1. Наконец-то я теперь знаю как легко менять стили этой формы. Спасибо!

    • Юлия, спасибо за ваш труд. Приятно читать работу специалиста. Очень подробно и понятно. Все получилось. Немного поэксперементировал, но оно того стоило. Отличная на мой взгляд и на моем сайте форма получилась. Еще раз благодарен и спасибо за данную статью.

      • Михаил, очень рада что Вам помогла моя статья! Спасибо Вам за добрые слова :)

  2. Огромное количество благодарностей Вам за эту статью! Мне, как начинающему, пришлось перелопатить тонну материала в поисках простых способов изменения гигантоманских форм обратки,пока нашёл этот мануал. На нём остановился,изменил и радуюсь. СПАСИБО!!!http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gifhttp://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif

    • Юрий, рада что смогла помочь http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif!

      Желаю Вам успехов в работе над Вашим сайтом!

  3. Здравствуйте, у меня вопрос — как узнать полное id своей формы

    [contact-form-7 id="382" title="Горизонтальная форма html_new style"] это шорткод

  4. Я о том id который вы вводили, для того чтобы применить стили к конкретной форме, а не ко всем

     

    CSS
    #wpcf7-f159-p29-o1 .wpcf7-form {
    width:700px;
    }

    • Здравствуйте, Евгений!

      Для этого лучше воспользоваться инспектором кода, который сейчас есть практически в любом из наиболее популярных браузеров.  Сейчас готовлю для вас статью на эту тему, так как коротко ответить на этот вопрос не получится http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif.

      Она будет опубликована завтра (30.03.2016)

      Если будут вопросы — задавайте в комментариях.

  5. Спасибо за ответ. Я сам уже разобрался, но думаю статья будет полезна остальным пользователям

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

  7. Юлия, а как горизонтально расположить поля в Contact Form 7 ?

    Хочу мне нужна форма в виде таблицы из 5 столбцов в несколько строк.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif