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

Категория: Wordpress, Опубликовано: 2016-01-22
Автор: Юлия Гусарь

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

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

Навигация по статье:

Обзор плагина Сontact Form7 Style
Меняем внешний вид Contact Form7 при помощи собственного стиля.
Изменяем внешний вид Contact Form 7 без плагина.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стили меток

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

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

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

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

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

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

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

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

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

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

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

Например:

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

#wpcf7-f159-p29-o1 .wpcf7-form {

width:700px;

}

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

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

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

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

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

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

42 комментария

Юлия

02.02.2016 в 20:51 Ответить

Наконец-то я теперь знаю как легко менять стили этой формы. Спасибо!
- Михаил
  
  08.02.2016 в 15:36 Ответить
  
  Юлия, спасибо за ваш труд. Приятно читать работу специалиста. Очень подробно и понятно. Все получилось. Немного поэксперементировал, но оно того стоило. Отличная на мой взгляд и на моем сайте форма получилась. Еще раз благодарен и спасибо за данную статью.
  - Юлия Гусарь
    
    08.02.2016 в 16:02 Ответить
    
    Михаил, очень рада что Вам помогла моя статья! Спасибо Вам за добрые слова :)
Юрий

13.03.2016 в 17:33 Ответить

Огромное количество благодарностей Вам за эту статью! Мне, как начинающему, пришлось перелопатить тонну материала в поисках простых способов изменения гигантоманских форм обратки,пока нашёл этот мануал. На нём остановился,изменил и радуюсь. СПАСИБО!!!
- Юлия Гусарь
  
  13.03.2016 в 21:47 Ответить
  
  Юрий, рада что смогла помочь !
  
  Желаю Вам успехов в работе над Вашим сайтом!
Евгений

29.03.2016 в 16:00 Ответить

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

[contact-form-7 404 "Not Found"] это шорткод
Евгений

29.03.2016 в 16:02 Ответить

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

CSS
#wpcf7-f159-p29-o1 .wpcf7-form {
width:700px;
}
- Юлия Гусарь
  
  30.03.2016 в 00:12 Ответить
  
  Здравствуйте, Евгений!
  
  Для этого лучше воспользоваться инспектором кода, который сейчас есть практически в любом из наиболее популярных браузеров. Сейчас готовлю для вас статью на эту тему, так как коротко ответить на этот вопрос не получится .
  
  Она будет опубликована завтра (30.03.2016)
  
  Если будут вопросы — задавайте в комментариях.
Евгений

30.03.2016 в 11:01 Ответить

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

11.04.2016 в 07:54 Ответить

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

02.08.2016 в 13:31 Ответить

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

Хочу мне нужна форма в виде таблицы из 5 столбцов в несколько строк.
- Юлия Гусарь
  
  02.08.2016 в 14:03 Ответить
  
  Для этого их нужно либо оборачивать в блоки div и задавать им в CSS свойства width:20%; float:left;, либо при создании каждого поля задавать ему класс и потом для этого класса задавать width:20%;. Вот статьи по стилизации Contact form 7:
  1. Готовые стили для Contact Form 7
  2. Изменяем стили для contact form 7. Три готовых решения
Антон

21.12.2016 в 21:18 Ответить

Здравствуйте, никак не получаетя сделать высоту для textarea, значение height не работает…в чем может быть проблема???
- Юлия Гусарь
  
  30.12.2016 в 14:00 Ответить
  
  Здравствуйте, Антон! Нужно более детально смотреть Ваш сайт. Скорее всего проблема в стилях темы.
Евгений

07.03.2017 в 12:57 Ответить

Юлия, скажите пожалуйста, как сделать прозрачную форму обратной связи! Ни где не могу найти все пересмотрел, но не получается ни чего найти. Пожалуйста ПОМОГИТЕ!!»
- Юлия Гусарь
  
  12.03.2017 в 00:48 Ответить
  
  Здравствуйте! Я не совсем поняла что Вы имеете ввиду под прозрачной формой, но в CSS для задания уровня прозрачности есть свойство opacity. Например так
  .wpcf7{
  opacity: 0.5;
  }
  Значение меняется от 0 до 1.
  Можете описать более подробно или показать конкретный пример с прозрачной формой?
  }
Елена

16.03.2017 в 11:53 Ответить

