This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
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.
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!
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
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 quicker form 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 and continually, with each change made.
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 be the 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.
You’ll be given a link which you can share with whomever you like.
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:
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.
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.
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.
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).
Our subscription product field is now available to select for our form:
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.
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!
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!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post