jotform 设计器_使用JotForm 4.0减轻表单构建的痛苦

jotform 设计器

This article was sponsored by JotForm. Thank you for supporting the partners who make SitePoint possible.

本文由JotForm赞助。 感谢您支持使SitePoint成为可能的合作伙伴。

HTML forms are the bane of web developers’ lives. They are rarely exciting, easy to get wrong and subject to numerous revisions from clients and bosses. Would you consider letting them directly edit the code when even the most basic forms require knowledge of:

HTML表单是Web开发人员生活的祸根。它们很少令人兴奋，容易出错，并且会受到客户和老板的多次修订。即使最基本的形式也需要以下知识时，您是否考虑让他们直接编辑代码：

HTML5 input types.
HTML5输入类型。
Browser support and fallback options.
浏览器支持和后备选项。
Validation code on both the client and server.
客户端和服务器上的验证码。
If necessary, custom controls using HTML, CSS and JavaScript.
如有必要，使用HTML，CSS和JavaScript的自定义控件。
Spam and fraud detection techniques.
垃圾邮件和欺诈检测技术。
Server-side processing and data storage.
服务器端处理和数据存储。
Integration with third-party systems such as email, analytics, CRM, payment gateways etc.
与第三方系统集成，例如电子邮件，分析，CRM，支付网关等。
Custom reporting.
自定义报告。
Testing on a variety of desktop and mobile devices.
在各种台式机和移动设备上进行测试。

Forms rapidly become mission-critical monsters because they’re often the first point of customer contact. A solid development and testing plan is absolutely essential.

表单Swift成为任务关键型怪物，因为表单通常是客户联系的第一要点。可靠的开发和测试计划绝对至关重要。

Or is it?

还是？

新的和改进的JotForm (The New and Improved JotForm)

I reviewed JotForm 3.0 in January 2015. The online application enables non-developers to build and edit sophisticated data capture forms using a WYSIWYG interface. You add fields, choose a theme, modify the color scheme, define integration options, publish, wait for responses and view reports.

我在2015年1月评论了JotForm 3.0 。在线应用程序使非开发人员可以使用WYSIWYG界面来构建和编辑复杂的数据捕获表单。您可以添加字段，选择主题，修改配色方案，定义集成选项，发布，等待响应并查看报告。

JotForm 3.0 was a great solution, but the latest release has gone even further to provide non-technical users with intuitive tools to build forms of any complexity.

JotForm 3.0是一个很棒的解决方案，但是最新版本甚至进一步为非技术用户提供了直观的工具来构建任何复杂的表单。

JotForm 4.0 (JotForm 4.0)

JotForm 4.0 has just been released and I’m pleased to report it addresses the complexity problem. The interface has been overhauled and is more attractive and intuitive than before. Options are easy to access but hidden until you require them.

JotForm 4.0刚刚发布，我很高兴地报告它解决了复杂性问题。界面已经过大修，比以前更具吸引力和直观性。选项很容易访问，但是在您需要之前一直隐藏。

表单字段和小部件 (Form Fields and Widgets)

The Add Form Element link leads to a slide-out panel which provides headings and basic form fields such as email, names, telephone, date pickers, numbers, drop-downs, file uploads, buttons and more.

“ 添加表单元素”链接指向一个滑出面板，其中提供标题和基本表单字段，例如电子邮件，姓名，电话，日期选择器，数字，下拉列表，文件上载，按钮等。

The Payments tab reveals a dozen payment providers which can accept online transactions for single-purchase items or ongoing subscriptions.

付款选项卡显示了十二个付款提供商，这些提供商可以接受单笔购买项目或正在进行的订阅的在线交易。

The Widgets tab provides a seemingly endless (but searchable) list of custom elements such as form tabs, sliders, YouTube videos etc.

“ 窗口小部件”标签提供了看似无限(但可搜索)的自定义元素列表，例如表单标签，滑块，YouTube视频等。

Fields are dragged and dropped on to the form. Once there, a properties cog icon next to that item opens another slide-out panel which used to set options such as label alignment, whether the field is required, placeholders, etc.

将字段拖放到窗体上。到达该位置后，该项目旁边的属性齿轮图标将打开另一个滑出面板，该面板用于设置选项，例如标签对齐，是否需要该字段，占位符等。

表格设定 (Form Settings)

The SETTINGS tab shows form options such as the name, warning messages and even language translations.

设置选项卡显示表单选项，例如名称，警告消息，甚至语言翻译。

A Conditions panel allows you to create simple conditional logic such as showing a another field when a specific value is entered. Conditions can also perform calculations, enable or disable required fields, skip or hide pages, change the “thank you” page or modify the email recipient.

使用“ 条件”面板可以创建简单的条件逻辑，例如在输入特定值时显示另一个字段。条件还可以执行计算，启用或禁用必填字段，跳过或隐藏页面，更改“谢谢”页面或修改电子邮件收件人。

The Integrations panel provides options for third-party integration with a couple of dozen popular online providers including Google Docs, Dropbox, MailChimp, Campaign Monitor, Sales Force, Highrise and Braintree. The wizard steps through the process to authenticate with the service and perform an action such as adding a user to a mailing list:

