Beautiful Card-style Form Wizard With jQuery - card-wizard

File Size: 11.4 KB
Views Total: 4016
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Beautiful Card-style Form Wizard With jQuery - card-wizard

A simple yet beautiful interactive jQuery based card-style wizard to replace the boring long forms or to make things more interactive and interesting as well.

The main idea behind this resource is to replace the boring forms, sometimes the user does not fill the form just because the user finds it long enough to make him feel lazy. We spotted form fields into few groups and shown them in cards, with this user will see very fewer fields and it will feel more interesting with all the 3d animations and good UX.

Basic usage:

1. The Basic structure of "Card Wizard" consists of cards in an unordered list with navigation. Navigation holds the Back Button, Next Button and Finish Button which is optional.

  • card-front is in the front of all the cards
  • card-middle is in the second place in the card stack
  • card-back is the 3rd and last visible card
  • card-out can be the extra cards you want to place. These cards will be visible whenever they are on 1st, 2nd or on 3rd place in the card stack
<div class="uic-wrapper no-touch">
  <ul>
    <li>
      <ul class="cards-wrapper">
        <li class="card card-front"></li>
        <li class="card card-middle"></li>
        <li class="card card-back"></li>
        <li class="card card-out"></li>
        <!-- <li class="card card-out"></li> -->
      </ul>
      
      <nav>
        <ul>
          <li><a class="btn-back" href="#0"><i class="fa fa-arrow-left"></i></a></li>
          <li><a class="btn-next" href="#0">Next <i class="fa fa-arrow-right"></i></a></li>
          <li><a href="#0" class="btn-finish hide">Finish</a></li> <!-- Optional -->
        </ul>
      </nav>
    </li>
</ul>
</div>

2. The basic CSS styles for the card wizard. Set the perspective to 500px to give it 3d feel and adding the z-index to all the cards to arrange them

.uic-wrapper {
  perspective: 500px;
  perspective-origin: 50% -30%;
}

.uic-wrapper ul li .cards-wrapper .card-front {
  position: relative;
  z-index: 3;
}

.uic-wrapper ul li .cards-wrapper .card-middle { z-index: 2; }

.uic-wrapper ul li .cards-wrapper .card-back { z-index: 1; }

.uic-wrapper ul li .cards-wrapper .card-out {
  z-index: 0;
  opacity: 0;
}

.uic-wrapper nav {
  position: relative;
  z-index: 4;
}

.uic-wrapper nav .btn-back {
  top: 20px;
  left: 20px;
}

.uic-wrapper nav .btn-finish, .uic-wrapper nav .btn-next {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.uic-wrapper .noBack { padding: 20px; }

.uic-wrapper .toRight {
  transform: translate3d(0, 0, 100px);
  opacity: 0;
}

.uic-wrapper .toLeft {
  transform: none;
  opacity: 1;
}

.uic-wrapper:hover .card-middle {
  transform: translate3d(0, 0, -60px);
  opacity: .8;
}

.uic-wrapper:hover .card-back {
  transform: translate3d(0, 0, -120px);
  opacity: .4;
}

3. Include the necessary JavaScript files on the page. Dependencies:

  • jQuery
  • Font Awesome
  • modernizr.js
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

This awesome jQuery plugin is developed by uicardiodev. For more Advanced Usages, please check the demo page or visit the official website.