Как добавить заполнитель для контактной формы7 для раскрывающегося списка?

Question

Как добавить заполнитель для контактной формы7 для раскрывающегося списка?

- 18
- 112756 2016-01-06
Я попытался добавить заполнитель,аналогичный указанному для ContactNumber ,для раскрывающегося меню Outlet ,но он не отображается.

Код-

<div class="form-group form-icon-group"> <i class="fa fa-phone" > </i> [tel* ContactNumber /8 class:form-control placeholder "Contact Number *"] </div> <div class="form-group form-icon-group"> <i class="fa fa-food" > </i> [select Outlet id:outlet class:form-control "-- Select Outlet--" "Pasir Ris" "Thomson"] </div>

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

Остальные все поля отображают заполнитель,есть ли другой способ указать заполнитель для раскрывающегося списка?
I tried adding placeholder similar to the given for ContactNumber for my drop down Outlet but it doesn't appear.

Code-

<div class="form-group form-icon-group"> <i class="fa fa-phone" > </i> [tel* ContactNumber /8 class:form-control placeholder "Contact Number *"] </div> <div class="form-group form-icon-group"> <i class="fa fa-food" > </i> [select Outlet id:outlet class:form-control "-- Select Outlet--" "Pasir Ris" "Thomson"] </div>

Tried adding first_as_label "Preferred outlet?" so this displays as ordinary drop down values.

Rest all of the fields do show the placeholder,any other way to give placeholder for drop down?
plugin-contact-form-7

- Вы можете использовать параметр заполнителя в тегах формы следующих типов: текст,электронная почта,URL-адрес,телефон,текстовое поле,число,диапазон,дата и captchar.[заполнитель cf7] (http://contactform7.com/setting-placeholder-text/)
  
  You can use the placeholder option in the following types of form tags: text, email, url, tel, textarea, number, range, date, and captchar. [cf7 placeholder](http://contactform7.com/setting-placeholder-text/)
  - 1
  - 2016-01-06
  - Reigel
- так что для раскрывающегося списка у нас нет другого выбора?
  
  so for drop down we don't have any other choice?
  - 0
  - 2016-01-06
  - Sanjuktha sandesh

2 ответ

голосов

- 100
- 2016-01-06
Вопреки тому,что предлагает принятый ответ,на самом деле это возможно и встроено в контактную форму 7. Вот фактический список параметров [select] содержит .В значительной степени вы должны определить первый вариант в качестве заполнителя,используя first_as_label:

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

Хотя традиционно он не будет выглядеть как заполнитель,при необходимости пользователь не сможет выбрать заполнитель и отправить форму - это вынуждает пользователя выбрать любой из других параметров.
Contrary to what the accepted answer suggests, it actually is possible and built into Contact Form 7. Here's the actual list of options [select] holds. Pretty much you would define the first option to be the placeholder using first_as_label:

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

While it won't traditionally look like a placeholder, if it's required the user won't be able to select the placeholder and send the form - this forces the user to select any of the other options.
- Спасибо за помощь. Я уже пробовал `first_as_label`,но,как вы сказали,он не был похож на другие значения заполнителей.
  
  Thanks for the help.i already tried `first_as_label` but as you said it didn't look similar to other placeholder values.
  - 0
  - 2016-01-07
  - Sanjuktha sandesh
- Это достойное решение.И он работает правильно - форма не отправляется,если вы попробуете использовать первый вариант.Чтобы отформатировать первый параметр,просто выберите поле выбора (например,`.wpcf7 select [name="menu-70 "] {color: #aaa;}`. Затем вы можете сделать параметры темнее,выбрав параметры (например,`.wpcf7 select [name="menu-70"] option {color: # 333;} `. Первый вариант выделен в фокусе,поэтому,если вы не хотите изменить эту часть,решение отлично работает.
  
  This is a decent solution. And it does work properly - the form doesn't send if you try using the first option. To format the first option, just target the select box (i.e. `.wpcf7 select[name="menu-70"] { color:#aaa; }`. Then you can make the options darker by targeting the options (i.e. `.wpcf7 select[name="menu-70"] option { color:#333; }`. The first option is highighted on focus, so unless you want to change this part, the solution works great.
  - 4
  - 2016-09-16
  - Rob Myrick
- Я не совсем уверен,почему кому-то может понадобиться,чтобы опция выбора выглядела как заполнитель,если я не упускаю что-то простое - выберите вариант - это то,что ожидает увидеть большинство людей.Большое спасибо за то,что избавили меня от самостоятельного просмотра документации!
  
  I'm not entirely sure why anyone would want a select option to look like a placeholder unless I am missing something a simple --Select an option-- is what most people expect to see. Thank you very much for saving me from looking through the documentation myself!
  - 0
  - 2018-09-21
  - Rick Calder

Reigel · Accepted Answer · 2016-01-06

1

2016-01-06

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

AFAIK,(HTMLwise) нет возможности добавить заполнитель для выбора тегов.

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

 <select>
    <option value="" disabled selected>Select your option</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 и добавив вместо него свое.

to answer the question: this is not possible.

AFAIK, (HTMLwise) there's no way to add a placeholder to select tags.

A lot of devs I know however tend to use disabled selected combination for the option...

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="ydasdas">ydasdas</option>
    <option value="dasda">dasda</option>
    <option value="ydagfdsdas">ydagfdsdas</option>
    <option value="ewefsdf">ewefsdf</option>
</select>

demo

I have checked CF7's source code (version 4.3.1), and there's no easy way we can achieve this html format.

You can go the hard way by removing wpcf7_add_shortcode_select action on wpcf7_init and add yours instead.

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

This answer really should be removed, accepted or not it's incorrect, and it isn't like it's a very old answer, it was supplied on the same day as the correct one was.
- 3
- 2018-09-21
- Rick Calder