如何为联系人form7添加占位符以进行下拉？

Question

如何为联系人form7添加占位符以进行下拉？

18

112756 2016-01-06

我尝试为下拉列表 Outlet 添加类似于 ContactNumber 的占位符,但没有出现.

代码-

 <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?

- 您可以在以下类型的表单标签中使用占位符选项:文本,电子邮件,URL,电话,文本区域,数字,范围,日期和验证码.[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