Author

Profile Image Aytekin Tank is founder of JotForm. He currently leads the JotForm development team. He loves to hear from JotForm users. Feel free to shoot him an email at aytekin at jotform.com.


Welcome to the JotForm blog, where you can read about new JotForm features and find helpful online form tips for creating top-notch forms, user case studies, and much more.

Feel free to stay a while, drop a comment or two, laugh at our corny jokes, and make sure to share the articles you like on social media.




Tips for Non Designers Using the JotForm Form Designer

May 05, 2015

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.

color scheme


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.


JotForm Theme Pallete


Use Beautiful Imagery:

Without requiring a whole lot of extra work, you can make your web form gorgeous just by using the right background image.


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, copyright-free pictures.


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.

Form JotForm


Transparent Boxes:

If you happen to be using one of those beautiful images; it’s best to avoid covering it up with opaque boxes on your page.


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.


JotForm


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.


JotForm


Then copy and paste: “background : transparent;” into the field below to get a completely transparent background on the selected form box or drop menu.


JotForm theme designer


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.


JotForm Color Picker

The end result is a form that lets the background image show itself with limited obstruction.


JotForm theme


Highlighted Colors:

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.


JotForm


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.


JotForm Color Scheme


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.


JotForm Theme


Have you had any experience trying JotForm’s Form Designer yet? Tell us about your experience or any tips you have!





Send Comment