Юля добрый день. Позвольте спросить. Для вывода «читайте также» вы использовали плагин? если да, подскажите какой? Спасибо, очень оригинально.
- Юлия Гусарь
  
  24.03.2017 в 22:58 Ответить
  
  Здравствуйте! К сожалению так и не получилось найти хороший плагин для вывода подобных статей. Пришлось делать кодом.
Дарья

20.03.2017 в 13:17 Ответить

Добрый день. К сожалению не понятно, как все таки разместить две разные формы на одной странице

вернее у меня одна форма вертикальная

а вторая горизонтальная и я не могу прописать для второй формы горизонтальное положение.

К тому же прочла, что id меняется в зависимости от страницы.Тогда как массово прописать?
- Юлия Гусарь
  
  24.03.2017 в 22:52 Ответить
  
  Здравствуйте! Не могли бы вы схематически, или на примере показать, как вы хотите разместить формы?
Дарья

20.03.2017 в 13:31 Ответить

Готовые стили для Contact Form 7

У вас здесь есть пример

я пыталась его адаптировать, так как вертикальная форма у меня уже стоит

но почему то стили ложатся вообще на весь сайт.
- Юлия Гусарь
  
  24.03.2017 в 22:51 Ответить
  
  Тяжело ответить, не посмотрев код. Скорее всего вы задаете стили не для тех классов.

Юлия, здравствуйте!

Чет мучался, так и не получилось применить стили чрез -css

Вставлял вот этот код:

.wpcf7 {
padding: 45px 45px 5px 45px !important;
background-color: rgba(0, 0, 0, 0.7);
width: 250px;
}
.wpcf7 p {
padding-bottom: 10px;
}
#formContainer &gt;
h3 {
color: white;
text-align: center;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
display: block;
margin: 0;
width: 100%;
font-family: sans-serif;
font-size: 18px;
appearance: none;
box-shadow: none;
border-radius: none;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
.left {
width: 48%;
float: left;
}
.right {
width: 48%;
float: right;
}
.wpcf7-submit {
background-color: rgb(250, 104, 57);
color: white;
margin-top: 30px;
padding: 10px;
font-size: 15px;
border: none;
width: 100%;
}
input[type="submit"] {
border-radius: 25px;
}

.wpcf7 {

padding: 45px 45px 5px 45px !important;

background-color: rgba(0, 0, 0, 0.7);

width: 250px;

}

.wpcf7 p {

padding-bottom: 10px;

}

#formContainer >

h3 {

color: white;

text-align: center;

}

.wpcf7 input[type="text"],

.wpcf7 input[type="email"] {

display: block;

margin: 0;

width: 100%;

font-family: sans-serif;

font-size: 18px;

appearance: none;

box-shadow: none;

border-radius: none;

padding: 10px;

border: solid 1px #dcdcdc;

transition: box-shadow 0.3s, border 0.3s;

}

.left {

width: 48%;

float: left;

}

.right {

width: 48%;

float: right;

}

.wpcf7-submit {

background-color: rgb(250, 104, 57);

color: white;

margin-top: 30px;

padding: 10px;

font-size: 15px;

border: none;

width: 100%;

}

input[type="submit"] {

border-radius: 25px;

}

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

Может подскажите куда копать?

В общем сел за плагин CF7 стайл и возник еще вопрос… как убрать шторку растягивания формы для текста?

Юлия Гусарь

28.03.2017 в 23:27 Ответить

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

border:1px solid red!important;

Если вы правильно обращаетесь к элементу, рамка появиться, а если нет, то вы пишите стили не для того класса.
- Андрей
  
  29.03.2017 в 01:33 Ответить
  
  С одним разобрался.
  
  Спасибо за подсказку!)
  
  В общем тема- BeTheme, получается id-стили надо добавлять в элементах, через просто css почему то не хочет отображать.
  
  Хотя возможно в самой форме ошибка? \Оставлю код мб кому-то пригодится.
  
  <div id=»formContainer»>
  
  <h3>пам-пам</h3>
  
  <p>[text* text-118 placeholder «Ваше имя»]</p>
  
  <p>[tel* tel-263 placeholder «Ваш телефон»]</p>
  
  <p></p>
  
  <div class=»left»>
  
  [date date-844 date-format:mm/dd/yy first-day:1 «дата»]
  
  </div>
  
  <div class=»right»>
  
  [time time-624 time-format:HH:mm «время»]
  
  <br>
  
  <p>[submit «Отправить»]</p>
  
  Благодарю за такую быструю реакцию)
  
  Юлия, а по поводу уголка за который можно растянуть форму как убрать?
  - Юлия Гусарь
    
    31.03.2017 в 18:42 Ответить
    
    Честно говоря, мне ни когда не приходилось убирать этот уголок. Но если вы зададите для .wpcf7-textarea максимальную высоту , например:
    .wpcf7-textarea{
    max-height:200px!important;
    }
    То больше, чем на заданное значение растянуть поле не получится.
    - Андрей
      
      03.04.2017 в 14:20 Ответить
      
      Большое спасибо, Юлия!)
    - Юлия Гусарь
      
      04.04.2017 в 00:00 Ответить
      
      Не за что)
    - Андрей
      
      03.04.2017 в 14:23 Ответить
      
      Ссылочка ваша на форму входа перекидывает
    - Юлия Гусарь
      
      04.04.2017 в 00:00 Ответить
      
      Извините, эта ссылка не для вас была. Сама не пойму откуда она взялась.

