表单设计器

本页导航

  1. 概述
  2. 界面说明
  3. 添加字段
  4. 复制和删除字段
  5. 编辑字段属性
  6. 编辑表单属性

概述

表单设计器是表单大师的核心,所有表单都是通过表单设计器创建出来的。表单设计器采用所见即所得的操作方式,可以方便地进行添加或修改表单字段,设置表单属性等操作,使您在几分钟之内便可以设计出非常专业的表单。

界面说明

表单设计器界面分为两个主要区域组成,左侧是可供选择使用的所有字段类型,右侧是表单属性设置区域,通过这两个区域能进行以下操作:

  • 添加字段:左侧显示了表单大师支持的所有字段类型,可以通过点击或拖动相关按钮向中间设计区域添加字段。
  • 表单属性设置:当选中中间设计区域的一个字段或表单名称后,可直接设置表单字段的相关属性以及定义表单名称和表单描述。

在表单预览区域,点击表单属性页面右上角的小眼睛可直接预进行览。如图:

添加字段

有两种方式可以向表单中添加字段:

  • 一是通过点击或拖动相关按钮可以向表单中添加字段。如果是点击,则会将字段添加到表单的末尾,如果是拖动,可以将字段添加到表单的任意位置。
  • 二是通过复制添加字段。如果表单中已经有了字段,先选中该字段,然后点击“+”图标可以以此字段为模板复制一个新字段。

通过HTML添加图片和链接

首先,需要在表单中添加一个HTML类型的字段,然后在其"HTML内容"属性中根据需要输入以下代码片段。

  • 插入图片(其中红色标注部分需要换成您需要插入图片的链接地址。)
    推荐几个支持外链的网站: 搜狐博客博客园CSDN贴图库photobucketimagebam <img src="http://www.jsform.com/rs/images/formexamples.jpg" style="width:100%;">
  • 插入链接(其中红色标部分需要换成您的链接地址和链接文字) <a target="_blank" href="http://www.jsform.com">链接文字</a> 效果预览:链接文字
  • 插入可在手机上直接拨打电话的链接(其中红色标部分需要换成您的电话号码) <a href="tel:13800138000">1380-0138-000</a> 效果预览:1380-0138-000
  • 插入加粗字体 <strong>我是粗体</strong> 效果预览:我是粗体
  • 学习HTML语言,插入更多元素:http://www.w3school.com.cn/html

复制和删除字段

如果表单中已经有了字段,先选中该字段,点击“+”图标可以以此字段为模板复制一个新字段,点击“-”图表将会删除此字段。

注意:如果表单已经保存,意味着已经可以通过表单提交数据,此时如果要删除字段,会得到“建议您先将数据导出后再删除字段! 删除将导致已提交的数据和报表中此字段对应的值被清空,且不可恢复。确认删除吗?确认删除请输入"yes"”的提示,输入“yes”后将删除与此字段相关的所有数据(如果已经有提交的数据,相关数据的此字段值将被清空),点击“取消”忽略操作。

编辑字段属性 观看视频说明

如果表单中已经有了字段,在预览区域点击选中该字段,此时左侧的“表单属性”页签将会被自动选中,同时页签内会显示此字段相关的所有属性(不同的字段类型,可以设置的属性项不同)。 点击相关属性旁边的“(?)”,可以显示此属性的相关帮助说明。

表单填写关联 观看视频说明

  • “表单填写关联”类似搜索引擎的自动提示效果,根据输入的值与指定的表单和字段进行匹配,实现自动完成输入。目前只有文本框和下拉框字段支持此设置。
  • “同时根据匹配到的数据自动填充其它字段”是指依据上述自动匹配的字段,当匹配到数据后,自动带出此条数据的其它字段的值作为此字段的值。

注意: 1、若要进行此设置,表单中必须至少有一个设置了“表单填写关联”的字段。 2、为了数据安全,需要登录用户才能使用此功能。 3、需要支持多表单关联(专业版及以上)才能使用此功能。

接下来,以一个企业中常见的合同管理的例子进行说明。其中涉及到两个表单——“客户信息表”和“合同登记表”,这两个表的字段分别如下:

