Изменяем стили для contact form 7. Три готовых решения

Contact-Form7-style2

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

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

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

Смотрите сами:

contact form7

Выглядит не очень. Не правда ли?

К счастью всё это можно легко исправить и подогнать под дизайн Вашего сайта

Я предлагаю вам 3 варианта готовых стилей для Contact Form 7

Куда вносить изменения?

Перед тем как править стили нужно определиться куда вносить изменения.

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

Более надёжным вариантом будет внесение изменений прямо в файл стилей вашей темы. Однако если вы и тему регулярно обновляете и не используете дочернюю тему то и в этом случае файл стилей заменится. Помните об этом и как минимум делайте себе резервные копии вашей темы и сайта в целом.

Первый вариант стиля для Contact Form 7

стили для contact form7

Для этого варианта нам не нужно будет ничего менять в самой форме, достаточно будет просто приписать стили в файл style.css вашей темы.

Для тех кто не помнит в какой папке он лежит вот путь:

Ваш_домен.ru/wp-content/themes/НАЗВАНИЕ ВАШЕЙ ТЕМЫ/style.css

Для того чтобы получить такой результат как на картинке выше приписываем в самом конце файла style.css следующие стили:

Обратите внимание! Что данные стили задаются для всплывающей формы, а если ваша форма просто размещена на странице, то некоторые свойства нужно подправить.
Необходимо увеличить внутренний отступ для .wpcf7. Вместо «padding:0px!important;» задать своё значение, например «padding:20px!important;»
Ширина формы также меняется на ваше усмотрение.

Вы можете изменить цвет фона на свой.
Делается этот вот здесь
меняем цвет фона для contact form 7
Обратите внимание на правило !important — оно должно быть здесь обязательно иначе ваш цвет перебьют стили, которые прописаны в самом плагине. При помощи этого правила мы повышаем приоритет указанного стиля.
Вы также можете поставить на фон формы изображение или градиент.
Для того чтобы поставить изображение замените эту строку на следующую:

background: url(images/form.jpg)!important;

При этом не забудьте загрузить изображение фона в папку images вашей темы.

Ваш_домен.ru/wp-content/themes/НАЗВАНИЕ ВАШЕЙ ТЕМЫ/images/form.jpg

Вот пример с фоном.
contact form7 стили
Для градиента замените эту строку на следующую:

