表单的进阶用法:引用、转发与二维码

码小哥

载入中...

表单的进阶用法 表单有很多种用途,除了常见的填写并提交到后台“用户反馈”记录外,还可以用于设计允许访问者填写内容的各种祝福卡片、填写并生成二维码报名表等。 你可以试试在微信中访问本示例,填写必要的文字,生成生日卡片,转发给其他人,对方看到的将是写有你祝福语的个性化卡片。

表单的进阶用法

表单有很多种用途,除了常见的填写并提交到后台“用户反馈”记录外,还可以用于设计允许访问者填写内容的各种祝福卡片、填写并生成二维码报名表等。


你可以试试在微信中访问本示例,填写必要的文字,生成生日卡片,转发给其他人,对方看到的将是写有你祝福语的个性化卡片。

引用、转发与二维码
$(to|亲爱的)
$(text|祝你生日快乐!)
$(from|你的朋友)
⇐ 制作贺卡
转发贺卡 ⇗
点击微信右上角菜单,选“转发给朋友”,传递你的祝福吧!
扫码查看此贺卡
1、创建有名字的表单项 
2、依名字引用表单内容 
3、设置转发内容 
附:二维码传递表单内容 
创建表单项

当我们向页中添加构件时,可快速从右侧的页布局中,选取某种类型的表单(文字、文本区、照片等),直接添加到页面中。在用户反馈提交这类的简单用法中,无需对新添加的表单项做太多的设置即可工作。

为了更好地与访客互动,我们可以利用访客填写的表单内容,做出更有趣有用的互动文档。这一切的基础是,给每个表单项起个名字。


如上图所示,示例中贺卡接收方名字填写区,是个基本的文字输入表单。不同的是,这个表单项有个变量名字 “ to ”

对于变量名字,需要注意这些:

当访客填写了这个表单项后,我们就可以在作品中任意地方引用访客填写的这个内容了。

引用表单内容

如表单设置页签中的提示所说,我们可以在作品中任意文本内容(构件文字、设置项输入框等)中,以特殊的记号引用这个名字的变量(例如访客填写的表单项内容)。

引用变量值的记号,统一为 英文 $ 符号开头,紧接着以英文小括号 () 包围起来。例如:


$ (to) 表示在这个地方填写 to 这个变量的内容,比如 “我的朋友$ (to),你好!”,实际显示为 “我的朋友小明,你好!”

$ (to|小明) 则表示,如果 to 这个变量中没有内容(比如访客没填写东西),用“小明”字样代替。其中竖线为英文竖线,$( 之间没有空格。

注意:实际使用中,$和括号()之间不能有空白

引用访客输入的内容后,就很容易构造出个性化的贺卡或其他类型页面了。
设置转发内容

除了将访客填写的这些内容提到到后台用做用户反馈外,还可以在转发当前作品时,带上访客填写的这些内容,实现自定义贺卡之类的互动功能。



如上图所示,为了达到这样的效果,我们需要做这些操作
  • 在页面中添加一个生成按钮
  • 设置上点击后的动作
    • 检查访客输入的内容是否符合要求
    • 记住输入的内容
    • 跳转到结果页

  • 在结果页中任意构件中,添加上进入页面动作,记录该页为入口页(这样收到转发的人直接看到的是贺卡页面)



做好以上设置后,晒网的服务器将自动记录下当前访客输入的内容,在其他设备上(如转发到朋友的手机上)将会载入并显示出这些内容,无需做更多的设置或建立自己的服务器后台。

提示:通过微信转发传递表单内容,因缓存原因,再次访问时可能会有数分钟的更新延时。初次访问不受影响。
二维码传递表单
通过前面的设置,已经可以实现转发后带上访客输入的个性化内容功能了。

如果你有用二维码传递这些内容的需要,请继续浏览这篇说明。

想象一下,访客填写了一个报名表,生成了一个专属的二维码。他将这个二维码保存下来,参加你组织的活动时,出示这个二维码,工作人员用微信、支付宝之类的扫一下,就可以看到报名内容,并登记到后台,是不是显得挺酷?

实现这样的功能,你无需架设服务器,做后台开发,简单地用晒网就可以搞定。