字段名输入类型
合同编号文本框
甲方单位文本框
甲方联系人文本框
甲方联系方式电话
乙方单位文本框
乙方联系人文本框
乙方联系方式电话
合同金额价格
合同附件文件上传
备注多行文本
字段名输入类型
客户名称文本框
联系人文本框
手机电话
地址地理位置

将乙方单位、乙方联系人、乙方联系方式的约束分别进行如下设置:

最后,看一下效果吧。当输入“科技”时会进行自动匹配,当选择“华为科技有限公司”时,会自动带出相关的联系人和联系电话:

数据查看关联 观看视频说明

  • “数据查看关联”将两个不同表单性质相同的字段进行关联,关联之后在数据管理后台点开A表单中的某条数据就可以同时看到B表单内的关联数据。例如将客户信息表单的客户名称和合同信息表单的乙方单位进行字段关联, 即这两个字段的内容相同时,那么查看客户信息表中的某条数据时,选择被关联表单合同信息表就可以同步看到客户信息表中的关联数据。

    将客户信息表的客户名称和合同信息表的乙方单位在数据查看关联作如下设置:

    最后,看一下效果吧。在客户信息表数据后台,选择关联表单“合同信息表”,客户信息表单中的客户名称是“小米科技”,合同信息表的乙方单位也是“小米科技”,则会自动同步显示合同信息中的内容,如图

编辑表单属性

点击预览区域中顶端的表单名称,左侧的“表单设置”页签将会被自动选中,同时页签内会显示此表单相关的所有属性。 点击相关属性旁边的“(?)”,可以显示此属性的相关帮助说明。

商品在线支付和促销

表单大师支持在表单中添加商品,包含商品的表单还可以与支付宝集成,轻松实现在线支付。

  1. 第一步:在表单中添加商品字段,可以是配图商品或是无图商品。
  2. 第二步:在表单页签,点击表单名称下方的“设置”,勾选“在线支付”,选中支付参数,勾选启用在线支付,设置支付宝和促销相关属性即可。

注意:1、在线支付需要您先开通支付宝或者微信支付的商家服务,并经支付宝或微信商家审核并生效,且在选择“支付宝接口类型”时必须与您开通的支付宝接口类型一致,否则可能导致未知错误。2、由于阿里和腾讯的关系,除签约手机支付宝外,其它支付类型均不能通过微信访问。(直接通过手机浏览器访问不受影响)

开通支付宝商家服务

包含商品的表单,可以与支付宝集成,完成在线支付,但需要开通支付宝商家服务才能使用。具体开通方法为:登录进支付宝,进入“产品商店”菜单,选择您需要开通的服务,按提示操作就可以了。

查看支付宝PID/KEY

只需要提供支付宝的登录邮箱和PID/KEY,不需要任何专业编程知识,就可以与表单大师轻松集成了。查看PID/KEY的方法为:登录进支付宝,进入商家服务,点击“我的商家服务”菜单,就可以看到了,如下图。

微信支付设置

说明:在进行如下配置前,需要先在微信公众平台中申请开通微信支付,申请方式请参见微信公众号相关说明,申请成功后才能进行如下配置。
  • 第一步:按照图例,将微信相关参数复制到表单大师中。
  • 第二步:进入“微信支付->开发配置”,修改“支付配置”,启用JSAPI网页支付并添加支付授权目录:"www.jsform.com/web/formpay/"。
  • 第三步:进入“开发者中心->接口权限表->网页授权获取用户基本信息”,点击修改,将“授权回调页面域名”设置为:"www.jsform.com"。

公开数据查询 观看视频说明

当勾选“允许未登录用户查询数据”后,将对外发布一个查询页面,未登录的用户也可以通过此页面查询表单提交的数据,通常用于通讯录查询,执行进度查询,成绩查询等场景。

出现公开数据查询的详细参数设置界面,您可以设置查询条件字段、查询结果显示字段及是否需要提供密码才能查询等设置。最后保存设置,显示查询地址。会出现查询地址链接和查询二维码,将其发布出去就可以实现公开查询了。