Текст placeholder в Contact Form 7

Решил посвятить еще несколько постов плагину WordPress для создания форм обратной связи - Contact Form 7. Сегодня поговорим о тексте подсказке contact form 7 placeholder и о том как задать цвет этого текста.

Как добавить Contact Form 7 placeholder

Нет ничего проще чем установить текст подсказку у CF7. Для этого нам нужно зайти в админку ваш_сайт/wp-admin/admin.php?page=wpcf7 создать контактную форму обратная связь WordPress, после чего вы увидите:

новая форма Contact Form 7

Нажать на вкладку text или textarea и установить галочку напротив "Use this text as the placeholder of the field" как показанно на рисунке:

contact form 7 placeholder input

Текст подсказка placeholder для textarea делается аналогично, смотрите рисунок:

contact form 7 placeholder textarea

Окончательный вид нашей формы будет иметь вот такой вид в редакторе Вордпресс:

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

contact form 7 placeholder color

Дальше я раскажу вам как избавится от этой проблемы.

 

Проблема с contact form 7 placeholder color

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

body input::-webkit-input-placeholder{color:#000000; opacity:1;}
body input::-moz-placeholder{color:#000000; opacity:1;}
body textarea::-webkit-input-placeholder{color:#000000; opacity:1;}
body textarea::-moz-placeholder{color:#000000; opacity:1;}
body textarea, body input{color:#000000; opacity:1;}

Если вы используете и другие текстовые поля, тогда вам вместо селектора body надо написать ид вашей формы или тега в который он обернутый.

 Вот такими простыми правками стилей мы можем избавиться от разных цветов вводимого сообщения и текста подсказки.

 

На этом все, теперь если вам нужно указать placeholder и color для contact form 7 вы знаете как это сделать. Советую также прочесть статью contact form 7 дополнительные настройки у нас на сайте.

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

Иноформацию более в структурированном виде можно просмотреть в статье форма обратной связи wordpress.

Комментарии к записи «Текст placeholder в Contact Form 7»:
  1. Ольга:

    Я и до этого знала как добавить contact form 7 placeholder в шорткод вызова текстового поля, но ничего не могла поделать с неправильным цветом текста подсказки. Приходилось просить дизайнеров не делать таких форм, или просто выкручиваться цветом стандартным для браузера.
    Большое спасибо color для полей ввода теперь работает правильно - идентично.

Сделать заказ
Онлайн помощь по WordPress