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

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

1. 5 балов!

2. А как сделать такую же как у вас //impuls-web.ru/kontakty/, имя и почта в строчку?

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

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

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

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

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

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

   А каким образом можно сделать такую форму?

   http://savepic.su/7108677.jpg

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

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

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

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

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

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

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

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

9. Только сейчас понял, что я не только стиль (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 это название класса блока, который встраивается вместо стандартной кнопки и для которого применены все стили оформления. Получается что тема заменяет кнопку плагина на свой фрагмент кода.

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

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

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

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

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

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

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

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

    А по поводу

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15. Здравствуйте Юлия ! Большое спасибо за статью !

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      • Юля Здравствуйте. Не могу найти код стиля формы у себя на хостинге. Все файлы прошарил и ни чего не нашел. Поможете? strana-zachetov@yandex.ru Мой емеил. Спасибо

        • Вам не нужно его искать. Вам нужно добавить показанные в статье стили в файл style.css, который находится в папке с темой сайта, если, конечно же, он сделан у Вас на WordPress.

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

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

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

20. Спасибо. Придется разбираться еще и с этим )

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

    • Здравствуйте, Вячеслав!
      Вот статья, в которой описан подобный вариант расположения полей: Готовые стили для Contact Form 7

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

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

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

     

    • Я не совсем поняла вопрос. Вот ряд статей с видео по настройке этого плагина:

      Настройка contact form 7. Добавление полей

      Всплывающая форма обратной связи для WordPress

      Защита от спама для Contact Form 7 WordPress

      
      Там есть видеоинструкция.

23. Прикольно! Спасибо автор

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

24. Юля! Искренне рада, что попала на страницы Вашего блога. Спасибо за улучшение Контактной формы. Я нашла то, что искала. Правда еще не пробовала. В прошлом году начала делать сайты, для себя. Ничто не предвещало то, что я буду делать для других. Сейчас люди просят. И я делаю. И учусь. Делаю и учусь. С удовольствием буду заглядывать на Вашу страничку. Завтра попробую переделать форму. Вопросы возникают постоянно, и я так благодарна Вам за то, что делитесь своими наработками!
    Творческих Вам и программных успехов. А также и жизненных!

    • Галина, спасибо Вам больше за тёплые слова! Очень приятно!

25. Здравствуйте Юля, спасибо Вам за Ваши труды ещё раз. Я использую код варианта №1 с этой страницы. Но, к моему сожалению, в настоящий момент требует Вашей небольшой доработки, так как последние обновления плагинов привели к появлению дополнительной внутренней тени в окне всплывающей формы. Всё работает, но выглядит не эстетично (головная боль любой перфекционистки )…

    • Здравствуйте, Светлана! Если вышлите ссылку на страницу с указанной проблемой, то могу посмотреть, но не обещаю что в ближайшие дни так как работы много.

26. Здравствуйте, Юлия. Очень нравятся ваши уроки, все четко и понятно, даже для новичков))

    Подскажите, как менять цвет поля для заполнения? В ваших примерах, как я поняла, меняется цвет фона только?

    Тема сайта — fruitful

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

27. Наверное не внимательно смотрела, этот код мне поможет?

    .cf-right input, .cf-right textarea{

    width: 100%;

    max-width:300px;

    padding:4px;

    background:#d4d4d4; /*фон полей формы*/

    border:1px solid #8a8a8a;

     

    }

    • Да, background:#d4d4d4; /*фон полей формы*/ как раз и меняет цвет поля. Но здесь я задавала классы полей самостоятельно, при создании формы. Если вы не указывали свои классы, то они будут отличаться.

28. Что-то когда поля прописываешь (заполняешь), текст чёрный и поле синее. Не ух ты. Первый вариант.

    • У вас свойства фона для полей наследуются от темы. Попробуйте задать фон для полей с правилом !important, должно сработать.

29. не работают ваши скрипты

    • Это стили, а не скрипты. Все стили рабочие, это моя рабочая заготовка, которую я использую для создания сайтов. Убедитесь, что у вас отключено кэширование в браузере и в WordPress.

      • Юлия здравствуйте, подскажите пожалуйста, откуда может появляться слово «текст» в самом начале всплывающей формы, оно даже не в теге «р» просто текст, нигде не прописывал, как убрать не понятно, Спасибо большое!!!

        • Вы заготовку кода для всплывающей формы брали у меня? Там в примере стоит для примера слово «Текст» перед шорткодом:

          Текст

          
          
          
          
          

          Ваше имя (обязательно)
          

          Ваш e-mail (обязательно)
          

          Тема
          

          Сообщение
          

          Его нужно удалить или заменить на свой.

30. Не могу сделать кнопку по центру, ставлю разные варианты (слева и справа получается)

    float:auto;
    margin:auto;

    Вот что ставлю:

    .wpcf7-submit{
    background: linear-gradient(#75FFB6, #75FFB6), #75FFB6!important;
    color:#000!important;
    text-transform:uppercase;
    float:auto;
    margin:auto;
    width:290px!important;
    }

     

    Как правильно?

    Спасибо

    • Нужно ещё свойство display:block; или display:inline-block; добавить так как margin:auto не работает для строчных элементов. А кнопка по умолчанию является строчным. Так же вместо float:auto; нужно написать float:none;

31. Блог однозначно в копилку :) Спасибо за статью.

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

    http://you-on-line.ru/servises

    • Напишите в стилях:
      #fancybox-outer{
      box-shadow: none!important;
      }

      • Супер. Спасибо! :)

      • Я еще немного понаглею с вопросами, если можно :) Как видите поле textarea довольно большое. Можно ли как то сделать его меньше, или возможно, ввести отдельную версию с меньшим размером поля?

        • #fancybox-content .wpcf7-form .wpcf7-textarea{
          height: (нужная высота в пикселях)!important;
          }

          • Спасибо огромное.

