Build Forms Quickly with JotForm

For those developing forms online (or if you want to), have you heard of JotForm? It's simple to use and it provides most of the features needed to build forms without knowing any code. Plus, they can be customized with CSS. There are even some useful features like having forms remember what visitors type. If someone's computer crashes while filling out the form, the information will be repopulated when the form is opened again. Let's take a quick peek at JotForm.

Background

I was recently asked to develop an online form that allows visitors to upload a Word document and some image files. The form also needs to ask questions related to those uploaded files. I normally would jump on the project and code my own form, but I wanted to see if any third-party solutions met the project needs. This isn't the first time I've looked though. There are many good tools online. They just always seem to be missing something important. Google forms, for example, are easy to set up and free…but there's very little that can be done to change the look of the forms.

In my previous searches, I don't know how I missed JotForm. It provides nearly everything I need and it's free.

Benefits

Easy to create — Creating forms mostly involves dragging fields into the work area and adding labels. There are many customization options based on the type of fields added. For example, text areas can be modified to only allow a specific word or character count; text fields can be set up to only accept numeric data; and most fields can be marked as required.

Figure 1. Numeric Validation for Text Fields

Customize with CSS — If the form doesn't quite look right, it can likely be fixed with CSS. If there's too much space (or too little) between fields, it can be adjusted. We can add a background color to the field labels or change the color of the submit button. This can all be accomplished by modifying the form's style sheet.

Figure 2. Injecting CSS Code

Remember form entry — One of my favorite features is JotForm's ability to remember what visitors type. If someone's filling out a form and their computer crashes, JotForm will re-populate the form once it's open again. There's no need for the visitor to start over.

Figure 3. Enabling Autofill

Show/hide fields — When building forms, we may need to ask follow-up questions. For example, we could ask "Do you like mechs?" If they answer yes, we might ask "Have you read Dead Mech?" and "Are you planning to play Titanfall?" The form could display all the questions up front and assume visitors will only answer the follow-up questions if they answered yes to the first one. However, questions can be hidden in JotForm and displayed based on certain condition(s).

Figure 4. Using the Conditions Wizard

Show fields incrementally with a spinner — Along the lines of show/hide fields, they can be added "dynamically" to the form based on a counter. For example, let's say we want to know what someone's favorite books are. A spinner could be created for visitors to indicate how many books they consider their favorite. We can then display fields to collect the book title and authors for each book.

Figure 5. Adding a Spinner Field

Duplicate a set of fields quickly — Now technically JotForm doesn't create fields dynamically; they all need to be created in advance. Creating the same set of fields over and over is time consuming. That's where the Manage Multiple Fields option comes in. This feature lets us select one or more fields and duplicate them…along with the field settings.

Figure 6. Duplicating Multiple Fields

Dropbox connectivity — I stumbled across JotForm because I needed a form-building solution that allowed file uploads. The problem with JotForm is that the free version only provides 100MB of storage. That's where their built-in connectivity with Dropbox is perfect. JotForm can automatically configure itself to transfer the uploaded files and a copy of the form submission. We just need to sign in to Dropbox through JotForm. One downside of this connectivity is that the uploaded files need to be manually removed from JotForm. Otherwise two copies exist and the space on JotForm can fill up quickly.

Figure 7. Integrating Dropbox

Quick and friendly support staff — There were several occasions I found myself searching for answers in the JotForm help forum. Based on what I found, JotForm's support team seems very active and helpful. When I had a question, they got back to me within the same day.

Conclusion

If you've been looking for a good solution for building online forms or have been skeptical about third-party solutions for building forms, give JotForm a try. There are many more useful features which I didn't get a chance to experiment with. If you're interested if performing custom made JavaScript, for example, it sounds like you can embed the form within your own website and add the code.

Related Links

• How to Hide or Show Multiple Fields at Once Based On a Single Conditional Entry
• How can I allow end-users to add additional entries?
• Duplicate multiple fields at once