JotForm
how to guide, Tutorials

A Beginner’s Guide To Creating Online Forms with JotForm

I have been introduced to an easy-to-use online form builder called JotForm that I wanted to share with you!

This post will take you through a journey of what JotForm is, how to create an online form and other features JotForm provides.

Let’s find out more!

What is JotForm?

JotForm takes the pain away from coding online forms because it does it for you. An easy-to-use online forms platform, you can create custom online forms and collect data with JotForm. You can create a form from scratch, use one of their 10,000+ templates or import a form. I for one loathe coding forms, especially when it comes to making them look pretty. It just takes too much time. Luckily JotForm provides a great library of free attractive themes that you can use to style your forms easily. Whatsmore, these forms are 100% responsive – so no more stressing about how to design forms on tablet or mobile! You can also use Jotform to create forms on a tablet or mobile (amazing) without worrying about awkward platform rendering issues.

So it’s all good having a form, but what happens to the data submitted to the form? Well, Jotform has this covered too! You are able to view submissions and look at form analytics from surveys or feedback forms all within the platform.

Using JotForm you can create custom application forms, payment/order forms, registration forms, surveys and feedback forms, and more.

Let’s find out how.

First, Sign Up!

Sign up for JotForm for free.

JotForm-signup

Click the create my account button and verify your email address.

JotForm-verify-email-popup

Go to your inbox and find JotForm’s email waiting for you – click on the Verify Now button or click the link.

JotForm-verify-email

Building your first form

Follow the next step and click on the Let’s go! button.

I skipped this part but you can add company details and select your industry if you wish to.

JotForm-tell-us-more

After clicking the skip button you’ll see white space (this is where your forms appear once you create them) with a menu to the side, click the create form button.

JotForm-blank-canvas

 

The “choose a form layout” overlay pops up and you can choose between building a classic form (all questions are on one page) or card form, which shows one question a page with an optional progress bar.

Select the classic form and click the create a form button.

JotForm-classic-form

Now, you have 3 options to choose from, I have selected the blank form. I’ll explore using a template and importing a form in another post. Besides, I want to show you how simple it is to build a form for yourself! Click the create button.

JotForm-form-options

My form is going to be a ‘contact me’ form, something straightforward to begin with. You can follow and create the same form as me or think of something a bit more creative.

Enter a title then click the create button.

JotForm-form-title

Before you is a blank form canvas ready for you to design. I know it’s all a bit grey, but by clicking on the icons shown on the page you can quickly add colour and form elements.

JotForm-form-builder

  • Add Form Element – Clicking on the plus icon reveals a selection of form elements to choose from. You can easily add form fields like Name, email, address, date picker, and more. Explore emoji feedback sliders, dropdowns, multiple choice answers, and more.

JotForm-form-elements

  • Add Your Logo – shows you different ways to add a logo to your form.

JotForm-logo-properties

  • Paint roller – opens up the form designer where you can add colours, add CSS, choose themes, edit existing form styles & even do more advanced designer stuff!

JotForm-form-designer

  • Four arrows icon – is the same as clicking Add Form Element, it displays the form elements which you can drag and drop.

otForm-basic-form-elements

  • Title – you can edit the header and add a subheader or upload an image.

JotForm-title

Adding Elements to the Form

Click on the Add Form Element plus icon and click on an element or drag it onto the form.

JotForm-form-elements

To edit the Full Name field click on the gear icon near the delete icon, this will bring up further settings for you to change.

I went ahead and did the below to the Full name text field

Added placeholder text

Removed the sublabel text

Switched the field to required

Added placeholder text Removed the sublabel text Switched the field to required

Following the same process, I went ahead and added an email address field. Clicking on the gear icon opens up properties for the email field.

JotForm-email-properties

I have finished off my ‘contact me’ form by adding two more fields – phone number and message. I also added a logo and changed the button style to a different colour – there is also a option to add a button image if you want to.

JotForm-submit-properties

I’m happy with my fields, so now I will add some colour to the form and edit some styles by clicking on the blue paint roller icon to the right.

JotForm-form-colours

Remember to click the green save button on the form designer once you are happy with the changes you have made.

