Заполнитель в контактной форме 7 - Wordpress

Я делаю сайт для своего клиента, но столкнулся с проблемой. Я создал контактную форму в Wordpress с помощью Contact Form 7. Этот плагин действительно прост в использовании, но когда я хотел использовать свойство заполнителя плагина, он не отображал заполнитель при загрузке страницы.

Вот как я установил заполнитель в Contactform 7

[text* your-name placeholder "Name"]

Тег-заполнитель отлично работает для моего текстового поля, но не работает с текстовым полем выше. Может кто-нибудь объяснить мне, что я делаю неправильно здесь?

ИЗМЕНИТЬ

Когда я проверяю элемент с помощью Google Chrome и проверяю текстовое поле, он говорит, что у него есть заполнитель. Но он не показывает заполнитель.


wordpress html contact-form-7
person The_Monster    schedule 19.06.2014    source источник
comment
[text* first-name placeholder "Name"] отлично работает в одной из моих форм. Какой браузер вы используете? Если вы просматриваете исходный код своей страницы, имеет ли ввод HTML атрибут placeholder? Например, мой генерирует <input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Name" />.   -  person Hobo    schedule 19.06.2014
comment
[text* text-291 placeholder Your Hobbies] отлично сработало для меня на моем локальном хосте   -  person Gunaseelan    schedule 19.06.2014
comment
@Hobo, я использую Google Chrome, но я также тестировал его в Firefox.   -  person The_Monster    schedule 19.06.2014
comment
Ладно, дело не в совместимости. Так отображается ли атрибут placeholder в исходном коде страницы (Ctrl-U в Chrome), как у меня (см. выше)?   -  person Hobo    schedule 19.06.2014
comment
Какого цвета текст-заполнитель?   -  person Bob Weber    schedule 11.07.2014
comment
Та же проблема, но ни один из ответов не работает. Впервые вижу что-то подобное, я напишу ответ, если найду решение   -  person John M.    schedule 30.03.2020

Ответы (6)


arrow_upward
8
arrow_downward

Если у кого-то возникли проблемы с этим, возможно, вы используете атрибуты class: или id:.

У меня сработало, когда я добавил заполнитель после всех этих:

[email* your-email id:your-email class:form-control placeholder "ex. [email protected]"]
person JorgePinon    schedule 17.11.2017
comment
Это важная информация, всегда ставьте заполнитель в конце - person MaxiGui; 21.04.2021

arrow_upward
2
arrow_downward

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

Поэтому я предлагаю попробовать изменить фоновый цвет ввода для проверки:

input[type="text"], textarea {
  background-color : #d1d1d1; 
}
person Pierre Jean    schedule 16.01.2017

arrow_upward
2
arrow_downward

Это очень просто. Вы можете добавить заполнитель следующим образом:

[text* first_name placeholder"First Name"]

Документация: https://contactform7.com/setting-placeholder-text/

person Maha Dev    schedule 24.04.2017

arrow_upward
1
arrow_downward

[текст* ваше имя заполнитель «Имя»] Синтаксис был тем, что вы указали правильно после проверки настроек контактной формы. Поскольку я также использую такой же синтаксис, как и ваш, он работал правильно в моей контактной форме.

person Ram    schedule 21.06.2019

arrow_upward
0
arrow_downward

Если вы используете атрибуты class или id. Просто сделайте следующее:

[text* your-name class:form-control id:name placeholder "Enter Name"]
person Fefar Ravi    schedule 31.08.2018
comment
Добро пожаловать в StackOverflow. Не могли бы вы уточнить и отформатировать свой ответ и объяснить, чем он отличается от существующих ответов? - person slfan; 31.08.2018
comment
Запишите заполнитель последним в массиве. - person Fefar Ravi; 06.09.2018

arrow_upward
0
arrow_downward

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

Код в теме скрывал заполнители и не имел отношения к контактной форме 7.

Код CSS, который решил мою проблему:

input::placeholder {
    color: #9c9c9c;
    opacity: 1;
}
person John M.    schedule 29.03.2020