集成面板提供了与数十个流行的在线提供商进行第三方集成的选项，其中包括Google Docs，Dropbox，MailChimp，Campaign Monitor，Sales Force，Highrise和Braintree。该向导将逐步执行该过程以对服务进行身份验证，并执行诸如将用户添加到邮件列表的操作：

表单主题和样式 (Form Themes and Styles)

Click the roller icon on the BUILD tab to access the form designer. The COLORS tab allows you to set standard colors and images:

单击“ 构建”选项卡上的滚轮图标以访问表单设计器。 “ 颜色”选项卡允许您设置标准颜色和图像：

This is supplemented by a STYLES tab to control form width, alignment, fonts and spacing. The CSS tab allows custom code to be injected. You can also access an advanced CSS editor which opens a new application to edit individual properties using controls or code.

这由“ 样式”选项卡补充，以控制表单的宽度，对齐方式，字体和间距。 CSS选项卡允许注入自定义代码。您还可以访问高级CSS编辑器，该编辑器将打开一个新应用程序，以使用控件或代码来编辑各个属性。

If this sounds like too much effort, select the THEMES tab and choose a pre-designed attractive theme:

如果这听起来太费力，请选择“ 主题”选项卡，然后选择预先设计的有吸引力的主题：

表格预览 (Form Previewing)

Your form can be previewed and used at any time. A useful Fill Form button will add dummy data to all the fields:

您的表格可以随时预览和使用。一个有用的“ 填写表格”按钮会将伪数据添加到所有字段：

表格发布 (Form Publishing)

Once your masterpiece is complete, you can link to its unique URL:

完成杰作后，您可以链接到其唯一的URL：

A range of other options are available:

一系列其他选项可用：

embed the form in your page with a single HTML script tag

使用单个HTML script标记将表单嵌入页面中
download the source code and copy it into your page
下载源代码并将其复制到您的页面中
place the form in an iframe
将表单放入iframe
use a customizable “feedback” button to open the form
使用可自定义的“反馈”按钮打开表单
use a button to open the form in a lightbox
使用按钮在灯箱中打开表单
open your form in a pop-up window
在弹出窗口中打开表格
copy embed code for popular CMSs and systems such as WordPress, Joomla, Drupal, Facebook, Weebly, Shopify, PrestaShop, Magento and SharePoint.
复制流行的CMS和系统(例如WordPress，Joomla，Drupal，Facebook，Weebly，Shopify，PrestaShop，Magento和SharePoint)的嵌入代码。

新功能 (New Features)

The new JotForm 4.0 interface is fully responsive and can be used on desktop, tablet or smartphone devices. All your edits are saved instantly and it’ll even work when you have a patchy internet connection because the application runs offline. Your form data will synchronize when you return online.

新的JotForm 4.0界面具有完全响应能力，可以在台式机，平板电脑或智能手机设备上使用。您的所有编辑都会立即保存，并且即使您的网络连接不完整，它也可以正常使用，因为该应用程序可以离线运行。联机返回时，表单数据将同步。

JotForm also allows you to access a list of revisions and revert back to a previous edit with a single click.

JotForm还允许您访问修订列表并单击即可恢复到先前的编辑。

Finally, multiple team members can work on the same form simultaneously. Your changes are automatically applied to everyone else’s view.

最后，多个团队成员可以同时处理同一表单。您所做的更改将自动应用于其他人的视图。

摘要 (Summary)

JotForm 4.0 is a radical overhaul of the form design system which was originally launched in 2006. I’m a die-hard coder and rarely like WYSIWYG editors but JotForm is a pleasure to use and saves considerable time. It’s especially quick when you don’t need to wade though third-party API documentation when integrating other systems.

JotForm 4.0是最初于2006年推出的表单设计系统的一项重大改进。我是一个顽固的编码人员，很少像所见即所得的编辑器那样工作，但是JotForm令您乐在使用，并节省了大量时间。当您在集成其他系统时无需翻阅第三方API文档时，这特别快。

The key benefits to JotForm 4.0:

JotForm 4.0的主要优点：

a simpler, slicker and easier form design interface
更简单，更流畅，更轻松的表单设计界面
fully customizable designs
完全可定制的设计
attractive pre-built themes
精美的预制主题
hundreds of standard and custom fields
数百个标准和自定义字段
conditional logic without programming
没有编程的条件逻辑
can be used on desktop or mobile devices
可以在台式机或移动设备上使用
instant saving with offline processing and synchronization
通过离线处理和同步即时保存
real-time collaboration with colleagues
与同事的实时协作
third-party integration with dozens of providers
与数十家提供商进行第三方集成
easy to use, embed in web pages or publish forms online
易于使用，嵌入网页或在线发布表单
a free starter plan

免费的入门计划

JotForm is ideal for anyone who requires a registration, application or payment system. Novice users may still need a little guidance at first, but the new user interface is less daunting than before. It’s easy to create an attractive form which even the most technically illiterate client or boss could edit.

对于需要注册，申请或支付系统的任何人，JotForm都是理想的选择。新手用户起初可能仍需要一些指导，但是新的用户界面比以前少了许多麻烦。创建有吸引力的表单很容易，即使技术上最不懂文字的客户或老板也可以编辑。

Try JotForm today and create forms anywhere, anytime.

立即尝试JotForm，随时随地创建表单。

翻译自: https://www.sitepoint.com/take-the-pain-out-of-form-building-with-jotform-4-0/

jotform 设计器