This is article was sponsored by Wufoo. Thank you for supporting the sponsors who make SitePoint possible!
本文是由Wufoo赞助的。 感谢您支持使SitePoint成为可能的赞助商！
Forms. A necessary evil in today’s online world. Collecting important data since the world wide web began, these website components can be frustrating, at best – even for seasoned developers. From dynamic JavaScript actions to secure connections, web forms are often far more complicated than it seems they should be.
形式。 当今在线世界中必不可少的罪恶。 自万维网开始收集重要数据以来，这些网站组件充其量只会使他们感到沮丧，即使对于经验丰富的开发人员也是如此。 从动态JavaScript动作到安全连接，Web表单通常比看起来要复杂得多。
This is where my own personal experience comes in. Recently contacted by a client to put together a relatively simple site, I was confronted with an unsettling revelation. Out of all the separate pieces to this rather small project, the most time consuming and difficult part was shoehorning a dynamic yet elegant form for collecting critical information. There had to be a better way.
这是我个人经验的来源。最近，一位客户联系我以建立一个相对简单的网站，我面临着一个令人不安的启示。 在这个相当小的项目的所有单独部分中，最耗时和最困难的部分是建立一种动态而优雅的形式来收集关键信息。 必须有更好的方法。
Enter Wufoo. A form creation service aimed at non developers looking to include highly functional forms in their websites without the help of developers. Though it may seem counter-intuitive for a developer like myself to make use of a service that prides itself on developer-less use, I decided to take a look. What have I got to lose anyways, right?
输入Wufoo 。 表单创建服务面向非开发人员，他们希望在无需开发人员帮助的情况下在其网站中包含功能强大的表单。 尽管对于像我这样的开发人员来说，使用以无需开发人员的使用为荣的服务似乎是违反直觉的，但我还是决定看看。 反正我要失去什么，对吗？
For those that haven’t heard of Wufoo, it’s essentially a pretty interface for creating complex web forms. Wufoo sells a service not a specific piece of software and, as such, users that land on the company’s website are directed to create a Wufoo account that will be used to utilize the creation tools. Being geared towards the not-so-technical crowd, all forms created are stored on Wufoo’s own servers along with the data they collect.
对于那些还没有听说过Wufoo的人，它本质上是一个用于创建复杂Web表单的漂亮界面。 Wufoo出售的服务不是特定的软件，因此，定向到公司网站上的用户将被创建一个Wufoo帐户，该帐户将用于创建工具。 为了适应技术水平不高的人群，创建的所有表格及其收集的数据都存储在Wufoo自己的服务器上。
There are obvious advantages to this service based approach. First and foremost, the intricacies of secure data collection are automatically taken care of. This includes databases, backend code, and form scripts. Secondly, all forms created can be easily managed in one location and also reused as many times as necessary.
这种基于服务的方法具有明显的优势。 首先，自动处理安全数据收集的复杂性。 这包括数据库，后端代码和表单脚本。 其次，所有创建的表单都可以在一个位置轻松管理，并根据需要重复使用多次。
While these features are no doubt a strong selling point for Wufoo’s intended audience, there was a slightly different aspect of these services that grabbed the attention of a development minded chap such as myself. That is, useful APIs and code export functionality.
虽然这些功能无疑是Wufoo预期目标人群的主要卖点，但这些服务的某些方面却引起了诸如我本人这样的具有发展意识的家伙的注意。 也就是说，有用的API和代码导出功能。
Before we get into the nitty gritty of form creation with Wufoo, let me lay out the task I had set before me. The client wanted a customer feedback form to capture responses to various questions. The form was to be laid out in a multi-page fashion with both dynamic and static fields. Certainly a manageable request that could have easily been accomplished quickly with any number of online form generators. Unfortunately for me, the client was making use of a custom web framework and needed their questionnaire to integrate seamlessly with the look and feel of their homegrown design.
在使用Wufoo进行表单创建时，让我介绍一下摆在我面前的任务。 客户想要一个客户反馈表来捕获对各种问题的答复。 表单将以多页的方式布置，包括动态字段和静态字段。 当然，可以通过任何数量的在线表单生成器快速轻松完成的可管理请求。 对于我来说不幸的是，客户正在使用一个自定义的Web框架，并且需要他们的调查表将其与自己设计的外观无缝地集成在一起。
With these guidelines in mind I dove headfirst into the GUI wizardry of Wufoo, holding fast to the hope that this tool would allow me to produce a full featured, integrated form in a fraction of the time.
在牢记这些指导原则的前提下，我首先进入Wufoo的GUI向导，坚信希望该工具可以使我在短时间内生成功能全面的集成表格。
Upon logging in to the service for the first time I was greeted with an empty form manager with big bold letters showing the way to the form creation tools.
第一次登录该服务时，我遇到了一个空的表单管理器，上面带有大胆的粗体字母，显示了表单创建工具的方式。
An empty form waiting for fields:
等待字段的空表格：
Jumping right, in I began dragging and dropping fields into an empty canvas. The first page was to be a simple contact information page with text fields for name and address all the way to date components for capturing a user’s birthday. A few clicks here, a few drags there and before I knew it I had the first section completed to spec.
向右跳，我开始将字段拖放到一块空白画布中。 第一页是一个简单的联系信息页面，其中包含用于输入姓名和地址的文本字段，以及用于捕获用户生日的所有日期组件。 在这里单击几下，在这里拖动几下，在我不知道它的前提下，我就完成了第一节。
First section complete:
第一节完成：
At this point my inner developer started leaking out with typical criticisms of GUI laden web tools. The most vocal of which was the fact that I had yet to write a single line of code. I didn’t really need to. Whenever I dragged an element into the form, all tags and scripts were created and added to the form behind the scenes.
在这一点上，我的内部开发人员开始泄漏带有GUI的Web工具的典型批评。 最有说服力的是我还没有编写一行代码的事实。 我真的不需要。 每当我将一个元素拖到表单中时，就会创建所有标签和脚本并将其添加到幕后。
Knowing full well that I would need to include class names for the existing styles the client was using I found my way to some more advanced options. In the left hand pane where all the neat form elements were listed, I discovered a quick click of any part of my created form would open up a context sensitive menu such as this:
完全了解我需要为客户正在使用的现有样式包括类名，我找到了一些更高级的方法。 在列出所有简洁表单元素的左侧窗格中，我发现快速单击创建的表单的任何部分都会打开一个上下文相关菜单，如下所示：
You’ll notice this menu contains handy options common to whatever form element you have selected. In this case it was the “Email” field. While it was certainly convenient to toggle permissions and attributes with the click of a button, the “CSS Layout Keywords” got me the most excited. With this functionality I could simply add class keywords to any form element based on my current knowledge of the client’s CSS. When my form was finished I would simply need to export the corresponding code and place it in the website framework without having to manually apply any styles.
您会注意到此菜单包含一些方便的选项，这些选项对于您选择的任何表单元素都是通用的。 在这种情况下，它是“电子邮件”字段。 通过单击按钮切换权限和属性当然很方便，但是“ CSS布局关键字”让我最兴奋。 借助此功能，我可以根据对客户端CSS的当前了解，简单地将class关键字添加到任何表单元素中。 填写完表格后，我只需要导出相应的代码并将其放在网站框架中，而无需手动应用任何样式。
Speaking of exporting, I took the liberty of testing the true usefulness of Wufoo for a developer like me before I even finished the form. I figured I might as well see if this solution was really going to be flexible enough to seamlessly integrate into a custom web site design.
说到导出，我什至没有完成表格，就自由地测试了Wufoo对于像我这样的开发人员的真正用处。 我想我也很想知道该解决方案是否真的足够灵活，可以无缝地集成到自定义网站设计中。
Navigating to the “Code Manager” of my Wufoo account brought up a menu with several options for publishing my newly created form:
导航到我的Wufoo帐户的“代码管理器”，弹出菜单，其中包含用于发布我新创建的表单的几个选项：
Among the more pedestrian choices of simple links to the Wufoo hosted form, I opted for the complete HTML/CSS Code download. This option gave me a neat ZIP file of the form code complete with script, image, and CSS folders. Inside I found the actual HTML code taking up residence in the root level index.html file of the ZIP archive.
在到Wufoo托管表单的简单链接的更多行人选择中，我选择了完整HTML / CSS代码下载。 这个选项为我提供了一个简洁的ZIP文件，其格式代码完整，包括脚本，图像和CSS文件夹。 在内部，我发现实际HTML代码位于ZIP存档的根目录index.html文件中。
The index.html file contains everything you would expect including all form elements laid out nicely and nested within any CSS classes specified. This amounted to roughly 500 lines of code of which I wrote exactly none. Here’s an example of the HTML code generated by Wufoo:
index.html文件包含所有您期望的东西，包括所有布局合理且嵌套在指定CSS类中的所有表单元素。 总共大约有500行代码，而我完全没有编写。 这是Wufoo生成HTML代码的示例：
<!DOCTYPE html> <html> <head> <title> Customer Feedback Form </title> <!-- Meta Tags --> <meta charset="utf-8"> <meta name="generator" content="Wufoo"> <meta name="robots" content="index, follow"> <!-- CSS --> <link href="css/structure.css" rel="stylesheet"> <link href="css/form.css" rel="stylesheet"> <!-- JavaScript --> <script src="scripts/wufoo.js"></script> <!-- [if lt IE 10]> <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif] --> </head> <body id="public"> <div id="container" class="ltr"> <h1 id="logo"> <a href="http://www.wufoo.com" title="Powered by Wufoo">Wufoo</a> </h1> <form id="form3" name="form3" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://joewhewitson.wufoo.com/forms/q10npi4x0ghrcjv/#public"> <header id="header" class="info"> <h2>Customer Feedback Form</h2>Nothing too fancy here, though you’ll notice some html5 legacy browser support along with the obligatory Wufoo branding. You’ll also see that the form is set up to send data to my Wufoo account by default, which clearly wouldn’t be of much benefit to the client. Since the project I was working on required data to be stored on the client’s own servers I needed to manually setup a PHP class here to handle the data and replace the action call to Wufoo’s servers. As for styling I simply linked the required style sheets already created by the client and the form dawned the same theme as the site that surrounded it.
这里没什么好看的，尽管您会注意到一些html5旧版浏览器支持以及必需的Wufoo品牌。 您还将看到默认情况下该表单已设置为将数据发送到我的Wufoo帐户，这显然对客户端没有太大好处。 由于该项目是在处理需要存储在客户端自己的服务器上的数据，因此我需要在此处手动设置一个PHP类来处理数据并替换对Wufoo服务器的操作调用。 至于样式，我只链接了客户已经创建的所需样式表，该表单与围绕它的站点具有相同的主题。
Upon further investigation of the code export area on Wufoo’s site, I found my way to an intriguing section. Labeled “API Information“, I couldn’t help but click gleefully with anticipation of further customizing the form I had just created. Within the API Information section I was given an API key that acted as a password for retrieving the data collected by my form. Underneath the key was a list of all the form elements I had added to my form with a unique ID.
在对Wufoo网站上的代码导出区域进行进一步调查后，我找到了一个有趣的部分。 标记为“ API信息 ”的我不由自主地单击，期望进一步自定义刚创建的表单。 在“ API信息”部分中，为我提供了一个API密钥，该API密钥用作检索表单收集的数据的密码。 密钥下面是我添加到表单中的所有表单元素(具有唯一ID)的列表。
Immediately opening the documentation I discovered that all of the data retrieved by the form could be extracted and manipulated via this API. The possibilities of use for the API are rather comprehensive. One could create simple scripts used to backup form information, create reports based on the raw data or even add custom form handling before submitting data back to Wufoo’s servers. For folks with multiple forms and even multiple sub users, detailed management statistics can be handled with custom scripting for use on local servers.
立即打开文档，我发现可以通过此API提取和处理通过表单检索的所有数据。 使用该API的可能性相当广泛。 可以创建简单的脚本来备份表单信息，基于原始数据创建报告，甚至添加自定义表单处理，然后再将数据提交回Wufoo的服务器。 对于具有多种形式甚至是多个子用户的人员，可以使用自定义脚本处理详细的管理统计信息，以供在本地服务器上使用。
The greatest benefit I see that this API provides is transparent access to Wufoo’s framework. This allows the use of its hosting services without sacrificing data availability or flexibility. In the case of my project I was able to convince the client to create a Wufoo account and store their data on Wufoo servers knowing that they would retain full access to all information gathered. In utilizing Wufoo as a service, the client no longer had to worry about supporting a data collection structure.
我看到此API提供的最大好处是对Wufoo框架的透明访问。 这允许在不牺牲数据可用性或灵活性的情况下使用其托管服务。 对于我的项目，我知道客户将保留对收集到的所有信息的完全访问权限，因此可以说服客户端创建Wufoo帐户并将其数据存储在Wufoo服务器上。 使用Wufoo作为服务时，客户端不再需要担心支持数据收集结构。
Instead, the client can use GET requests like the following to grab data from their account:
相反，客户端可以使用如下所示的GET请求从其帐户中获取数据：
https://client1.wufoo.com/api/v3/forms/q10nfwi89/fields.xml?pretty=true&system=true
https://client1.wufoo.com/api/v3/forms/q10nfwi89/fields.xml?pretty=true&system=true
Form data can be both exported and imported in either JSON or XML formats. Simply pass in the form identifier along with format preferences and the data is retrieved. cURL is also supported and would take the form of a call like this:
表单数据可以JSON或XML格式导出和导入。 只需将表单标识符与格式首选项一起传递，就可以检索数据。 cURL也受支持，并采用如下所示的调用形式：
curl -u [Unique API Key]:footastic [GET URL of desired content such as example above]
curl -u [Unique API Key]:footastic [GET URL of desired content such as example above]
By intercepting the action call, the user can doctor the data server side before sending to Wufoo:
通过截获该动作调用，用户可以在发送给Wufoo之前对数据服务器端进行诊断：
// index.html code require_once('APIBootstrap.php'); $dataHandler = new APIBootstrap(); $functionName = $_GET['functionName']; $dataHandler->$functionName(); // dataHandler code (submitForm function) foreach ($_POST as $key => $value) { $params[$key] = $value; } /* * Do neat stuff with form values here */ try { $curl = new WufooCurl(); $response = $curl->post( $params, 'https://client1.wufoo.com/api/v3/forms/apisubmitexample/entries.json', self::API_KEY); } catch (Exception $e) { print_r($e); }Pretty handy huh?
很方便吧？
Web development in general has come a long way in recent years. A job once dominated by technical minded programmers has opened up to the more creative at heart. This change can be attributed to functional GUI tools just like Wufoo. Despite the stigma of limited customizability attached to these tools, with advanced APIs these preconceived notions just don’t hold much water anymore.
总体而言，Web开发在最近几年取得了长足的进步。 曾经由技术精湛的程序员主导的一项工作向着更富创造力的方向发展。 就像Wufoo一样，此更改可归因于功能性GUI工具。 尽管这些工具附加了有限的可定制性的污名，但使用高级API，这些先入为主的概念已不再占便宜。
That’s not to say there aren’t any caveats to a service like Wufoo. As always, storing data on third party services means you’ll be subject to their server reliability and security. This means forms that collect confidential information will require more scrutiny of the host.
这并不是说对像Wufoo这样的服务没有任何警告。 与往常一样，将数据存储在第三方服务上意味着您将受到其服务器可靠性和安全性的约束。 这意味着收集机密信息的表格将需要对主机进行更多审查。
For those with less stringent needs however, a form creation and hosting solution can trim hours off of development and support time. Oh, and did I mention you can still freely access data and customize the resulting code to your heart’s content?
但是，对于那些不太严格的需求，表单创建和托管解决方案可以减少开发时间和支持时间。 哦，我是否提到您仍然可以自由访问数据并根据您的内心需求自定义生成的代码？
This is a sponsored article. The company that sponsored it compensated SitePoint to write and publish it. Independently written by SitePoint, sponsored articles allow us to develop and present content that’s most useful and relevant to our readers.
这是一篇赞助文章。 赞助它的公司补偿SitePoint编写和发布它。 由SitePoint独立撰写的赞助文章使我们能够开发和呈现与读者最有用和最相关的内容。
翻译自: https://www.sitepoint.com/simple-form-creation-wufoo-developers-perspective/
相关资源：25个经典网站源代码