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

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

Здравствуйте, дорогие читатели моего блога!

После выхода моей статьи «Изменяем стили для contact form 7. Три готовых решения» мне на почту пришло много писем с просьбами добавить ещё некоторые распространённые варианты оформления форм обратной связи.

Поэтому в этой статье я покажу ещё несколько вариантов оформления Contact form 7 и дам готовые стили для использования на вашем сайте.

Первый вариант оформления.

вариант оформления Contact form7

В данном варианте нужно будет вносить изменения как в файл стилей темы, так и в саму форму.

Алгоритм внедрения данного оформления будет следующим:

  1. 1. Заходим в административную часть сайта
    Сontact Form7 – Формы
  2. 2.Находим форму с нужным названием и нажимаем на ссылку «Изменить»

    редактирование формы CF7

  3. 3. Вместо стандартного кода вставляем следующий:
  4. 4. Сохраняем изменения.
  5. 5. Открываем файл стилей темы style.css и в самом конце добавляем этот код:
  6. 6.Сохраняем и смотрим что получилось.

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

Второй вариант оформления

Второй вариант оформления contact form7
Точно также как и в первом случае придётся добавлять код и в файл стилей и в саму форму.

  • Код для формы:
  • Код для файла style.css:

Вариант третий

Третий вариант оформления CF7
Здесь задействованы 3 поля. Как и в предыдущих случаях изменения вносятся и в код формы и в стили темы.

  • Код для формы:
  • Код для файла style.css:

Что делать если что-то пошло не так?

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

Для того чтобы повысить приоритет какого то css свойства можно приписать ему правило !important.

Например если у вас не применяется цвет фона для какого то элемента, то вы пишете так:

background: #f1f1f1!important;

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

На этом пожалуй всё! Пойду немного посплю, а то уже утро скоро :)

Если кто то знает способ как отучить себя работать по ночам и раньше ложиться спать – пишите комментарии. Буду благодарна за ваши советы.
Желаю вам успешной стилизации формы обратной связи! До новых встреч в следующих статьях.

Если хотите получать на почту мои новые статьи и обучающие видео – не забудьте подписаться на новости блога!

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

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

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

comments powered by HyperComments

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

  1. Спасибо большое за Ваш труд и бессонную ночь)

    Изложено понятно. Применяю на практике)

    Жду следующих  новостей.

    http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.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_rose.gif

  2. Добрый день! Подскажите пожалуйста как изменить цвет надписи шрифта во втором варианте. Много пробовала кодов не получается.

    • Здравствуйте, Алёна!
      Вы имеете ввиду цвет надписи шрифта в полях ввода или на кнопке отправки?
      Если полей ввода, то можно попробовать дописать в файл стилей в самом конце следующий код:

      • этот код сработал на текст который при вводе. А нужно поменять цвет подписи полей телефон и email

        • Здравствуйте, Алёна! Дайте, пожалуйста, ссылку на страницу с формой.

      • Цвет подписи который стоит видимо уже в теме очень плохо отображается его практически не видно. Т.е. не видно что это за поля и что там писать.  Может вы еще подскажете пожалуйста))

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

      • Да. Всё верно! Только не классы нужно привязывать, а стили через ID.

        • Если классы одни и те же а формы разные — я это имел ввиду. Соответственно и стили для каждого ид будут разные.

          • Если у нас есть несколько форм и мы хотим чтобы оформление было одинаковое, то CSS стили прописываем для класса формы, а если нужно для каждой формы делать разное оформление, то прописываем их для ID формы.

  3. Юлия, здравствуйте. В первом варианте видимо ошибка какая-то, после реализации формы на сайте, курсор просто не встает в поля имя и мейл. Т.е. они как бы неактивны, даже не подсвечиваются при выделении. В сообщение — без проблем.  До этого много Ваших форм реализовал, все было в порядке. Подскажите, пожалуйста, может, я что-то не так делаю.

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

      • Да, конечно. Вот ссылка: http://khramcov-dns0.myjino.ru/kontakty-2

        Вечером попробую протестировать с другой темой, но это не вариант, заказчику нужна именно эта тема. Я хотел взять второй вариант, где все окна выстроены в одну линию, но там только поля your-name и your-message, когда я добавил your-textarea (это обязательно для заказчика) и назначил данному полю column2 (разбив 1 и 2 предварительно в настройках .css), вышло то же самое, что и у Вас.

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

        • 1. Попробуйте вставить эту же форму на другую страницу и посмотрите как будут вести себя поля.
          2. Попробуйте вставить эту же форму ещё раз. То есть будет идти 2 подряд.
          3. Попробуйте изменить названия
          Напишите мне когда вставите. Хочу глянуть как буду вести себя поля.

          • 1. Вставил. Не помогло. Форма в разделе «Обо мне»

            2. Аналогично

            3. Речь шла об изменении классов? .cf-mes к примеру, сменил на .cf-mes1 — не помогло

          • А Вы классы только в форме меняли или и в форме и в CSS?

          • Попробуйте только в коде поменять. В CSS не меняйте. Стили не применятся, но для того чтобы понять причину нам это и нужно.

          • Я пробовал — ничего не менялось. Ничего страшного, другой плагин обратной связи поставил, проблема не решена, конечно, но сроки сдачи заказа поджимают)

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

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