如何更改电子邮件字段的背景颜色

表单设计对您的店铺看起来是否专业和值得信赖起着重要作用。

像更新电子邮件字段的背景颜色这样简单的改动就能有所帮助：

• 与您的品牌形象相符
• 提高可读性
• 创建更清晰的视觉层级
• 让你的联系表单看起来更现代、更精致

在你开始之前

请确保您已具备以下条件：

• 在 GemPages 中创建的页面
• An 电子邮件字段元素 已添加到您的表单
• 访问 GemPages 编辑器

无需具备高级编程知识。

步骤 1：选择电子邮件字段元素

在 GemPages 编辑器中打开您的页面。点击您想要自定义的“电子邮件字段”元素。这样可以确保自定义样式仅应用于所选字段。

步骤 2：打开自定义代码面板

右键单击选定的电子邮件字段元素。然后选择： 自定义代码。 自定义代码面板将会出现。

步骤 3：添加 CSS 代码

将以下代码粘贴到自定义代码编辑器中：

ElementClass 输入 {

  background-color: xxxxx !important;

}

重要注意事项

1. 您必须替换 ElementClass 使用您的电子邮件字段元素的实际类名。

您可以在“自定义代码”面板的左上角找到此类名。

计费示例：

.gf-input-123 输入 {

  background-color: #f5f5f5 !important;

}

2. 将 xxxxx 替换为您想要使用的颜色。

计费示例：

背景颜色：#000000！重要；

or

background-color: #f5f5f5 !important;

如何查找颜色代码：

如果你还没有颜色代码， 您可以使用以下免费工具：

• 谷歌颜色选择器
• HTML颜色选择器
• Coolors
• Adobe Color

这些工具可以让你直观地选择颜色并立即复制 HEX 代码。

十六进制代码示例：

• ＃FFFFFF → 白色
• #000000 → 黑色
• ＃f3f3f3 → 浅灰色
• #1a73e8 → 蓝色

结果：