1.联系表单/Contact Form

Dre发表于:2016年01月26日 18:22:46更新于:2019年07月19日 10:04:53

视频教程


一、案例效果

0015cb05fc6c048a62265bf2c878dda

《企业年会滑动视差邀请函 》


二、应用场景

联系表单属于基础组件,主要用于常用数据的收集,如联系方式、姓名等。联系表单是基础组件,存在一些局限性,像输入框类型和占位提示语言,建议不要修改;如果对样式有更多需求,建议升级至付费用户使用高级表单。


三、组件用法

基本用法

1.点击组件中的联系表单标识,即可添加到页面中。

image.png


2.添加后的联系表单是下图中的5个输入框,1个提交按钮,1个小人标志。

(1)输入框部分主要让用户输入对应信息;

(2)提交按钮用于提交信息的一些设置;

(3)选择标识用于选择整个联系表单组件,方便删除整个联系表单或设置相应参数。

image.png


3.选择联系表单的任意输入框小人标识,右侧属性面板显示相关参数设置,通过勾选元素组件属性,可以决定某个输入框是否显示在页面上。

image.png


4.设置初始显示值、占位提示语或输入框样式。

(1)设置初始显示值。选中任意一个输入框,可以在右侧设置初始显示的值,如地址信息。如图:

image.png


(2)占位提示语。可占位提示语(即用户填写前的提示),默认的是请输入名称。但我们可以简单修改为请输入姓名。注:该输入框的类型是文本。如图:

image.png

注:后台收集数据时,收集这项数据的标题不会变。如输入框原本用来收集的是姓名,占位提示语改成收集“型号”,在后台查看数据的时候,收集到的信息会在姓名那一列显示。主标题项是不会改变的。如图:

image.png

目前的解决方式: 一、使用默认的不修改;二、输入框的类型是文本或者数值的时候,不要随意更改要输入的信息类型,如在收集输入框的位置输入文字或者其他不符合手机格式的数值,都会出现下图中的提示。当然,付费用户可以考虑使用高级表单

image.png


(3)也可在灰黑色的快捷面板中快速修改样式。

image.png


5.除了以上的设置,还可以给每个输入框设置动效、动画、触发器等。

image.png



高级用法

1.提交按钮。提交按钮的图片也是可替换的,按钮选中状态下,点击替换标识可替换素材。如图:

image.png


2.如何提示用户表单提交成功?现在提交后的提示已经优化,点击提交后系统自带提示。如图:

image.png


3.如果不想使用上图提示,可在设计自己的提示图,设置后系统提示自动取消 。

image.png


4.补充:点击提交后,提交成功后的信息被收集到作品后台。同时输入框内已经输入的信息会被清空。如果用户再次输入提交成功,那么该用户的输入信息就是2条,依次类推。如图:

0015a02edd34f697feb237445c2b4d0


5.收集数据在哪查看?收集到的数据,两种方式可以查看:

(1)选中任意输入框或小人标识,右侧元素组件属性面板中找到查看表单数据。进入到数据收集面板查看收集的数据。

image.png


2)可以在切换到工作台页面——选中指定作品封面——点击“访问统计”选项查看,如图:

image.png


进入到我的工作台-点击第三个数据收集即可看到,如图:

image.png


回复(15)