新建表单

新建 Form Builder

在 Charket 页面点击【Charket】选项卡，然后点击 Forms。

进入到 Form 列表页面：

点击【New】，填写表单的 Name，选择相关联的对象（Contact、Lead 和 WeChat Follower），选择关联的微信公众号。如下图所示：

Note：如果 Salesforce Object 选择为 Lead 或 Contact，会出现以下几种情况：

1. 当用户是一个已关注的用户，并且关联了 Lead 或 Contact，这样可以通过编辑表单对该 Lead 或 Contact 的信息进行更新。
2. 当已关注的用户没有关联 Lead 或 Contact，在提交 Lead 表单或 Contact 表单后会创建一个 Lead 或 Contact 并与该关注者相关联。
3. 作为一个全新的用户时，如果不用扫描二维码而直接打开一个 Lead 或 Contact 表单，会创建一个匿名用户，不显示在关注者列表中。

如果 Salesforce Object 选择为 WeChat Follower，那么用户可以对其信息通过表单来进行更新。

在完成上述操作后，点击 Save 到新建表单页面，表单名字下方可加入文字描述，支持加入超链接。在微信中分享给好友的表单，可以直接显示设置的 Title 和 Description。

Note：需登陆到微信后台，点击公众号设置 -> 功能设置 -> JS 接口安全域名 ，输入 Salesforce org 的域名后，即可在微信聊天页面查看分享的表单的 Title 和 Description。

从 A 区的 Fields 区域拖拽或点击需要的字段将其加入到 B 区；也可以从左侧的 Common Items 区域拖拽或点击需要的类型将其加入到 B 区，在 C 区的 Object Field 中选择需要的字段。

刚打开新建页面时表单中加载的字段都是必填字段，这些字段是不能删除的，如果不想在页面上显示该字段，可以在 C 区选中 Hidden 后点击保存，会将该字段隐藏起来。
如果要替换表单中的字段，就在 B 区中选中该字段，然后在 C 区中选择您想要的字段。还可以修改字段的 Label，Placeholder，设置默认值，并且在 Options 中可以设置字段为必填、只读、隐藏和标记等功能。

Required：必填字段
Read Only：只读字段
Hidden： 隐藏字段，隐藏掉整个字段块
Masked： 遮罩，选中该选项，会将表单中该字段右边眼睛部分遮盖起来，如图：

• Form 支持收集客户地址信息，用户在创建表单时，在页面左侧的 Common Items 中拖拽或点击 Address 类型将其加入到 B 区，然后在 C 区选择保存地址的字段，还可以设置地址在表单中的样式显示以及默认值。

• Form 还支持决策框，方便企业在表单中加入服务条款，订阅邮件等表单元素。具体操作如下：

从 Form Build 的 Common Items 中拖拽或者点击 Decision Box 类型将其加入到中间部分，然后从右侧的 Object Field 中选择需要的字段，并设置默认值，最后点击保存。

手机端显示如下：

设置样式

如果要为表单设置样式，可以通过 Style 功能来实现，其中 Style 包括 Customize 设置和 Advanced 设置，下面介绍下该功能的作用。

Page 模块的配置：

Background 和 Background Image: 表单页面的背景色和背景图片。可以在 Preview 的 DESKTOP 界面查看配置效果。

Form Builder 如下配置：

Form 模块的配置：

Background：表单的背景色
Error Background：提交表单时报错信息的背景色。
Error Text Color：表单报错信息的字体颜色。

Items 模块的配置：

Required Icon：必填字段的设置图标。一般而言，设置为 Red Asterisk。
Heading Font Size 和 Heading Text Color：Heading 的字体大小和字体颜色。
Label Font Size 和 Label Text Color：标签的字体大小和颜色。
CheckBox & Radio Button Checked Color：复选、单选选中的颜色显示。

Button 模块的配置：

Button Background、Button Font Color 和 Button Font Size：分别指表单按钮的背景色、字体颜色和字体大小。

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:before  //控制多选默认样式，建议自定义 {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 选项图标的样式

预览表单

如果您想要查看表单的效果，可以点击【Preview】去预览。