1.联系表单/Contact Form

Dre发表于:2016年01月26日 18:22:46更新于:2018年01月12日 10:30:37

无广告视频教程

联系表单


联系表单/Contact Form

联系表单属于基础组件,主要用于常用数据的收集,如联系方式、姓名等。

联系表单是基础组件,存在一些局限性,像输入框类型和占位提示语言,建议不要修改;如果对样式有更多需求,建议特别是付费用户使用高级表单。


一、添加方式:

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

image.png


二、结构简介:

联系表单由三种子元素组件构成,默认显示如图:

image.png

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

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

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


三、可根据需求设置(也可使用默认的):


1.选择要显示的输入框

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

image.png

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

a.设置初始显示值

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

image.png

b.占位提示语

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

image.png

c.也可在灰黑色的快捷面板中快速修改样式。

image.png

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

image.png

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

image.png

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

image.png


四、提交按钮图片设置

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

image.png



五、如何提示用户表单提交成功?


现在提交后的提示已经优化,点击提交后系统自带提示。如图:

image.png

如果不想使用该提示,仍可在提交按钮上设置自己的提示样式,设置后系统提示自动取消 。步骤如下:

提交按钮触发器设置:

提示一般是提示一张 “提交成功”的图片或跳转到下一页等,如图:

image.png

一般将提示元素设置为其他提示元素,或者提交成功后跳转页面的触发器行为。

设置步骤:添加提示成功图片设置初始隐藏,1.选中提交按钮——2.给它设置触发器成功时——3.显示元素——4.选择要显示的元素——5.点击橙色对号确认。

image.png

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

0015a02edd34f697feb237445c2b4d0

六、收集数据在哪查看?


收集到的数据,两种方式可以查看

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

image.png

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

image.png

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

image.png


FAQ:


Q:为什么我设置了不显示某些项目,刷新之后又出现了?

A:可以用手机预览一下看看,其实已经没有了。只是在编辑器里面会显示。

Q:提交完成后没有提示么?

A:是的,需要自己进行设置提交完成后的触发动作。

提交按钮上有相应的触发器,可以自行设置触发完成后的动作反馈。诸如显示元素、播放动画、跳转页面之类。

image.png

下一篇:2.表单/FormView

下一篇:3.高级表单


回复(15)