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

16

我尝试为下拉式插座添加与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?"因此它显示为普通的下拉值。

其余的所有字段都显示占位符，还有其他方式可以使占位符下降吗？

plugin-contact-form-7

— Sanjuktha sandesh
source

1

您可以在以下类型的表单标签中使用占位符选项：文本，电子邮件，URL，电话，文本区域，数字，范围，日期和验证码。cf7占位符

— Reigel

所以对于下拉菜单，我们别无选择？

— Sanjuktha sandesh '16

2

回答这个问题：这是不可能的。

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并添加您的操作来艰难地前进。

— 雷格尔
source

2

确实应该删除，接受或不回答该答案，这不是一个很老的答案，它是在正确答案的同一天提供的。

— 里克·卡尔德

78

违背了公认的答案暗示什么，它实际上是可能的，建成联系表7.下面是实际的选项列表[select]持有。几乎可以使用以下方法将第一个选项定义为占位符first_as_label：

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

尽管它在传统上看起来不像是占位符，但是如果需要，用户将无法选择占位符并发送表单-这迫使用户选择其他任何选项。

— Howdy_McGee
source

感谢您的帮助。我已经尝试过了，first_as_label但是正如您所说的，它看起来与其他占位符值并不相似。

— Sanjuktha sandesh '16

4

这是一个不错的解决方案。它确实可以正常工作-如果您尝试使用第一个选项，则表单不会发送。要设置第一个选项的格式，只需将选择框作为目标即可（即.wpcf7 select[name="menu-70"] { color:#aaa; }。然后，可以通过将选项作为目标来使选项变暗（即.wpcf7 select[name="menu-70"] option { color:#333; }。第一个选项的重点在于焦点，因此除非您要更改此部分，否则该解决方案将非常有效）。

— Rob Myrick

我不完全确定为什么有人会希望选择选项看起来像占位符，除非我缺少大多数人希望看到的简单的“选择选项”。非常感谢您使我免于亲自浏览文档！

— 里克·卡尔德