Advertisement
  1. Web Design
  2. Form Design
Webdesign

How to Use JotForm’s Form Design Tool

by
Difficulty:BeginnerLength:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

JotForm is a form building service; it allows you to build and host your forms on their platform, then slot them into your web pages however you like. Today we’re going to take a look at its form design tools to see what they can do.

Note: read on to find out about the design competition JotForm are running right now–you could win $7,500!

The Builder

JotForm’s builder is a drag‘n’drop tool which gives you a canvas and loads of different standard form elements to arrange on it.

jotforms tools
Tools to the left, canvas to the right

Once you’ve arranged the elements, you can change their properties (such as an input’s name and id) and define how large they should be, whether they’re required inputs and so on. You can also get right down into the details and control the design, so let’s take a look at how that works.

Start With a Form

Instead of building our own form, we’re going to grab one of the available templates by clicking Form Templates on the top menu. We’re going for a PayPal payment form of sorts:

payment form

Form Style

When we first open the template it will give us the tools to the left, plus a menu directly above showing a number of setup options.

Paypal Pro Payment Form

Ignoring those settings for the time being (you can always sort out the functionality later) we’ll now click on the Form Style tab giving us a host of new options.

There are a bunch of styles and options you can use directly from this menu, but we’re going to click the Form Designer item to open up a completely different interface.

Form Designer

Following a brief loading period:

advanced designer

your form will be opened in the designer, giving you a different set of controls to the right of the screen.

form designer

Immediately you can see a ton of intuitive options to click on and try out. Let’s see what’s available.

The Design Tab

In order from top to bottom, we have a number of design panels in the sidebar, those being:

  • Color Scheme
  • Background Image
  • Form Layout
  • Font Options
  • Label Styles
  • Line Layout

To begin with, Color Scheme gives us predefined options for the background, text, frame and input colors, plus the option of defining each one manually. Clicking the first predefined option quickly gives us a darker background and some depth:

first color scheme

Error and Highlight States

Whilst you’re controlling colors, checking the Simulate error state or the Simulate highlight radio boxes will show you some of the other dynamic states your form will have.

simulate error or highlight

Clicking the gear icon to the right of them will allow you to edit the style properties of each one respectively. Here I’ve just made the error red slightly less garish.

Making the Layout Responsive

By default the form layout is completely static; pixels everywhere you look. However, under the Form Layout tab you’ll find an option to make the layout responsive (which is probably one of the first changes you’ll want to make).  

Checking the Make this form responsive checkbox will change the fixed pixel width (590px in the example above) to a maximum width.

small screen
Narrow layout

Having done that, labels will neatly stack above form inputs and controls on narrower screens.

Font Options

By default our template uses Verdana, but the Font Options gives us lots of alternatives including a number of web fonts from Google.

Here I’ve chosen Roboto with a base font size of 16px (I have Google Material firmly stuck in my brain at the moment).

Options within the Label Styles panel underneath will allow you to tweak the typography for the labels, such as font weight and alignment.

Block by Block

Okay, so we’ve covered the fact that each of the panels can be examined one by one and the design styles of the form elements can be tweaked as you go. But it’s also possible to directly tweak the visual properties of each block.

For example, let’s click on the Buyer Name block. 

click on the block

You’ll notice a whole new set of options materialize in the sidebar.

block properties

The input height was something I wanted to change, so I bumped it to 30px using the Textbox Height control. Widths will have to be tweaked slightly more carefully if you’re working with a responsive layout, because instead of dealing with percentages everything’s still set using pixels. It’s therefore easy to accidentally shunt elements out of the way by making others too wide. The controls I see here are common to the whole form, so if I alter the input width here, it will alter all the input widths.

Note: Arguably, this isn’t a responsive layout in the true sense, but there you go..

Adding a Logo

You may want some branding on your form, or perhaps a larger banner graphic at the top. To upload an image of your choice hit the Add Form Cover button present at the top of the canvas.

You’ll be presented with yet another panel in the sidebar (pretty familiar by this point) to give you the chance to upload an control an image.

As I’ve uploaded a logo I don’t want it flush against the form, so I’ve applied 40px of margin-bottom.

Fine Tuning

The UI controls are all well and good, but what if you need some fine control over the styles of your form? That’s where the CSS tab comes into play.

jotform css tab

This panel allows you to enter whatever styles you like, giving you some selector suggestions to help you along. In fact, the code editor is pretty accomplished, making code suggestions as you type, pointing out errors and highlighting the CSS syntax for easy reading.

Here, for example, I’ve manually controlled the background color of the main form area. Doing this has meant that I needed to know what to select, unfortunately only possible by using the inspector panel in my browser (not intuitive for novice users). As far as I can tell there’s no opportunity to assign classes, ids or attributes to elements other than form inputs. 

.form-all is apparently the selector I needed.

lime
Now *that’s* form design

Have a go Yourself—You Could Win $7,500!

Having covered the various options open to you in the JotForm Designer, it’s time to turn your hand to it. Throughout the month of November JotForm are offering $7,500 for the best form design made with their tools!

There are also six sub-categories, each offering $500 to the respective winners, plus a number of other prizes on offer. Your form must be built using JotForm’s Form Designer, and be fully functional. Take a look at the awards page for more details and be sure to get your entry in before December 4th 2014!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.