新建问卷

Charket Survey 在微信客户端提供了满意度或研究进度调查，以量化产品在市场中的优势和劣势。

通过对客户进行调查，您可以将客户满意度添加到 CRM 数据点列表中，来弥补客户关系管理中的一个关键缺口。

1. 查看 Surveys 列表

1.1. 登陆到 Salesforce Org，点击【Charket】选项卡，然后点击【Surveys】到 Survey 列表页面，如图所示的页面。

1.2. 在问卷的右侧点击下拉菜单，可以对问卷进行预览、复制、删除、存档操作，也可在页面上搜索、过滤、排序和新建等操作。如图所示：

1.3. 点击【New】， 进入新建 Survey 页面，在左上角输入问卷的名字，然后在中间部分设置问卷的 Header，Banner，Title，Description（支持加入超链接）和 Footer 。

用鼠标从 Build 中拖拽或者点击加入想要的问题类型，输入问题内容，按 Enter 键输入答案选项，完成之后点击右上角的 Preview 按钮进行预览，随时查看当前问卷在手机端和网页端的表现效果，当问卷的所有问题都录入完成之后，在右上角点击 Save 按钮保存。

1.4. 在页面右侧底部选中 button，然后在左侧点击 Properties，可以编辑 Button Label。

2. 支持 URL Parameter 功能

创建完 Survey Question 后，选中该 Question，点击左侧的 Properties，在 Pre-fill Type 中选择 URL Parameter，并设置一个参数。保存后 Survey 的链接会拼接该参数，用户可以为该参数赋值。当 Question 被设置了 URL Parameter 后，该 Question 会被自动 Hidden。

用户可以将此问卷问题的答案赋值给该参数，在移动端打开 Survey Link 后，该 Question 被隐藏。在提交问卷后，设置的答案会自动保存到对应的字段中。

3. 支持 Fixed Value 功能

创建完 Survey Question 后，选中该 Question，点击左侧的 Properties，在 Pre-fill Type 中选择 Fixed Value，并设置一个固定的值。选择 Fixed Value 后，此 Question 将被自动设置为 Hidden 状态。一旦设置了 Fixed Value，在打开 Survey 后，该问题是隐藏的，并在提交 Survey 后，会将相应的数据保存到数据库中。

4. 转换字段类型

可以通过切换字段的不同表现形式来实现用户对问卷的设置需求，当创建了一个多选类型的问题之后，如果想要将它设置为 Dropdown 类型，可以选中该问题，然后在左侧点击 Properties，点击下拉菜单选择你要实现的类型，之后可以在右侧查看显示效果，如图所示：

5. Survey Builder 支持设置 Image

Survey Builder 支持在 Survey Header，Survey Content 和 Survey Footer 中添加 Image 组件。在 Survey Builder 页面左侧的 Common Items 模块中将 Image 组件拖拽到 Survey 中需要添加 Image 的区域，然后点击 Properties 设置下面字段：

• Image URL: 需要添加图片的 URL。
• Fit to Width: 是否适配 Survey 的宽度。
• Redirect URL: 在  Survey 中点击图片后可以跳转的目标页面的 URL。
• Alternative Text: 替代文本。如果 Survey 中的图片加载不出来时，可以显示该文本。
• Hidden: 隐藏配置。 

6. Survey Builder 支持设置 Rich Text

Survey Builder 支持在 Survey Header，Survey Content 和 Survey Footer 中添加 Rich Text 组件。在 Survey Builder 页面左侧的 Common Items 模块中将 Rich Text 组件拖拽到 Survey 中需要添加的区域，然后双击 Rich Text 区域或点击 Properties 设置下面字段：

• Content: 在富文本编辑器中可以设置需要的样式。
• Hidden: 隐藏配置。

7. 支持自定义样式

用户通过设置样式和注入 CSS 样式来实现问卷的多样化，同时满足企业的品牌需求。当创建完问卷的问题和答案后，如果要为问卷设置样式，可以通过 Style 功能来实现，其中 Style 包括 Customize 设置和 Advanced 设置，下面着重介绍下该功能的作用。

7.1. Page 模块的配置：