Preview the form on desktop, tablet & mobile

At the top of the form builder click on Preview Form toggle so that it turns green.

Jotform-preview-toggle

Now you can click on the phone, tablet & desktop preview options at the top and change the orientation of the device.

Below is an example of the tablet view portrait orientation.

JotForm-tablet-orientation

Dummy Data & sharing the form

JotForm also gives you a Fill Form button which fills the form fields with dummy data so that you can see what the form looks like with text populated. It saves you time from doing this manually, especially if you have dozens of fields to fill!

JotForm-fill-form-button

However, clicking the fill form button did not fill dummy text in the message box like I expected it to :-(. I guess this will go down on my list of improvements to them.

Beside the Fill Form button is the open link in new tab icon that when clicked, opens up the form in a new tab. You can also copy and paste the form URL and share this link with whomever to complete the form or get feedback.

Submitting the form  

You must agree by now that this whole process has been super easy to do, let’s send a test form submission and find out how to edit the thank you page.

Click the Send button.

JotForm-send-button

After clicking the send button the thank you page is displayed

Jotform-thank-you-page

How to edit the Thank You Page

Turn off the Preview Form toggle to reveal Build, Settings & Publish links at the top of the form builder.

JotForm-top-bar

Click on Settings.

JotForm-settings

As you can see, you can make edits using the WYSIWYG (what you see is what you get) editor. Make this page your own by adding images, changing text colour, font etc. Updating the Thank You Page is effortless, all edits are saved automatically.

Send another submission to view your updated Thank You Page!

How to view submissions

I have definitely sent off quite a few form submissions and maybe you have as well. To view them click on JotForm’s logo on the top left-hand corner.

JotForm-logo

Click on the form that you have been editing, in my case, it’s Contact Me. Notice below the name of the form it says how many submissions have been submitted.

JotForm-back-to-forms

Click View Submissions.

JotForm-submissions

There are 2 views in one here, the page with the submission data seems a little overwhelming with white space since I only have 4 fields.

Click the green arrows to move back and forth between submissions.

Alternatively, you can click on one of the submissions in the inbox below.

Downloading Submissions

Taking a closer look at the inbox, at the top, there are 3 options on how to download the submissions you have received – Excel, CSV & PDF. Click on the one that suits your needs best.

JotForm-download-options

Example PDF download format.

JotForm-submission-pdf

Submission email notifications

For every submission, you receive on your form an email is sent to your inbox. To edit email notification settings click on the Settings link.

Click on the Emails option to reveal email settings.

JotForm-email-notifications-min

This is what JotForm’s email notification looks like.

JotForm-form-notfications

Accessing form revision history

There may be occasions where you make a mistake or do a change that you have overwritten and want it back, don’t fear because JotForm saves your form periodically.

You can also save revisions when you want to by clicking the green icon at the top of the form builder, this action will show all the number of revisions that have been saved. The All changes saved at time will then update to your current time as well.

JotForm-revision-history

Adding Collaborators

Click the Add Collaborators button on the right-hand corner and copy the to link to share with anyone (not just co-workers). You can work on the same form, at the same time. Because JotForm has automatic save functionality (similar to how Google Docs automatically saves new edits, and allows you to go back to previous versions), it’s really easy to collaborate on forms.

JotForm-add-collaborators

How to publish your form

By this time I hope that you have made all the necessary edits needed and shared this form with other people to get their input.

It is time to publish!

At the top of the form builder click Publish.

JotForm-publish

Click on the pencil icon – this will then turn the numbers on the end of the URL to your username and will append the name of your form to the URL.

Copy the link and start collecting submissions!

JotForm-direct-link

Wow, that was a pretty frictionless experience of creating a form using JotForm. There was nothing difficult about it at all and in under a few minutes we created a fully functional form that is able to collect submissions straight away.

But there is so much more to JotForm that I did not touch on, such as JotForm’s 100+ integrations with applications, using a template, importing a form etc. All these topics will be addressed in my upcoming JotForm series!

If you want to know more about how JotForm is used in the tech industry then click here

Otherwise, check out my other tech posts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s