新建表单

新建 Form Builder

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

1____Form_Builder.png

进入到 Form 列表页面：

2_____Form_____.png

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

3____New________Name.png

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。

____.png

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

1.png

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

close chat.gif

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

6_Masked____.jpeg
  • Form 支持收集客户地址信息，用户在创建表单时，在页面左侧的 Common Items 中拖拽或点击 Address 类型将其加入到 B 区，然后在 C 区选择保存地址的字段，还可以设置地址在表单中的样式显示以及默认值。
close chat.gif
    • Display Language: 分别为 Chinese 和 English。
      • Chinese: 在手机端和电脑端显示中文的地址。
      • English: 在手机端和电脑端显示英文的地址。
    • Saved Language: 分被为 Chinese 和 English。
      • Chinese: 提交表单后，Salesforce 中保存的地址为中文。
      • English: 提交表单后，Salesforce 中保存的地址为英文。
  • Screenshot 2025-08-14 at 18.11.50.png
  • Form 中的 Phone 类型字段将支持发送短信验证码，用户在表单中点击“获取验证码”后， 需填入通过短信收到的验证码后再提交表单。增加此验证步骤，可确保 Lead / Contact 手机号码的准确性，提升数据质量。

Screenshot 2025-08-13 at 14.22.34.png

手机端显示样式：

WechatIMG52.jpg

Note：企业使用此功能，需单独安装 Charket SMS Package。

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

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

手机端显示如下：

8___Form_Build___Common_Items_____Decision_Box________.jpeg

  • Form Builder 支持在 Form Header，Form Content 和 Form Footer 中添加 Image 组件。在 Form Builder 页面左侧的 Common Items 模块中将 Image 组件拖拽到 Form 中需要添加 Image 的区域，然后设置下面字段：
    • Image URL: 需要添加图片的 URL。
    • Fit to Width: 是否适配 Form 的宽度。
    • Redirect URL: 在  Form 中点击图片后可以跳转的目标页面的 URL。
    • Alternative Text: 替代文本。如果 Form 中的图片加载不出来时，可以显示该文本。
    • Hidden: 隐藏配置。

Screenshot 2025-08-13 at 17.44.52.png

  • Form Builder 支持在 Form Header，Form Content 和 Form Footer 中添加 Rich Text 组件。在 Form Builder 页面左侧的 Common Items 模块中将 Rich Text 组件拖拽到 Form 中需要添加的区域，然后设置下面字段：
    • Content: 在富文本编辑器中可以设置需要的样式。
    • Hidden: 隐藏配置。

Screenshot 2025-08-13 at 17.49.43.png

设置样式

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

Page 模块的配置：

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

Form Builder 如下配置：

Screenshot 2025-08-13 at 15.04.05.png
DESKTOP 界面预览如下图所示：
Screenshot 2025-08-13 at 14.36.40.png

Form 模块的配置：

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

11_Error_Text_Color_____________.jpeg

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：字体颜色/字体大小。
  • Horizontal Padding/Vertical Padding: 水平填充/垂直填充。
  • Radius: 圆角半径。
  • Border Thickness: 边框厚度。
  • Border Color: 边框颜色。
  • Width:
    • percent：百分比
    • pixels：像素

Advanced 高级设置：

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

Screenshot 2025-08-13 at 14.39.33.png
*  #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 选项图标的样式
*  #app .field-input::placeholder //控制 Text 类型字段的 placeholder
*  #app .field-textarea:: placeholder //控制 Textarea 类型字段的 placeholder
*  #app .filed-date_placeholder //控制 Datetime/Date 类型字段的 placeholder
*  #app .field-select:invalid //控制 Dropdown 类型字段的 placeholder
*  #app .field-image__header //控制 Image 在 Form Header 区域中的设置
*  #app .field-image__footer //控制 Image 在 Form Footer 区域中的设置
*  #app .field-image__form //控制 Image 在 Form Content 区域中的设置
*  #app .field-rich-text //控制 Rich Text 的设置
*  #app .field-rich-text__header //控制 Rich Text 在 Form Header 区域中的设置
*  #app .field-rich-text__footer //控制 Rich Text 在 Form Footer 区域中的设置
*  #app .field-rich-text__form //控制 Rich Text 在 Form Content 区域中的设置
*  #app .field-image__{position}:nth-child(n) //控制 Image 的位置。position 为 header/footer/form
*  #app .field-rich-text__{position}:nth-child(n) //控制 Rich Text 的位置。position 为 header/footer/form
Note: Firefox 中不支持 Datetime 类型的 Placeholder 设置。

预览表单

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

13_____.png
Charket
扫码获得帮助