如何更改下拉元素的默认占位符文本

自定义下拉元素的默认占位符文本可以使您的表单更清晰、更专业，也更容易被客户理解。

您可以显示更有意义的标签，而不是使用通用的占位符文本，例如：

• 选择你的国家
• 选择尺寸
• 选择你的职业
• 选择配送方式

为什么要自定义下拉菜单占位符文本？

更新下拉菜单占位符文本有助于改进：

• 形式清晰度
• 用户体验
• 表格填写率
• 品牌专业性
• 客户指导

清晰的占位符标签可以帮助访客准确了解在提交表单之前需要选择哪些信息。

这对于以下情况尤其有用：

• 联系表格
• 登记表格
• 调查表
• 产品定制表格
• 多步骤表格

在你开始之前

在开始本教程之前，请确保您已具备以下条件：

• 在 GemPages 中创建的页面
• A 下拉元素 已添加到您的页面
• 访问 GemPages 编辑器

步骤 1：选择下拉列表元素

在 GemPages 编辑器中打开您的页面。

右键单击要更改占位符文本的下拉列表元素 => 自定义代码.

步骤 2：打开脚本选项卡

打开 脚本 此选项卡。您可以在此处为选定的元素添加自定义 JavaScript 代码。

步骤 3：添加自定义脚本

将以下代码粘贴到“脚本”选项卡中：

document.addEventListener("DOMContentLoaded", () => {

  const currentElement = document.getElementsByClassName('{{rootClassName}}');

  currentElement[0]

    .querySelector('option[disabled].gp-hidden')

    .innerText = '职业';

}）;

重要注意事项

将“职业”替换为您想要显示的占位符文本。

计费示例：

请选择您的国家/地区

or

“选择您的尺码”

结果：