32. Очень классный и информативный сайт. С Вашей помощью уже не один проект сделан

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

    Подскажите пожалуйста, как сдвинуть форму в центр, сейчас она с левой стороны https://zdorovy-obraz.ru/zdorove/kak-ispolzovat-lechebnuyu-podushku-asoniya.html что не есть красиво. Что нужно и куда прописать в стиль.

    Спасибо.

    • Здравствуйте, Юрий!
      Можно прописать следующие стили:
      div.wpcf7 {
      margin:auto;
      }
      Если выровнять нужно только эту форму, то пишем этот стиль для её идентификатора #wpcf7-f1137-p1150-o1

34. Здравствуйте Юлия, с формой разобралась .Помогите советом как можно перекрепить справа от текста?

35. Как на этом сайте https://my.avon.ru/stat-predstavitelem-avon?inm=Nav-Other:link=stat-predstavitelem-avo

36. Юлия, доброго времени суток! Я столкнулся с тем что при отправке запроса, если не вписать одну из строк то ошибка не входит. Получается так что можно отправлять пустую форму.

    • Здравствуйте, Вячеслав! А Вы про какие стоки пишете? Про те что посетители в форме заполняют или про те что в админке заполняются?

37. Добрый день! при настройке » contact-form-7″ столкнулся с такой проблемой у меня почта info@стс-юг.рус а форма настройки не принимает данный вид просит все на латинице скрин прилагается https://yadi.sk/i/CFcXiHZn3RxAT8 что посоветуете??????????

    • Здравствуйте, Владимир!
      Переведите свой кириллический домен в пуникот при помощи одного из онлайн сервисов и попробуйте вместо домена сайта на русском ввести его название в пуникоде.

38. Юлия, спасибо за подробную инструкцию! А почему Вы не прикрепили свой мануал к  статье? https://www.youtube.com/watch?v=uPk4uaUecCY

    • Спасибо что обратили моё внимание на этот момент! Добавила!

39. Так и не поняла, куда вставлять стили. Если у меня несколько форм создано, а поменять стиль я хочу одной, конкретной форме, то куда вставлять код стилей? и как в файле style.css будет понятно, что я имею ввиду именно ту самую форму и только ей хочу задать стиль?

40. Юля, здравствуйте! Помогите, пожалуйста, сделать контактную форму в горизонтальную строчку состоящую из «Имени», «номера телефона» и кнопки отправить. Фон  формы белый. Спасибо)

    • Здравствуйте, Инна!
      Вот ссылка на статью с кодом для такого варианта оформления формы //impuls-web.ru/gotovye-stili-dlya-contact-form-7/
      Если Вам нужно чтобы я сделала такую форму за Вас, то Вы можете оставить заявку через форму обратной связи «Заказать сайт» в шапке и выбрать там в разделе «Выберите тип сайта:» — «Доработка сайта»

41. Добрый день. Скопировал у Вас код для формы №3, но есть 3 проблемы:

    1. На форме нет заголовка, типа «Заказать звонок, оставьте, бла, бла, бла»

    2. Поля для заполнения справа обрезаны формой

    3. При неправильном вводе, после нажатия на плавающую кнопку выскакивает форма огромного размера со всеми предупреждениями.

    Можете помочь?

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

42. Юлия, здравствуйте) Измучилась с кнопкой отправить. Не хочет вставать по центру.

    Что не так, подскажите пожалуйста

    .wpcf7 form{

    width:400px;

    height:450px;

    margin: 0;

    vertical-align: middle;

    transform: translate(-50%, -50%);

    position: absolute;

    top: 50%;

    left: 50%;

    box-shadow:0 0 6px #000;

    }

    .wpcf7 input[type=»text»], .wpcf7 input[type=»email»],  .wpcf7 input[type=»tel»]{

    outline: none;

    }

    .wpcf7 input[type=»submit»]{

    outline: none;

    box-shadow:0 0 6px #000;

    text-transform:uppercase;

    float:none;

    margin:auto;

    display:inline-block;

    width:250px!important;

    }

    .temp_submit_cf7{

    width:100%!important;

    text-align:center;

    }

43. Не уточнила сразу. посмотреть можно любую кнопку на сайте. Формы идентичные и под один стилем. Ещё раз спасибо.

44. Здравствуйте! очень содержательная и понятная статья. Спасибо, Инна!

    Только не могу понять. Как в сплывающей форме сделать значок её закрытия (если человек не воспользовался) именно «крестиком». У выходит просто слово «ЗАКРЫТЬ» в левом нижнем углу. Как быть?

45. Привет, Юлия. Подскажи, пожалуйста, в чем может быть проблема. Поставил форму и сделал е всплывающей. Установки ваши стили из первого варианта, но ничего не изменилось. сайт revitaldon.ru

    • Здравствуйте! Посмотрите вот эту статью Почему не работают CSS-стили? Скорее всего причина кроется в одном из представленных в статье вариантов.

46. Хочется что-то хорошее для вас сделать)) время сэкономили и разъяснили! Решил написать БОЛЬШУЮ БЛАГОДАРНОСТЬ!!!)
    
    Пусть будет хорошее и творческое настроение!

    • Евгений, большое Вам спасибо!

47. Очень помогли, спасибо! 

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

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

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

Комментарий

Имя *

E-mail *

Сайт

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Сообщите мне об ответе на мой комментарий по электронной почте