General Structure

Consider this simple JotForm form:

The most important classes or element selectors for this form(and any other jotform form) would be .form-all, .form-section and .form-line . .form-all is the outer most div containing entire form elements. But it resides inside a parent form tag!
.form-section is similar to .form-all, but it is most useful if your form is a multi page form. .form-line selector is used for each of the questions in the form.

Here some visual representation for each of them :

And there are many more sub divs, p’s and spans. It is possibly the hardest part when styling jotform forms with custom CSS.

Mastering The New CSS Editor

Tip 1: Use CSS Editor to point & click the element you want to style!

See how you do it using the new CSS Editor :

The above animation shows how one can add styles for .form-line elements. What if you want to add style only to .form-line that contains Full Name field?

Tip 2: Click twice to obtain #id selectors for elements

Clicking again to an already selected element, will produce a ready to use id selector for that element.

Tip 3: Use breadcrumbs to select outer layers

In very complex forms, it would become extremely hard to select exact element you want using the point & click method, since there may be very little or no space between elements. In this case using breadcrumb, will help you easily navigate through all parent elements of currently selected element.

Tip 4: Use arrow keys to see different values in Live Preview

It is a common use case, using up & down arrow keys to manipulate px values, at least in most of the browser’s developer tools. This gives you a WYSIWYG environment when editing css, and you will get instant feedback, different from manually typing refreshing to see results. In the new CSS Editor, you can easly select a px value and use up & down arrow keys to increase & decrease the value and instantly getting feedback from the changes.

Tip 5: Watch some awesome video lessons about CSS Editor

Conclusion

The new CSS editor as a part of JotForm’s new Form Designer, is by far the most easy to use and sophisticated tool that you can use to manage complex custom css or create new css to style your forms. We’ll be continuously updating the tool, so keep tuned for updates.