如何在WordPress的WP Form联系表单中实现外描边文本字段标签效果

前置配置 #

• 进入WP Form对应表单的编辑器，所有表单字段保留默认标签设置，不要勾选「隐藏标签」选项
• 清空所有字段的占位符文本、字段备注内容，避免和悬浮标签效果冲突
• 保存表单配置

自定义CSS代码部署 #

将以下CSS代码添加到WordPress后台「外观」→「自定义」→「额外CSS」的输入框中，保存即可生效：

/* 调整字段容器为相对定位 */
.wpforms-field {
  position: relative;
  margin-top: 24px;
}

/* 输入框基础样式：外描边、无默认内边距、背景透明 */
.wpforms-field input,
.wpforms-field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 4px;
  background: transparent;
  font-size: 16px;
  transition: all 0.3s ease;
  outline: none;
}

/* 输入框聚焦样式：描边变色 */
.wpforms-field input:focus,
.wpforms-field textarea:focus {
  border-color: #2563eb;
}

/* 标签基础样式：默认在输入框内居中，背景和页面背景一致盖住描边 */
.wpforms-field-label {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 16px;
  color: #666;
  padding: 0 4px;
  background: #fff; /* 此处修改为你的页面背景色 */
  transition: all 0.3s ease;
  pointer-events: none;
  margin: 0 !important; /* 覆盖WP Form默认标签外边距 */
}

/* 输入框聚焦/有内容时标签上浮 */
.wpforms-field input:focus ~ .wpforms-field-label,
.wpforms-field input:not(:placeholder-shown) ~ .wpforms-field-label,
.wpforms-field textarea:focus ~ .wpforms-field-label,
.wpforms-field textarea:not(:placeholder-shown) ~ .wpforms-field-label {
  top: -10px;
  left: 12px;
  font-size: 12px;
  color: #2563eb;
}

/* 输入框有内容非聚焦时标签颜色调整 */
.wpforms-field input:not(:focus):not(:placeholder-shown) ~ .wpforms-field-label,
.wpforms-field textarea:not(:focus):not(:placeholder-shown) ~ .wpforms-field-label {
  color: #666;
}

生效验证 #

• 保存CSS后清空WordPress缓存、WP Form插件缓存，刷新表单页面
• 点击输入框即可看到标签上浮、描边变色的效果，输入内容后标签保持悬浮状态

常见适配调整 #

• 如果页面背景不是白色，修改CSS中.wpforms-field-label的background属性值和页面背景色保持一致即可
• 可自行调整颜色、圆角、间距数值匹配站点设计风格

内容的提问来源于stack exchange，提问作者Amin Gholami