Cards or Classic: Which One Should I Use?

September 15, 2021

It’s time to make a decision – Classic Forms or Card Forms?

We know this is solely based on preferences, but we put together a list of differences between the two types of forms. It is important to know the advantages, along with some typical use cases for each of them. Hopefully, the key points listed in this article would give you a better understanding of when it’s ideal to use a particular layout.

Which Features Are Only Available in Card Forms?

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

Form Fields

  • Yes/No Question – a straightforward field to answer with yes or no, or anything that indicates a positive/negative response.
    Yes/No Question
  • Image Choice – these images are configured to behave like radio buttons (where only one selection is allowed) or checkboxes (where multiple selections are allowed).
    Image Choice
  • Multi-line Question – a field requested by many users. It allows you to add more than one field in a single card. For now, it supports four basic fields: Textbox, Email, Number, and Dropdown
    Multi-line Question
  • Emoji Slider – an intuitive slider with emojis which uses icons for scale rating.
    Emoji Slider

Micro Animations

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.
    Ccard shake on error

    Ccard shake on error

  • When navigating from one card to another, transition effects are added.
    transition effects

    transition effects

Built-in Email Verification and Error Checking

  • The Email field now provides verification right off the bat without using widgets nor 3rd party platforms.
    Email verification

    Email verification

  • The Email field also has a built-in error checking and suggestion feature for misspelled email addresses.
    Email error checking and suggestion feature

    Email error checking and suggestion feature

Built-in Address Autocomplete and Geolocation

The Address field also provides cool Autocomplete and Geolocation features.

Address field

Address field

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.
    Built-in Icons

    Built-in Icons

  • Along with images and videos that you can use as your form background.
    images and videos background

    images and videos background

Continue Forms Later

Remember those times when you needed to set up 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.

  • Enable When Form Has 10+ Questions – it is the default option. It saves the progress of the user once the form has more than 10 fields.
  • Enabled – it saves the progress of the user. It does not work on forms with less than 4 fields.
  • Disabled – no data will be saved in the form. The users must start all over again if they do not submit the form.
Continue Forms Later

Continue Forms Later

Smart Embed, Fullscreen Mode, and Other Embed Options

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

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

  • Smart Embed – let us design your form to match your website.
  • Fullscreen – switch to fullscreen mode automatically.
    Smart Embed and Fullscreen Mode

    Smart Embed and Fullscreen Mode

  • Inline Embed – when viewing an embedded form on your website, you’ll notice a blue pencil icon at the top-left hand corner. This pencil allows you (as the form owner) to change the inline embed settings of your form.
    Inline Embed

    Inline Embed

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

    embed options

    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.
    Floating Feedback Button

    Floating Feedback Button

Welcome Page

While this is doable in Classic Forms with the use of Paragraph, Page Breaks, Image, and Header form elements, 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 or hide the number of questions on your entire form, or remove the welcome page altogether.

Edit Welcome Page

Edit Welcome Page

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.

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).

Edit Thank You Page

Edit Thank You Page

Custom CSS

Yes, many users have asked us why we removed this feature, not just in the Form Builder, but in all widgets too. Card Form’s goal is to make form building as easy as possible. The goal is justified by the amount of readily available color palettes, images, and built-in features in it. 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 and suggestions below or open a new Support Forum thread so we can share your feedback with the team.

Widgets

Some widgets were purposely removed from Card Forms to keep everything in line with the overall functionality and design of Jotform Cards. If you search for a widget and it’s not there, that means it cannot be used in Card Forms (for now).

When Should I Use Card Forms?

Do 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 to get better user engagement and form completion rates.

When Should I Use Classic Forms?

Are you building a client intake form or a job application form? Use Classic Forms! These kinds of forms are intended to have lots of fields to fill out. So, using the traditional layout is the right approach. Moreover, if your form requires a pixel-perfect design, then choosing the Classic Forms is your first choice for CSS customizations.

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 above are the ideal use cases, but you can still create long and complex forms using the Card Forms layout.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comment:

Podo CommentBe the first to comment.