自动填充 Wufoo 表单字段和其他技巧

我已经有一段时间没有表达我对 Wufoo 的爱了。哦，甜蜜的 Wufoo。你美味的界面让表单构建变得容易，不，是一种乐趣。好吧，我不是诗人。我是一个解决方案整理者。

在使用 Wufoo 创建表单时，您会在 Wufoo.com 上获得一个特殊的 URL，您的表单驻留在该 URL 上。您可以将人们送到那里填写表单，但更常见的是，您将表单直接嵌入到您的网站中。您可以通过他们的主题管理器进行相当好的设计控制，或者通过自定义 CSS 进行完全控制。但是这些嵌入式表单通过 iframe 进来，或者通过提供的 JavaScript 代码进来，这些代码最终也会变成 iframe。因此，您没有标记控制权。（尽管如果您想让 HTML 做您自己的处理，它们有 模板）。这基本上是一件好事。这意味着您的表单将正确提交给 Wufoo，而不会让您有机会搞砸任何事情，并允许 Wufoo 正确处理它，并让您访问 Wufoo 所做的一切其他惊人功能。

现在假设我们想自动填充表单中的某些字段。 我们没有标记控制权，因此我们无法调整值. 而且由于表单位于 iframe 中，我们甚至无法使用 JavaScript 访问这些字段。幸运的是，Wufoo 提供了解决方案。如果您通过 JavaScript 嵌入方法（强烈推荐）进行嵌入，您可以传递一个defaultValues参数来自动预填充字段！

<script type="text/javascript">
                var x7x2q5 = new WufooForm();
                x7x2q5.initialize({
                'userName':'Wufoo-User-Name', 
                'formHash':'abc1234', 
                'autoResize':true,

                /* Autofill Magic! */
                'defaultValues':'field8=PREFILL-VALUE-HERE',
                
                'height':'562', 
                'ssl':true});
                x7x2q5.display();
 </script>

注意field8名称？每个字段都有一个像这样的编号名称。您可以通过进入表单的“代码”区域并单击“API 信息”按钮来找到这些值

因此，要在此示例中额外预填充电子邮件，您将使用“[电子邮件保护]”。您可以通过使用“&”分隔它们来预填充多个字段：“[电子邮件保护]&field6=name”。

用例场景

多次类似提交

对于新的 Digging Into WordPress 书籍，我们有一个用于 提交勘误表 的表单。该表单要求您提供页码、勘误表、姓名和电子邮件。我们已经有一些人非常慷慨地提交了很多很多小修正。每次他们提交表单时，都需要输入他们的姓名和电子邮件地址，这可能非常令人讨厌/重复。

因此，在这种情况下，我们需要使用来自上一次提交的值预填充表单。这引入了另一个小问题……我们如何才能访问刚刚提交的数据以便在预填充中使用？Wufoo 有一个 完整的 API，但现在我们不需要那么多。在编辑我们的表单时（在“表单设置”下），我们可以选择显示文本或重定向到网站。通常，只显示一些文本是一种显示确认的好方法，但我们将在此处使用重定向。重定向 URL支持模板，这意味着我们可以将一些特殊代码放在其中，以便将数据传递回我们自己的网站。

在勘误表表单的情况下，我们希望他们的姓名和电子邮件自动填写，以方便额外提交。因此，在查找了这些内容的字段 ID 后，我们的重定向 URL 将如下所示

http://digwp.com/book/errata/?field3={entry:Field3}&field4={entry:Field4}&field5={entry:Field5}

提交后，结果如下

http://digwp.com/book/errata/?field3=Chris&field4=Coyier&[email protected]

现在，在我们自己网站上的勘误表页面上，我们将尝试在页面加载时从 URL 中提取这些值

<?php

    function clean($value) {

       // If magic quotes not turned on add slashes.
       if(!get_magic_quotes_gpc())

       // Adds the slashes.
       { $value = addslashes($value); }

       // Strip any tags from the value.
       $value = strip_tags($value);

       // Return the value out of the function.
       return $value;

    }

    $firstName = clean($_GET["field3"]);
    $lastName = clean($_GET["field4"]);
    $email = clean($_GET["field5"]);

?>

那里的 清理函数 只是为了尝试防止恶意内容被输入 URL。

现在，在我们的 JavaScript 嵌入中，我们将回显这些 PHP 变量以进行预填充

'defaultValues':'field3=<?php echo $firstName; ?>&field4=<?php echo $lastName; ?>&field5=<?php echo $email; ?>',

应该这样就可以了！当然，您需要提供一些有关表单成功发送的反馈，因此只需检查其中一个变量是否存在并吐出一个消息

<?php if ($firstName) { ?>
            
   <div style="background: #d7ffd6; border: 5px solid #39c235; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding: 20px; margin: 0 0 25px 0; color: black; text-align: center; font: 18px Georgia, Serif;">
                 
      Thank you! We'll take a look and get 'er fixed for the next update.
                 
   </div>
            
<?php } ?>

传递（隐藏）信息

在 Are My Sites Up 上，我们有一个用于支持请求的 Wufoo 表单。如果我们知道用户的帐户 ID 是什么，那么我们可以更轻松地查找他们帐户的信息。但是人们不知道他们的帐户 ID 是什么。这并不重要。我们还有一个特定的设置，在进行支持请求时了解该设置非常重要。因此，在 Wufoo 中创建此表单时，我们将为此数据创建两个字段，但只需使用CSS 布局关键字，我们就可以将这些字段隐藏起来，以免显示给用户。

但即使它们被隐藏，也不意味着它们的不会提交！我们仍然可以自动填写它们。AMSU 是一个 Ruby on Rails 应用程序，在这个特定视图中，我可以访问此用户数据，因此我只是在嵌入表单时将它输出到 defaultValues 参数中

'defaultValues':'field6=<%= current_user.id %>&field8=<%= current_user.timeouts_enabled %>',

一点点行为监控

Wufoo 他们自己 在他们的支持表单上使用了这种技术。他们想知道用户在打开联系表单时位于网站的哪个页面（当时一定是在弹出窗口中）。他们使用了一些 PHP 来查看 URL 并将其插入表单中的隐藏字段中。重点是看看用户是否来自帮助区域（证明他们尝试过自己搜索问题）或没有。

如果您想了解用户在到达您的表单时来自哪里，您可以预填充 HTTP_REFERRER 的隐藏字段，这可能会很酷

$_SERVER['HTTP_REFERER']

它很容易被欺骗，而且通常不可靠，但对于像这样的一个小表单来说，它仍然可能收集一些有用的信息。