JotForm integration tutorial

Uploadcare handles uploading, storing and processing files for your website or app, and JotForm is one of the easiest ways to build an online form. The great thing about JotForm is that it supports integration with external services. We at Uploadcare have created such a JotForm integration, the widget named File Uploader by Uploadcare. This tutorial shows how to implement the widget into a web form built with JotForm. The widget allows form users to attach local and online files and images to a web form, but first things first.

We’ve thought about a fun case where multiple file types might be collected simultaneously. So, we’re gonna collect facts and other kinds of evidence on Bigfoot existence. This way we’ll be able to collect creepy notes, scary photos, videos and whatever else exciting from our Bigfoot witnesses. Let’s start it by creating an Uploadcare account.

Step 1. Create Uploadcare user account

Skip this if you’ve already got one. The details of the registration process are covered in our documentation. Simply put, go to the signup page, provide us with your email and choose a password. The last thing to finish the sign-up would be confirming your email by clicking the validation link in the message from the Uploadcare Team.

Step 2. Create a new Uploadcare project

After your email is validated you’re free to log in and navigate to the dashboard — a control panel of what you’re up to with Uploadcare. My dashboard, for example, contains two projects, one for the JotForm integration and another for hosting all the images used in this tutorial.

Start a project by clicking the New project button, type in the name, hit create and you’re there.

Before heading over to the next step, make sure to grab your project’s public key to use it for the JotForm integration later.

Step 3. Create a form via JotForm and add the widget

Now, we’re almost there with finding all Bigfoot in the universe. The only thing standing in between us and glory is that web form — let’s make it. If you aren’t registered with JotForm, please look through the FAQ and navigate to their main page just to click sign up.

Creating a form

Okay, once we’re on JotForm, let’s concentrate and navigate to my forms tab.

This tab holds all the web forms you’ve ever created with JotForm as a user. Well, yes, there are none if you’ve just registered. In our case, there’s the form that’s ready to roll with Bigfoot inquiries.

Let’s check what’s inside by checking a box to the left of the form title. Click Edit Form and here you are.

Isn’t that neat form a perfect match for someone willing to share their Bigfoot experience? For real! The only thing that’s not there is some upload files button. We’re gonna fix this by adding the File Uploader by Uploadcare widget to the form.

Adding the widget

Now, click the browse widgets button and navigate to File Uploader by Uploadcare by typing in 'uploadcare' in the search bar.

Here it is, click the wonderful yellow logo and the widget will be added to the form — quick as a wink. It’s almost perfect if not for the default title, and the default button, don’t worry, we’ll deal with it later.

For now, please save the form by clicking the Save button in the top-left corner of the JotForm interface.

Step 4. Configuring the widget

At last, we’re there to reduce those default captions to powder. Let’s start by configuring the default label of the widget. It’s done by clicking the gear icon in the top-right corner of the widget block on the form. A-ha, some settings and that Text we’d like to change.

We’re gonna talk straight and let our users know we want the Bigfoot evidence, go on and change the label to 'Now, do what you’re here for!' By doing this we’re done with basic settings.

Now, to the far-out stuff. Please, click the magic wand icon in the top-right corner of the widget block. It opens the widget settings, let’s dig in.

First of all, let’s paste the public key we grabbed into the respective field. Locale is fine with us. Bigfoot evidence might be whatever kinds of files, so No to Images only. Okay to Preview step and Multi-upload.

We won’t be needing to crop the images this time — Bigfoot data are to be analyzed in a secret lab, not the widget. Now, scroll down to access more settings.

We aren’t cropping things here, so let’s ignore the Crop width and Crop height settings and head over to the Additional global settings where we set the button label to some real thing like 'Upload Bigfoot stuff here' (there’s the example of how to change those).

Once we click update widget it’s done — let’s start the fun.

Step 5. Publishing the form to the web and running some tests

Great, the form works, so what’s next? Publish. Go to my forms tab in JotForm, select the one we’ve made and click More.

Publishing a form to the web

Next step is hitting Publish in a drop-down list. JotForm will then show you the direct link to the form. It goes like this.

Accessing the form via the direct link is quite easy, so let’s get to it.

Great, the form we’ve just made looks awesome. A description, a couple of questions, simple enough for a guy that’s just met some Bigfoot.

Let’s test the form and click the Upload Bigfoot stuff here button first.

Uploading stuff with the form

Clicking the button starts the widget. Mainly, there are two options: a local file or some web file source. For example, if you’ve already posted a photo of Bigfoot eating your hand on Facebook, not a problem — you can still attach it to the form.

Say, we’ve got a couple of photos to upload. Here’s one of them by the way (it has just threw the scare into me.)

Who knows, maybe they’ll pay for it. I’ve even got another one to increase my chances. Wait, it’s just a test run so I’m getting nothing. I’ll live with that, though.

Let’s select the two of those and click Done then.

Clicking Done folds the widget dialogue and leaves a brief info on the uploaded files in place of the Upload Bigfoot stuff here button.

In the meanwhile, I’ve filled in the form as someone named Danish Unicorn, a guy who believes he saw Bigfoot on the fifteenth of September, 2016 in the Ouachita National Forest, near Mt. Tabor. Hmm, that’d be enough for me to start a Bigfoot hunt, so let’s click Submit and send the data.

Step 6. Getting submitted data

Now let’s check out how the submitted data looks like in the JotForm interface. The my forms tab is a good go for that. A red little thingy appeared with a '1' on it. This means there’s a single unread submission. Previewing the submission is done by clicking this red icon.

Everything is in place: a guy named Danish that ran into Bigfoot and, fearless, attached a couple of photos. There are two options now: abandon the page until a new notification, or proceed to the Submissions page (guess what we do?)

There’s also a last submission preview on the Submissions page. In addition to it, there’s a table holding all the submits and their contents. Here, for example, we’re seeing there were two people experiencing Bigfoot events. And I’ve only sent one submission myself... It works! Let’s hit the tiny 'Excel' icon and download the table in XLS format.

A pop-up window informs us that we’re done downloading (thank you, window.) In our case, the table was only holding two lines and thus the process was blazing-fast.

If you try and open the downloaded file in Google Spreadsheet, for example, it’ll look like this. Field names represent the 'questions' we put on the form. And the contained info represents every single submission sent.

See, image files were written to the table as Uploadcare CDN links. The links are fully clickable and the files can be further processed using the CDN API. Outstanding, Ladies and Gentlemen, we have now built a great form — prepare for the Bigfoot data flow.

Apart from the Bigfoot stuff, there are lots of use cases where file attachments are needed on web forms. Uploadcare handles the most of it, it stores, delivers files, and processes images.

Integrating the File Uploader by Uploadcare into your JotForm workflow allows you to concentrate on the data to gather and not an apple sauce around it.

Oh, and by the by our sign-up is free. Try it out or hit us up if something goes wrong.


We're always happy to help with code or other questions you might have! Search our site for more information or send us an email!