If you’re new to JotForm – or maybe you recently migrated from Adobe FormsCentral – you may not be familiar with how
easy it is to turn your ordinary looking form into a gorgeous piece of online art. JotForm’s incredibly advanced
Form Designer allows your inner designer to shine; it’s the easiest tool around for creating customized, beautiful
form themes that don’t require any knowledge of complicated CSS.
With that being said, here are a few pointers to get you started.
Customize Your Colors:
We make it easy for you with a great selection of color schemes to choose from.
But what if you’re interested in developing your own color scheme? Well, that’s pretty easy too! Unless you have
your own company colors you’re looking to use, one of our favorite tools to start with is the Adobe Kuler color tool to get an idea of different color pairings.
Once you know the look you’re going for, either easily click the colors on the scale or enter the Hex numbers in the
custom color box for the background, input background, frame and text.
Use Beautiful Imagery:
Without requiring a whole lot of extra work, you can make your web form gorgeous just by using the right background
Whether you take your own high resolution photos, or you want to use stock
images, great images are a perfect place to start. We recommend Unsplash for some magnificent,
From there, you should consider making your form frame somewhat (if not entirely) transparent to really let the
image shine. Using this method, you can have a spectacular form that lets the image do most of the heavy lifting.
If you happen to be using one of those beautiful images; it’s best to avoid covering it up with opaque boxes on your
Even if you don’t know a lick of CSS, there are easy solutions for creating a transparent dropdown menu so it
doesn’t look out of place.
It couldn’t be easier using JotForm’s guided point-and-click CSS helper. First things first – click on the field
you’d like to change, which will prompt the CSS Helper’s menu to appear on the right side of the page.
Then copy and paste: “background : transparent;” into the field below to get a completely transparent background on
the selected form box or drop menu.
Then you’ll probably want to change the color the font to make it match the rest of your colors as well. To do that,
click on the box you’d like changed, and find the “color” icon in the CSS Helper.
The end result is a form that lets the background image show itself with limited obstruction.
An important final step before sending your form to the masses is tweaking the highlighted color to match the feel
of your form. The highlighted color is the one that appears when a user clicks on a form field. By default, the
highlight color is a bright yellow, which may or may not be suitable for your form.
Editing the color takes about 30 seconds, and it’s well worth it. Just find where it says “show highlight” under
Color Scheme, and find the gear icon to the far right for more options.
Especially if you’re using a light font, it’s best to use a more subtle highlight so that you can still read the
text behind the highlight.
Have you had any experience trying JotForm’s Form Designer yet? Tell us about your experience or any tips you have!