最新消息:此站用于个人创业记事,欢迎留言交流,请勿转载!

wufoo表单的高阶用法——跟踪你的用户(2)

建站 不离客 1041浏览 0评论

要动态的部署wufoo表单,首先我们要了解一下wufoo是如何部署到我们的网页中来的。我们在wufoo里面做好表单之后,最终是需要用代码或者链接的形式部署到网站中的。用鼠标点击表单上的“share”按钮,我们便能看到各种部署表单的方式。

wufoo-form-6

在上一节中我们讲到在设计表单时直接预设值,但是那样无法做到动态,因此我们现在在代码中预设值。好处就是只需要在同一张表单代码后面加不同的参数,那么预设值就会根据参数而变化。至于表单的预设值如何根据参数而变化,如果你有兴趣深入了解的话可以参照wufoo官方的说明:URL modifications,本文将用例子简单说明。在“Share”页面的右上角有一个“API Information”按钮,点击进去以后,我们能够看到表单中每一个Field都有一个API ID。

wufoo form 7

要给某个Field预设值,在API ID前面加上Field然后再赋值即可,例如:Field7=Homepage 。具体在代码中怎么用呢,我这里主要讲在3种代码中的运用:

第一种. 如何在表单的URL链接中预设值,默认的链接是:

https://bldcpump.wufoo.com/forms/wufoo-ce/

预设值以后的URL链接变为:

 https://bldcpump.wufoo.com/forms/wufoo-ce/def/field7=Homepage

当你把它部署到不同的页面时,便可修改Homepage为你为该页面设定的标识或者代码。

第二种. 如何在Embed Code代码中预设值:大部分的时候我们将表单嵌套在产品页面的下方,因此这是最主流的用法,由于代码较长,这里我只贴上修改好的代码

<div id="wufoo-rpu9bfu1u4h26p">
Fill out my <a href="https://bldcpump.wufoo.com/forms/rpu9bfu1u4h26p">online form</a>.
</div>
<script type="text/javascript">var rpu9bfu1u4h26p;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'bldcpump',
'formHash':'rpu9bfu1u4h26p',
'autoResize':true,
'height':'582',

// NOTE: 添加下面这行代码即可,本行为注释无须添加,Homepage可以根据需要修改
'defaultValues':'field7=Homepage',

'async':true,
'host':'wufoo.com',
'header':'show',
'ssl':true};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { rpu9bfu1u4h26p = new WufooForm();rpu9bfu1u4h26p.initialize(options);rpu9bfu1u4h26p.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');></script>

第三种. 对于使用Wordpress建站的朋友,部署表单有更加简单的方法,那就是使用Wufoo Shortcode Plugin插件,此时在短代码中预设值变得更加简单:

默认插入的短代码是

[wufoo username=”bldcpump” formhash=”rpu9bfu1u4h26p” autoresize=”true” height=”582″ header=”show” ssl=”true”]

预设值之后的短代码变为

[wufoo username=”bldcpump” formhash=”rpu9bfu1u4h26p” autoresize=”true” height=”582″ header=”show” ssl=”true” defaultv=”Field7=Homepage”]

此时,我们已经能够做到动态的部署表单了,即将表单部署到不同的网页时只需要给出该网页对应的标识(本文中用的是Homepage,你可根据需要自行命名)。这样一来我们就能够准确的分析出所有的表单数据主要来自于哪些页面,进而对没有数据提交的页面进行改进或者删减。

然而实际上这种部署表单的方法也只能称为半自动,因为我们需要手动的部署表单,如果你的网站不大、需要部署表单的页面较少,用这种方法倒也稳定可靠,不失为一种选择。可是如果你的网站很庞大,需要部署表单的页面很多,我们往往会将表单部署到页脚或者边栏这种地方,由于大量网页共用同一个页脚或边栏,这时我们便再也无法判断表单数据到底来自于哪个页面了。下一篇我们讲讲如何部署全自动抓取URL的Wufoo表单到网站中。

转载请注明:不离客 » wufoo表单的高阶用法——跟踪你的用户(2)

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址