JotForm 4.0: Mobile Builder, Collaboration and More

JotForm is an online form building service and it’s recently undergone an update. The new UI is easier to use, comes with some new features, and has a ton of performance tweaks under the hood.

JotForm 4.0: Mobile Builder, Collaboration and More

A little over a year ago we explained how to use the form builder–let’s take a look at JotForm 4.0 and see what’s changed!

Redesigned UI

The makers of JotForm decided upon a redesign to ensure the UI was current, and the builder works on mobile.

The approach was very pragmatic; data-driven decisions and plenty of usability testing (collected over the course of eighteen months) fueled the redesign process. For example, it became apparent that the wealth of builder options available was actually counter-intuitive; users were more likely to be intimidated by them than find themselves empowered.

“With JotForm 4.0, we trimmed the fat and made the interface beautiful, modern, and fool-proof.” –Aytekin Tank, Founder

JotForm 4.0: Mobile Builder, Collaboration and MoreJotForm 4.0: Mobile Builder, Collaboration and More

Performance Improvements

Much of JotForm 4.0 has been rebuilt using React.js. Whilst these improvements are essentially behind the scenes, they’ve made for a much quickerform builder and a more stable environment for the end user.

Instead of sending the entire finished form to the servers for saving, saves are now made incrementally andcontinually, with each change made.

Additional Features

The most striking addition to JotForm 4.0 is its ability to work on mobile. This has long been tricky territory for online form builders, and JotForm now confidently purports to bethe first online form builder to be compatible with all mobile devices. We’ll cover how this works in a moment.

Collaboration is arguably the second most significant addition; a feature which is increasingly common in design applications (InVision, Adobe XD). Design changes are updated and synchronized across all users to ensure everyone is working with the most current version. Again, we’ll cover how this works in a moment.

So What Else is New?

  • Offline form building, allowing you to continue working when your connection drops out. All changes are saved when connection returns.
  • Versioning, allowing users to revert to previous versions of their design.
  • Smoother Drag and Drop.
  • Full-size preview toggle.
  • Improved Wizards.

How to Collaborate With Others

Let’s look at one of the most interesting new features to hit JotForm: real-time collaboration. Whilst designing a form, hit the Invite Co-workers button to the top right of the UI.

JotForm 4.0: Mobile Builder, Collaboration and More

You’ll be given a link which you can share with whomever you like.

Co-workers

Your invitees will be given limited (the advanced builder won’t be accessible by default) access to collaborate on your form. They won’t need to be logged in; they’ll instead be granted guest accounts which you’ll see appear on your screen:

JotForm 4.0: Mobile Builder, Collaboration and More

Any changes they make to the design or structure of the form will be instantly visible in each collaborator’s browser.

Everyone can continue edits at their own convenience, on their mobile devices too, even without a network connection (as described above).

How to Build a Form on Your Mobile Device

Designing anything on a mobile device is tricky, so let’s have a go at building a simple payment form using a trusty iPhone 5.

Add a New Form

From the My Forms page, go to Create Form and then select your starting point. I’m opting for a blank slate, but I could also use a template or import a previously designed form.

JotForm 4.0: Mobile Builder, Collaboration and More

Give your form a title, at which point you’ll be taken to the builder.

Add First Question

The onboarding process takes care of everything, prompting you to add your first question from the options on the left. Click (press, whatever) Add.

JotForm 4.0: Mobile Builder, Collaboration and More

From the options, let’s pick a payment method from the PAYMENTS tab. We’re going to go for PayPal, so we can sell an imaginary subscription for something.The most popular payment processors used with JotForm are PayPal, Stripe, Authorize.net and Square, and anyone from individuals, to small businesses, to non-profits, make use of these payment forms.

JotForm 4.0: Mobile Builder, Collaboration and More

Subscription Setup

We’ve added our PayPal details, and chosen to sell a subscription, so now we have to add those details. These options are all self-explanatory; we can even upload an image by choosing directly from our device’s library (I’ve picked a drawing my youngest daughter did).

JotForm 4.0: Mobile Builder, Collaboration and More

Our subscription product field is now available to select for our form:

JotForm 4.0: Mobile Builder, Collaboration and More

Design

Hitting the design button in the bottom right of the screen gives us access to all the standard design tools we’re used to from the desktop builder. The lack of screen real estate means that alignment can sometimes be a little squishy, but it’s certainly clear enough to do the job.

JotForm 4.0: Mobile Builder, Collaboration and More

Once we’ve finished the design and build, we can publish the form. Again, the options which you’ll know from the desktop form builder are all present and correct on the mobile version, and all perfectly usable. Here’s our link, ready for sharing!

JotForm 4.0: Mobile Builder, Collaboration and More

Conclusion

Version 4 of the JotForm form builder has made huge advances. If you’re an existing user you’ll certainly notice the improved performance and the additional features. If you’re new to JotForm, you’ll find its interface and tool selection intuitive and welcoming. Go and check it out, and let us know if you venture into the world of mobile form design!