Take the Pain Out of Form-Building with JotForm 4.0

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

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:

1. HTML5 input types.
2. Browser support and fallback options.
3. Validation code on both the client and server.
4. If necessary, custom controls using HTML, CSS and JavaScript.
5. Spam and fraud detection techniques.
6. Server-side processing and data storage.
7. Integration with third-party systems such as email, analytics, CRM, payment gateways etc.
8. Custom reporting.
9. 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.

Or is it?

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.

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 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.

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.

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:

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.

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:

A range of other options are available:

• embed the form in your page with a single HTML script tag
• download the source code and copy it into your page
• place the form in an 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.

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 also allows you to access a list of revisions and revert back to a previous edit with a single click.

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.

The key benefits to 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.

Try JotForm today and create forms anywhere, anytime.