如何嵌入Microsoft Forms并支持自定义CSS样式？

针对你遇到的iframe嵌入无法自定义样式、且无法统一表单工具的问题，以下是几种可行的方案：

1. 通过Microsoft Graph API自行渲染表单（完全自定义样式） #

你可以调用Microsoft Graph API拉取员工创建的Microsoft Forms的结构数据（题目、选项、规则等），然后用自有网站的HTML和CSS完全自定义渲染表单界面，提交数据时再通过API将用户输入提交回原Forms。

关键步骤： #

• 申请Azure AD应用权限：需要Forms.Read.All（读取表单）和Forms.ReadWrite.All（提交数据）权限，或针对特定表单设置共享权限。
• 调用GET /forms/v1.0/forms/{form-id}获取表单结构，解析后生成符合网站风格的自定义UI。
• 调用POST /forms/v1.0/forms/{form-id}/responses提交用户填写的数据。

优缺点： #

• ✅ 完全控制表单样式，和自有网站100%融合
• ✅ 不改变员工制作表单的习惯
• ❌ 需要前端开发资源，处理API鉴权和数据交互逻辑

2. iframe间接样式优化（快速适配） #

虽然无法直接修改iframe内部的Forms CSS，但可以通过父容器和CSS滤镜等技巧，让iframe整体外观贴合网站风格：

/* 包裹iframe的容器样式 */
.ms-form-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  max-width: 800px;
  margin: 0 auto;
}

/* iframe本身的调整 */
.ms-form-wrapper iframe {
  width: 100%;
  height: 900px;
  border: none;
  /* 用滤镜微调色调/对比度匹配网站 */
  filter: hue-rotate(20deg) contrast(1.03);
}

优缺点： #

• ✅ 无需开发，快速实现外观适配
• ✅ 不影响员工原有工作流程
• ❌ 只能调整整体外观，无法修改表单内部元素（如按钮、输入框）的样式

3. SharePoint环境下的Web Part嵌入+自定义CSS #

如果你的自有网站基于SharePoint，可以将Microsoft Forms作为Web Part添加到页面，然后通过SharePoint的自定义主题功能或注入自定义CSS来调整Web Part的样式：

• 在SharePoint页面编辑模式下添加「Microsoft Forms」Web Part，选择目标表单。
• 通过SharePoint的「Change the look」功能调整全局主题，或使用SPFx扩展注入自定义CSS，针对Forms Web Part的容器进行样式修改。

优缺点： #

• ✅ 适合SharePoint生态，配置成本低
• ✅ 保留Forms原有功能
• ❌ 仅适用于SharePoint网站，通用性有限

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