JotForm User Guide / Card Forms /

Cards or Classic: Which One Should I Use?

Cards or Classic: Which One Should I Use?

It's time to make a decision - Classic Forms or Card Forms?

We know this is solely based on preference but we put together a list of differences between the two, the advantages of using one over the other, along with some typical use cases when these layouts matter. Hopefully, the key points listed on this article would give you a better understanding on when it's ideal to use a particular layout.

1. Which Features Are Only Available in Card Forms? πŸ”—

There are a few features / options added that are unique to Card Forms alone.

A. FORM FIELDS ADDED

πŸ”˜ Yes / No Question - A straight-forward field that can be answered with a yes or a no, or anything that implies a positive / negative response.

πŸ”˜ Image Choice - These images can be configured to behave like radio buttons (where only one selection is allowed) or checkboxes (where multiple selections are allowed).

πŸ”˜ Multi-line Question - A field that was requested by many. This essentially allows you to add more than one field on a single card. For now, it supports four basic fields - Textbox, Email, Number, and Dropdown.

πŸ”˜ Emoji Slider - And an intuitive slider that uses emojis as the icons on a scale rating.

B. MICROANIMATIONS

These are subtle animations added to the form to spice things up a little. Of course these are not just eye candy additions, they also serve a purpose.

πŸ”˜ When there's an error, the card will shake a little to get the user's attention.

πŸ”˜ When navigating from one card to another, transition effects are added.

C. BUILT-IN EMAIL VERIFICATION AND ERROR CHECKING

πŸ”˜ The EMAIL FIELD now provides verification right off the bat without using widgets nor 3rd party platforms.

πŸ”˜ The EMAIL FIELD also has a built-in error checking and suggestion feature for misspelled email addresses.

D. BUILT-IN ADDRESS AUTOCOMPLETE AND GEOLOCATION

πŸ”˜ The ADDRESS FIELD also provides cool AUTOCOMPLETE and GEOLOCATION features.

E. BUILT-IN ICONS, IMAGE AND VIDEO BACKGROUNDS

πŸ”˜ On various sections of the form builder, you will see a variety of ICONS (tons of them) that you can use.

πŸ”˜ Along with IMAGES and VIDEOS that you can use as your form background.

F. CONTINUE FORMS LATER

Remember those times when you need to setup two forms just to save your user's session data in our servers? Well, this time, this is achievable with a few clicks in a single Card Form.

πŸ”˜ SAVE & CONTINUE LATER - This saves the user's progress in our servers.

πŸ”˜ AUTOFILL - This saves the user's progress, locally, on their own browser.

G. SMART EMBED, FULLSCREEN MODE, AND OTHER EMBED OPTIONS

To further simplify things, we came up with a smart way of embedding Card Forms on your website. Instead of designing your form to match the your website's design, the form will automatically try its best to adapt with the look and feel of the page.

In addition to this, Card Forms have a fullscreen mode where users can click / tap on the fullscreen icon for a full blown immersive experience. If you want your form to open in fullscreen automatically, just enable this feature.

πŸ”˜ SMART EMBED - Let us design your form to match your website.

πŸ”˜ FULLSCREEN - Switch to fullscreen mode automatically.

πŸ”˜ INLINE EMBED - When viewing an embedded form on your website, you'll notice a blue PENCIL icon at the top-left hand corner. This allows you (as the form owner) to change the inline embed settings of your form.

Once you click on the icon, you'd see a variety of embed options:

πŸ”˜ FLOATING FEEDBACK BUTTON - This new embed code can be found on the PUBLISH section of your FORM BUILDER. It will place a button on any corner of the page. You can also customize the button according to your preference. Below is an example of how it would look like when embedded.

H. WELCOME PAGE

While this is doable in Classic Forms with the use of Text Fields, Page Breaks, Image and Header Fields, we made it a built-in feature in Card Forms this time.

πŸ”˜ EDIT WELCOME PAGE - At the top of the form builder, you would see an EDIT WELCOME PAGE button. This would allow you to customize the texts displayed on the first page, change the icon used, show / hide the number of questions on your entire form, or remove the welcome page altogether.

2. Which Features Are Not Available in Card Forms? πŸ”—

There are some features that were intentionally removed / moved in Card Forms. These were done on purpose to match the overall look and feel of the new layout.

A. THANK YOU PAGE

Well, this wasn't removed per se, it was just moved to a section that makes more sense when building a Card Form.

πŸ”˜ EDIT THANK YOU PAGE - This was moved from the SETTINGS tab to the bottom of the Form Builder to keep the building process streamlined. This way, users start with the WELCOME PAGE (top) > add form fields (middle) > then finish up with the THANK YOU PAGE (bottom).

B. CUSTOM CSS

Yes, many have been asking why this feature was removed, not just from the Form Builder, but for all widgets too. The goal of Card Forms is to make building forms as easy and less time consuming as possible. This is further justified by the amount of readily available color palettes, images, and built-in features added. Advanced customization using CSS codes is intended for advanced users who want to further customize the look and feel of their forms.

If you feel like this feature should exist on both layouts, feel free to post your comments / suggestions below, or open a new Support Forum thread so we can share your feedback with the team.

C. WIDGETS

There are some widgets that were purposely removed from Card Forms. This was also done with the intention of keeping everything in line with the overall functionality and design of JotForm Cards. If you search for a widget and it's not there, this could only mean it's not meant to be used in Card Forms (for now).

3. When Should I Use Card Forms? πŸ”—

You want to create quick and short forms? Use Card Forms! Ideally, Card Forms are more suitable, but not limited to, Sign Up forms, Newsletter Subscriptions, Registration forms, and Surveys. The goal here is better user engagement and form completion rates.

4. When Should I Use Classic Forms? πŸ”—

You're building a client intake form, or a job application form? Use Classic Forms! These kinds of forms are known to have lots of fields to be filled out. So, using the traditional layout would be a better approach. Plus, if your form requires pixel perfect design, then going with Classic Forms should be your first choice due to the custom CSS feature.

Our thoughts? The decision on when to use which layout still boils down to personal preference. This shouldn't prevent you from using Card Forms in any scenario. The guidelines and suggestions listed on items #3 and #4 are the ideal use cases but you can still create long and complex forms using the Card Forms layout.

Send Comment