• Background 和 Background Image: 问卷页面的背景色和背景图片。
• Header Width/Footer Width: Survey Content/Footer 的宽度
  • Fit Content Width: 适配 Survey Content 的宽度
  • Fit Page Width: 适配 Survey 页面的宽度
• Header Top Padding/Header Bottom Padding:  设置 Survey Builder 中 Heading 的 Padding。
• Footer Top Padding/Footer Bottom Padding: 设置 Survey Builder 中页脚的 Padding。
• Content Max Width: 设置 Survey Builder 中内容的的最大宽度。
• Content Border Thickness：设置 Survey Builder 中内容的边框厚度。
• Content Border Color：设置 Survey Builder 中内容边框的颜色。
• Content Radius：设置 Survey Builder 中内容的圆角半径。
• Content Background: 设置 Survey Builder 中内容的背景颜色。

7.2. Survey 模块的配置：

• Background：Survey 的背景色。
• Max Width: Survey 页面的最大宽度。
• Content Top Padding/Content Bottom Padding: 内容顶部填充/底部填充。
• Content Left Padding/Content Right Padding: 内容左侧填充/右侧填充。
• Error Background：提交 Survey 时报错信息的背景色。
• Error Text Color：Survey 报错信息的字体颜色。

7.3. Items 模块的配置：

• Required Icon：必填字段的设置图标。一般而言，设置为 Red Asterisk。
• Question Font Size 和 Question Text Color：Question 的字体大小和字体颜色。
• Answer Font Size 和 Answer Text Color：答案选项的字体大小和颜色。
• Choice Checked Color：选中答案的颜色显示。
• Rich Text Background Color: Rich Text 的背景颜色。

7.4. Button 模块的配置：

• Button Background: 背景色。

• Button Font Color/Button Font Size：字体颜色/字体大小。

• Horizontal Padding/Vertical Padding: 水平填充/垂直填充。

• Radius: 圆角半径。

• Border Thickness: 边框厚度。

• Border Color: 边框颜色。

• Width:

  • percent：百分比

  • pixels：像素

7.5. Advanced 高级设置：

可以在下图选中区域设置以下 CSS 样式来配置问卷：

#app .button  //控制 Submit button 样式
#app .error-notify  //控制出错信息的样式
#app .title  //控制 title 样式
#app .description  //控制 description 样式
#app .field-header  控制 field header 样式
#app .field-title  //控制 field title 样式
#app .field-label  //控制 field label 样式
#app .field-value  //控制 text input 样式(包括 textarea)
#app .charket-cells  //控制整个 field 区域的样式
#app .charket-cells:before(after)  //可以设置区域的 border 等
#app .charket-cell  //控制单个 field 区域的样式
#app .charket-cell:before(after)  //可以设置区域的 border 等
#app .weui-cells_checkbox .weui-icon-checked:befor  //控制多选默认样式，建议自定义 {content, color}
#app .weui-cells_checkbox .weui-check:checked+.weui-icon-checked:before  //控制多选选择后的样式，建议自定义 {content, color}
#app .weui-cells_radio .weui-check:checked+.weui-icon-checked:before  //控制单选默认样式，建议自定义 {content, color}
#app .weui-cells_radio .weui-check:checked+.weui-icon-checked:before  //控制单选选择后的样式，建议自定义 {content, color}
#app .weui-cell_select .weui-cell__bd:after  //控制展开 picklist 选项图标的样式
#app .field-image__header //控制 Image 在 Survey Header 区域中的设置
#app .field-image__footer //控制 Image 在 Survey Footer 区域中的设置
#app .field-image__form //控制 Image 在 Survey Content 区域中的设置
#app .field-rich-text //控制 Rich Text 的设置
#app .field-rich-text__header //控制 Rich Text 在 Survey Header 区域中的设置
#app .field-rich-text__footer //控制 Rich Text 在 Survey Footer 区域中的设置
#app .field-rich-text__form //控制 Rich Text 在 Survey Content 区域中的设置
#app .field-image__{position}:nth-child(n) //控制 Survey 的位置。position 为 header/footer/content
#app .field-rich-text__{position}:nth-child(n) //控制 Rich Text 的位置。position 为 header/footer/content
Note: Firefox 中不支持 Datetime 类型的 Placeholder 设置