александр

07.07.2017 в 21:23 Ответить

пробовали делать фон из картинки? у меня почему-то не вставляется…
- Юлия Гусарь
  
  07.08.2017 в 13:56 Ответить
  
  У меня получается поставить. Попробуйте задать фон для классы блока в котором находится форма.
Константин

04.11.2017 в 22:31 Ответить

всем привет!

а как привязать емеилы к выпадающему списку адресатов получателей?

спасибо!
- Юлия Гусарь
  
  01.12.2017 в 20:29 Ответить
  
  Для этого можно в поле «Кому» вставить шорткод поля select, в котором у Вас выпадающий список с e-mail выводится
Сергей

11.07.2018 в 09:28 Ответить

Юлия, добрый день!

Настроил форму с помощью Сontact Form7 Style. При смене шаблона сайта, форма CF7 искажается. Меняются шрифты, расстояния между полями и др. Как сделать что бы форма CF7 была постоянной и не менялась при смене шаблона сайта?
Вадим

18.10.2018 в 18:21 Ответить

Здравствуйте, Юлия!

Скажите пожалуйста, все стили CSS прописываются исключительно в Теме style.css? У меня тема Costomizr. Всё что туда вставляю, не работает.
- Юлия Гусарь
  
  18.12.2018 в 13:40 Ответить
  
  Здравствуйте, Вадим! Посмотрите вот эту статью //impuls-web.ru/pochemu-ne-rabotayut-css-stili/
  Возможно там есть решение Вашей проблемы.
Елена

29.01.2019 в 13:04 Ответить

Добрый день! Спасибо за отличную статью!

Только вот нигде не найду как изменить вид кнопки для закрытия формы (н-р, человек открыл форму, но передумал отправлять). Хочу изменить на крестик в правом верхнем углу, вместо слова «ЗАКРЫТЬ» (как у меня) в левом нижнем углу.
- Юлия Гусарь
  
  29.01.2019 в 13:30 Ответить
  
  Здравствуйте, Елена! За кнопку «закрыть» отвечает на ContactForm7, а плагин для создания всплывающих окон, который Вы используете. Посмотрите настройки этого плагина, возможно там это можно изменить.
Антон

28.03.2019 в 00:25 Ответить

Добрый день, Юлия с недавнего времени CF_7 выходит за границы всплывающего окна, не сталкивались с таким? http://prntscr.com/n3udkw
- Юлия Гусарь
  
  10.04.2019 в 00:16 Ответить
  
  Здравствуйте! А это только в этой теме так или с другими темами тоже она так себя ведёт? Есть подозрение что конфликтует со стилями темы.
Антон

10.04.2019 в 00:51 Ответить

Astra+cf7+Popup Maker, причём cf7 менял на другую форму всё равно едет/

Удалил их, поставил другой попап и другую форму

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

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

Навигация по статье:

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

Меняем внешний вид Contact Form7 при помощи собственного стиля.

Изменяем внешний вид Contact Form 7 без плагина.

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

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

42 комментария

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

Подробнее в Wordpress

Плавная прокрутка страницы до якоря. Пошаговая видео инструкция