background: linear-gradient(#1B698B, #B8EAE4), #1B698B!important;

Здесь первое значение цвета это верхний цвет, второе это нижний и в конце задаётся однотонный фон на случай если браузер не поддерживает свойство linear-gradient.
Вот как выглядит этот градиент:
фон градиент для contact form7
Для того чтобы при активации полей они подсвечивались мы приписали следующие стили:

Второй ваиант стилизации Contact Form7

второй вариант стилизации contact form7
Для того чтобы реализовать этот вариант помимо стилей нам ещё нужно будет немного доработать код, в котором задаются поля формы.
Для этого переходим в административную часть сайта и открываем меню «Contact form 7» — «Формы» — находим нашу форму и нажимаем «Изменить»
редактирование формы contact form7
Далее удаляем тот код что там есть и вставляем следующий:

contact form7 изменяем форму

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

После добавления кода не забываем сохранить изменения. Теперь в файл стилей дописываем:

Я внесла код комментарии где можно поменять фон и т.д.

Если возникает необходимость поменять ширину формы, то это делается так:

Третий вариант стилей для Contact Form7

третий вариант стилей для cf7
Теперь давайте рассмотрим ещё один вариант оформления стилей для Contact Form7 c использованием подписи полей внутри самого поля (placeholder)
Для этого открываем нашу форму для редактирования и удаляем все поля кроме кнопки отправки сообщения.
Далее добавляем 2 поля типа «text» при этом в поле «Значение по умолчанию» введём Значение нашего поля, например, «Ваше имя»


создаём placeholder

И сразу под этим полем нужно поставить галочку «Use this text as the placeholder of the field»
Если нужно чтобы поле было обязательным для заполнения то ставим галочку возле «Required field»
После этого нужно не забыть перейти на вкладку «Письмо» и подставить значения новых полей в письмо, которое будет приходить администратору.
В моём случае это выглядит так:
редактирование contact form7
У вас будут другие значения шоткодов.
Для того чтобы придать этой форме более аккуратный вид допишем следующие стили:

Стили для вывода сообщений

Ещё один момент это вывод сообщений об ошибках и отправке сообщения.
Для того чтобы стилизовать их нам понадобятся классы «wpcf7-not-valid» для задания стилей тексту, который выводится под полем формы и «wpcf7-response-output» — отвечает за стиль сообщений внизу формы.
Я добавила красную рамку для неправильно заполненных или пустых полей а так же тень и закруглённые углы для выводящихся сообщений. Вы можете дописать в эти классы всё на что хватит вашей фантазии.

Вот результат:

правка стилей contact form7

Помните что если стили заданы в плагине по умолчанию, то они применятся только после того как вы повысите приоритет свойства приписав к нему правило «!important»

На этом у меня всё. Надеюсь что смысл дописания своих стилей Вам понятен. Желаю вам удачи в подгонке стилей под дизайн вашего сайта и терпения. Уверена что у вас всё получится.
Если что пишите в комментарии. Всегда рада на них ответить.

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

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

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

comments powered by HyperComments

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

    • Александр!
      У меня там сделано по принципу как в варианте оформления 2. Сначала нужно вставить HTML код в саму форму при редактировании, а потом дописать в CSS файл стили.
      Код отправила Вам на почту.

  1. Спасибо, удачи Вам!
    Добавляйте ещё материал на сайт :)

    • И Вам удачи! Над добавлением материалов работаю :) Так что заходите как нибудь ещё.

  2. Спасибо за информацию. Очень интересно и полезно. А можно и мне выслать код такой формы, как у Вас в контактах. 

    • Максим, отправила Вам письмо с кодом на почту. Если будут вопросы — пишите сюда.

    • Здравствуйте, Дмитрий!

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

  3. Добрый день, Юлия! Согласна с предыдущими комментариями. Информация очень полезная. Спасибо, что делитесь своими знаниями и кодами) Ожидаю очередной пост с вариантами стилей для Contact form 7. На рассылку новостей уже подписалась) Желаю успехов) 

  4. Здравствуйте, а что если не получается поменять стиль кнопки — судя по всему кнопка использует стиль установленной вордпресс темы. !important не помогает…

    • Здравствуйте! Дайте, пожалуйста ссылку на Ваш сайт (на страницу с формой). Там нужно поэкспериментировать с селлектором CSS. Не видя сайта не смогу Вам сходу подсказать.

  5. Спасибо за быстрый ответ. Сайт я пока настраиваю локальном сервере (его нет в интернете) — т.е. я начинающий. Вот ссылка на тему вордпресс которую я использую. На этой странице  тема использует плагин contact form 7 . Вообще даже если я добавляю свои варианты формы на других страницах — все равно не получается менять цвет кнопки и  другие настройки

    http://www.gt3themes.com/wordpress-themes/pure/contacts/

    И еще вопрос — если к примеру не менять кнопку — а просто ее выровнять относительно всей формы, как это сделать (к примеру передвинуть к середине формы, а не слева как сейчас)?

  6. Только сейчас понял, что я не только стиль (css) не могу поменять у кнопки, но даже текст на ней (т.е. в окне настройки формы прописываю своей текст — а он не меняется)

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

      Для того чтобы изменить цвет данной кнопки пропишите в файл стилей темы следующий код:

      .temp_submit_cf7 > div {
      background: red; /*вместо red пишете цвет, который Вам нужен*/
      margin-top: 20px; /*отступ сверху задавать не обязательно, так что если что удалите*/
      }

      Для выравнивания по центру в style.css дописываем:

      .temp_submit_cf7{
      width:100%!important;
      text-align:center;
      }

      • Не могли бы вы объяснить, зачем мы ставим .temp и может все-таки это поможет побороть текст на кнопке.

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

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

    • Что касается текста на кнопке, то там чтобы его исправить нужно либо руссифицировать тему, либо лазить в коде и искать откуда он переменную с этим текстом берёт и там править.

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

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

  7. и у меня возможно глупый вопрос — должна ли форма отправлять письма если я пока делаю сайт на локальном сервере, т.е. моего сайта нет в интернете. Или я смогу проверить отправку только после того, как размещу сайта на домене в интернете?

    • На локальном сервере отправка почты не работает! Поэтому проверить Вы сможете только после переноса на реальный хостинг в интернете.

  8. Т.е. правильно я понимаю, нужно искать тему, в которой нет формы обратной связи? (хотя я не думаю, что найду такую) или просто конкретно в этой теме такая сложность и обычно таких проблем не возникает?

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

    А по поводу

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

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

    • Я установила эту тему к себе на тестовый сайт, где по умолчанию везде русский язык выставлен. Когда я пытаюсь отправить сообщение с этой формы, то все сообщения выводятся на английском. Вот скриншот http://prntscr.com/amp9k0

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

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

    • Проблема заключается в том что тема не русифицирована и у неё сложная структура, из-за чего вносить некоторые изменения может быть достаточно сложно. Вот и всё :) Всё это решаемо.

  10. Здравствуйте! Спасибо большое за статью, благодаря ей изменила форму обратной связи.

    Осталось несколько вопросов:

    1. Хочу изменить размер кнопки отправить, подскажите, как это сделать?

    • Здравствуйте, Наталья!
      Для того чтобы изменить размер кнопки можно в файл стилей Вашей темы в самом конце дописать следующее:

      .wpcf7-submit{
      width:300px!important; /*ширина кнопки*/
      height:30px!important; /*высота кнопки*/
      }

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

  11. http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif Здравствуйте! Спасибо большое за статью, благодаря ей изменила форму обратной связи.

    Осталось несколько вопросов:

    1. Хочу изменить размер кнопки отправить, подскажите, как это сделать?

  12. Здравствуйте Юлия ! Большое спасибо за статью !http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    • И Вам спасибо за комментарий!

  13. Здравствуйте Юлия. Мои Вам комплименты.

    Помогите с настройкой формы contact form 7. Ни как не могу найти видео как настраивать форму чтобы поля были разделены на столбцы. Пример:

    ФИО ( первая строчка во всю ширину)

    Контактный телефон              Ваш email      (это вторая строка, 2 поля в одной строке)

    Выпадающие меню                  Выпадающие меню (это третья строка, 2 поля в одной строке)

    Подскажите как это сделать. Может у Вас в планах снять видео? Думаю многим будет это полезно.

    С Благодарностью за Ваш труд. Всех Благ!!!

    • Здравствуйте, Юрий! К сожалению видео по данной теме у меня пока нет :( Но есть статья, в которой я даю код для размещения полей формы в несколько столбцов — вот ссылка
      Там в первом примере рассматривается как сделать поля в 2 столбца и в один. Используя код из этого примера можно реализовать форму подобную той, которая Вам нужна.

  14. Здравствуйте. Спасибо за ваше решение со стилями контактной формы. Очень ценный опыт ). У меня второй вариант шотокодов не работает со вторым вариантом кода. Хотя если ставить с первым то все нормально. Есть еще проблема. Контактная форма у меня находится в сайтбаре справа, и при просмотре с экрана другого размера, часть формы начинает уходить за кран. Если есть у вас решение этой проблемы буду благодарен )

    • Здравствуйте, Евгений!
      По поводу размера формы на маленьких экранах. Попробуйте в CSS задать ширину формы не в пикселях а в процентах. Иди вместо width: 280px; прописать max-width: 280px; width:90%;
      Гарантировать что это сработает не могу так как здесь многое зависит от стилей темы. В идеале прописать ряд свойств и медиазапросов для формы чтобы сделать её адаптивной.
      По поводу проблемы с шорткодами во втором варианте. Что именно не работает? В чём это выражается?

  15. Спасибо за ваш ответ и рекомендации. Я пробовал задавть ширину и в процентах и в пикселях. Что толко не пробовал. Ничего пока не получилось. Понял что проблема не с контактной формой скорее всего а с областью. Никак ее не зафиксировать. Возможно если бы я был более опытным то смог бы. Вот ставишь например 25 процентов область от ширины экрана и она остается 25 процентов. В коде задавать ширину вообще не работает. Высота работает и в процентах и в пикселях. А вот на ширину никак не реагирует. Тема «Fluida».

    Не помню что точно не получилось с шотокодами вторыми. Помоему верстка поехала. Я оставил помоему 3-й вариант.

    • А ссылку на Ваш сайт можете дать?

  16. Да. Только он в самом начале и я только знакомлюсь с этой CMS, так что делаю потихоньку. Раньше работал с другой системой. Она значительно удобнее.

    Вот ссылка  http://www.maff-stroy.ru

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

  17. Скажите, а как разместить поля формы горизонтально (в строчку)?

  18. Здравствуйте!

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

    п.с. в программировании 0, причем полный.

     

    • Спасибо за комментарий!

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

Ваш 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