Как добавить placeholder для выпадающего списка в Contact Form 7?

Question

Как добавить placeholder для выпадающего списка в Contact Form 7?

6 янв. 2016 г., 06:51:09

Просмотры: 186K

Голосов: 25

Я пытался добавить placeholder аналогично тому, как он задан для поля ContactNumber в моем выпадающем списке Outlet, но он не отображается.

Код-

<div class="form-group form-icon-group">
    <i class="fa fa-phone" > </i> [tel* ContactNumber /8 class:form-control placeholder "Контактный номер *"]
</div>
<div class="form-group form-icon-group">
<i class="fa fa-food" > </i> [select Outlet id:outlet class:form-control "-- Выберите филиал--" "Пасир Рис" "Томсон"]
</div>

Пробовал добавить first_as_label "Предпочитаемый филиал?", но это отображается как обычное значение выпадающего списка.

Все остальные поля показывают placeholder, есть ли другой способ добавить placeholder для выпадающего списка?

Sanjuktha sandesh

353

плагин contact form 7

Комментарии

Вы можете использовать опцию placeholder в следующих типах полей формы: text, email, url, tel, textarea, number, range, date и captchar. cf7 placeholder

Reigel Gallarde

6 янв. 2016 г. 07:39:54

значит для выпадающего списка у нас нет другого варианта?

Sanjuktha sandesh

6 янв. 2016 г. 07:47:25

Все ответы на вопрос

Вопреки тому, что предлагает принятый ответ, на самом деле это возможно и встроено в Contact Form 7. Вот список опций, которые поддерживает [select]. По сути, вы можете определить первый вариант как плейсхолдер, используя параметр first_as_label:

[select* Test first_as_label "Placeholder" "Option 1" "Option 2"]

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

Howdy_McGee

20.8K

6 янв. 2016 г. 17:36:18

Комментарии

Спасибо за помощь. Я уже пробовал first_as_label, но, как вы сказали, это выглядело не так, как другие значения-заполнители.

Sanjuktha sandesh

7 янв. 2016 г. 02:54:59

Это неплохое решение. И оно действительно работает правильно — форма не отправляется, если попытаться использовать первый вариант. Чтобы отформатировать первый вариант, просто нацельтесь на поле выбора (например, .wpcf7 select[name="menu-70"] { color:#aaa; }). Затем вы можете сделать варианты темнее, нацелившись на опции (например, .wpcf7 select[name="menu-70"] option { color:#333; }). Первый вариант выделяется при фокусе, поэтому, если вы не хотите менять эту часть, решение работает отлично.

Rob Myrick

16 сент. 2016 г. 20:05:53

Я не совсем уверен, зачем кому-то может понадобиться, чтобы опция выбора выглядела как заполнитель, если только я что-то упускаю. Простое "--Выберите вариант--" — это то, что большинство людей ожидает увидеть. Большое спасибо за то, что избавили меня от необходимости самому копаться в документации!

Rick Calder

21 сент. 2018 г. 22:40:31

Сейчас эта опция не работает на Mac. Стиль применяется из элемента select. Опции — это просто представление содержимого. Текст. Они не являются стилизованным элементом.

neoswf

21 янв. 2022 г. 01:14:47

Это должен быть принятый ответ! Отлично!

markzzz

4 апр. 2023 г. 15:02:20

Комментарии

Этот ответ действительно стоит удалить, принят он или нет — он неверен, и он не такой уж старый, он был дан в тот же день, что и правильный ответ.

Rick Calder

21 сент. 2018 г. 22:42:42

Reigel Gallarde 889 · Accepted Answer · 2016-01-06T08:18:55Z

Чтобы ответить на вопрос: это невозможно.

Насколько мне известно, (в терминах HTML) нет способа добавить placeholder к тегам select.

Однако многие разработчики, которых я знаю, используют комбинацию disabled selected для option...

<select>
    <option value="" disabled selected>Выберите вариант</option>
    <option value="ydasdas">ydasdas</option>
    <option value="dasda">dasda</option>
    <option value="ydagfdsdas">ydagfdsdas</option>
    <option value="ewefsdf">ewefsdf</option>
</select>

демо

Я проверил исходный код CF7 (версия 4.3.1), и нет простого способа добиться такого HTML-формата.

Вы можете пойти сложным путём, удалив действие wpcf7_add_shortcode_select на wpcf7_init и добавив своё.