如何修改Leadshook嵌入脚本生成的表单CSS样式？

一、先确认表单的渲染方式 #

打开浏览器开发者工具（按F12），查看生成的表单是iframe嵌入还是直接在当前页面生成的普通DOM元素：

• 若为iframe：受浏览器跨域安全限制，无法通过主页面CSS直接修改内部样式，优先使用工具自带配置；
• 若为普通DOM元素：可直接编写自定义CSS覆盖原有样式。

二、针对不同渲染方式的解决方案 #

1. 表单是iframe的情况

• 优先检查Leadshook的后台设置：这类工具通常自带可视化样式编辑器（在你的quiz管理后台），可直接调整表单的颜色、字体、间距等样式，生成带自定义配置的嵌入代码。
• 若平台无可视化配置，可查看工具官方文档确认是否支持通过URL参数传递样式参数。

2. 表单是当前页面DOM元素的情况

用开发者工具定位表单元素的类名或ID，编写自定义CSS覆盖样式：

• 示例（假设生成的表单容器类名为leadshook-quiz）：

/* 调整表单整体宽度与居中方式 */
.leadshook-quiz {
  max-width: 800px;
  margin: 20px auto;
}

/* 自定义按钮样式 */
.leadshook-quiz .quiz-submit-btn {
  background-color: #2563eb;
  color: #fff;
  border-radius: 8px;
  padding: 12px 30px;
  border: none;
  cursor: pointer;
}

/* 修改输入框样式 */
.leadshook-quiz input[type="text"],
.leadshook-quiz input[type="email"] {
  border: 1px solid #e5e7eb;
  padding: 10px 15px;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 15px;
}

• 将这段CSS添加到你的网站自定义CSS区域（比如主题设置的自定义CSS栏、或页面的<style>标签内）。

三、强制覆盖样式的技巧 #

如果原有样式优先级较高，可使用!important强制覆盖（尽量少用，避免样式冲突）：

.leadshook-quiz .quiz-title {
  font-size: 24px !important;
  color: #1f2937 !important;
}

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