Typeform

一次只显示一道题的在线表单与问卷，可用官方 SDK 嵌入网站

AI Skills AI 营销免费增值闭源

访问官网文档

核心功能

Typeform 是对话式表单工具，一次只呈现一道题目，配合条件跳转（logic jumps）引导填写。表单可用官方 Embed SDK 嵌进网站，支持内嵌、弹窗、侧滑、悬浮按钮与侧边标签五种形态。表单数量不限，按每月回收的回复数计费。

功能亮点

五种嵌入形态

嵌入库提供五种创建方法：内嵌、弹窗、侧滑、悬浮与侧标，覆盖各场景

事件回调齐全

可监听 onReady、onSubmit 等事件

隐藏字段透传

用 hidden 传隐藏字段、tracking 传埋点参数

只能嵌 HTTPS 页

官方用 CSP 头限制，表单只能嵌在 HTTPS 页面或本机 localhost

适用场景

• 落地页嵌入问卷收集销售线索
• 做 NPS 或满意度调研
• 活动报名与信息登记
• 带逻辑分支的资格筛选表单
• 退出意图弹窗调查流失原因

安装配置

bash

Typeform 是在线服务，表单在网页后台创建，只有嵌入部分需要安装库：
1. 在 https://www.typeform.com 注册账号并创建表单，免费档即可创建
2. 取 form-id：可从公开地址 https://form.typeform.com/to/<form-id> 或后台地址 https://admin.typeform.com/form/<form-id> 中获得
3. 前端安装官方嵌入库（要求 Node 18 及以上）：
```bash
npm install --save @typeform/embed
```
或
```bash
yarn add @typeform/embed
```
4. 不想用包管理器时，可直接引入官方 CDN 版本，CSS 会自动加载
5. 完全不写 JavaScript 也可以：在 HTML 元素上加 data-tf-widget="<form-id>" 等 data-tf-* 属性
6. 嵌入页面必须走 HTTPS，本机 localhost 下的 HTTP 是唯一例外，否则会被 CSP 拦下

嵌入库本身是开源的，官方接受社区贡献。

使用方法

javascript

内嵌到页面元素（widget）：
```js
import { createWidget } from '@typeform/embed'
import '@typeform/embed/build/css/widget.css'

createWidget('<form-id>', { container: document.querySelector('#form') })
```

弹窗形态并绑定按钮：
```js
const { open, close, toggle, refresh } = createPopup('<form-id>')
document.querySelector('#button').onclick = toggle
```
用 CDN 时对应写成 window.tf.createPopup('<form-id>')。

带隐藏字段与回调：
```js
createWidget('<form-id>', {
  container: document.getElementById('wrapper'),
  hidden: { foo: 'f', bar: 'b' },
  hideFooter: true,
  onReady: () => console.log('form ready'),
  onSubmit: (data) => console.log('responseId:', data.responseId),
})
```

纯 HTML 写法：元素上加 data-tf-widget="<form-id>"，其余参数用 data-tf- 前缀并改为短横线命名，例如 hideFooter 写成 data-tf-hide-footer；对象型参数写成 data-tf-hidden="foo=f,bar=b"。

弹窗类嵌入还支持按行为自动打开：open 设为 load / exit / scroll / time，再用 openValue 指定阈值（退出灵敏度、滚动百分比或毫秒数）。

关键指标

尚未核验对标产品，此处只列本工具自身指标，不做对比结论。

指标Typeform

价格免费增值

开源否

上手难度入门

优点

一次一题的填写方式配合条件跳转，长问卷可以根据前面的答案只问相关题目
五种嵌入形态共用同一套 API，从内嵌换成弹窗只需改一个创建方法名
不写 JavaScript 也能嵌入，data-tf-widget 等 data 属性可直接在 HTML 上配置全部参数
支持 hidden 隐藏字段与 transitiveSearchParams，可把页面地址栏参数原样带进表单做归因
回调覆盖 onReady、onSubmit、onQuestionChanged、onHeightChanged，便于与自有埋点和布局联动

缺点

回复数按账号总量计算而非按表单计算，免费档每月仅 10 份回复、单表单 10 题，基本只够试用
Basic 档每月 39 美元也只含 100 份回复，回复量一大费用上升非常陡
去掉 Typeform 品牌标识要 Plus 档（每月 79 美元）以上
当月回复用完后表单会自动转成 Private 模式停止收集，删掉已有回复也不会退回额度
受 CSP 限制不能嵌在 HTTP 页面，只有本机 localhost 例外，内网 HTTP 环境无法调试