Cara Membuat Multistep Form Keren Dengan HTML5

Cara Membuat Multistep Form Keren Dengan HTML5 - Multistep Form adalah sekelompok inputan yang digunakan untuk mengisi dan mengirim data yang dibagi menjadi beberapa step pengisian data untuk mengatasi form standar yang panjang, form sering kali digunakan untuk membuat login, form pegisian biodata, proses penghitungan, dan berbagai macam lainya.

Form terkadang mempunyai inputan yang banyak atau panjang, sepertihalnya dalam kasus pengisian biodata diri. Dalam biodata terdapat banyak data yang harus di kirimkan seperti nama, alamat, tempat lahir, tgl lahir, jenis kelamin, email, username, password, dll. Biasanya kita hanya akan memanjangkan form itu ke bawah atau membaginya menjadi dua kolom agar tidak terlalu panjang, akan tetapi dengan teknologi pemrograman web yang ada sekarang kita tidak perlu lagi melakukan hal tersebut.

Ketika kita menemui kasus form yang mepunyai inputan panjang kita dapat menjadinya dalam beberapa step namun tetap pada jendela dan layar yang sama sehingga mebuat website menjadi lebih ringan dengan menggunakan HTML5 dan Javascript. Untuk lebih jelasnya langsung saja kita meluncur ke programnya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Buatlah sebuah folder baru di mana saja sesukan anda dengan nama Multistep Form. Sekarang untuk mempercantik tampilan mutistep form kita menjadi keren, buatlah dengan notepad atau notepad++ file baru kemudian isikan script berikut dan simpan dalam forder sebelumnya dengan nama style.css

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);
   
/*basic reset*/
* {margin: 0; padding: 0;}
 
html {
 height: 100%;
 /*Image only BG fallback*/
 background: url('gs.png');
 /*background = gradient + image pattern combo*/
 background: 
  linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), 
  url('gs.png');
}
   
body {
 font-family: montserrat, arial, verdana;
}

/*form styles*/
#msform {
 width: 400px;
 margin: 50px auto;
 text-align: center;
 position: relative;
}

#msform fieldset {
 background: white;
 border: 0 none;
 border-radius: 3px;
 box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 padding: 20px 30px;
  
 box-sizing: border-box;
 width: 80%;
 margin: 0 10%;
   
 /*stacking fieldsets above each other*/
 position: absolute;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
 display: none;
}

/*inputs*/
#msform input, #msform textarea {
 padding: 15px;
 border: 1px solid #ccc;
 border-radius: 3px;
 margin-bottom: 10px;
 width: 100%;
 box-sizing: border-box;
 font-family: montserrat;
 color: #2C3E50;
 font-size: 13px;
}

/*buttons*/
#msform .action-button {
 width: 100px;
 background: #27AE60;
 font-weight: bold;
 color: white;
 border: 0 none;
 border-radius: 1px;
 cursor: pointer;
 padding: 10px 5px;
 margin: 10px 5px;
}

#msform .action-button:hover, #msform .action-button:focus {
 box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

/*headings*/
.fs-title {
 font-size: 15px;
 text-transform: uppercase;
 color: #2C3E50;
 margin-bottom: 10px;
}

.fs-subtitle {
 font-weight: normal;
 font-size: 13px;
 color: #666;
 margin-bottom: 20px;
}

/*progressbar*/
#progressbar {
 margin-bottom: 30px;
 overflow: hidden;
 /*CSS counters to number the steps*/
 counter-reset: step;
}

#progressbar li {
 list-style-type: none;
 color: white;
 text-transform: uppercase;
 font-size: 9px;
 width: 33.33%;
 float: left;
 position: relative;
}

#progressbar li:before {
 content: counter(step);
 counter-increment: step;
 width: 20px;
 line-height: 20px;
 display: block;
 font-size: 10px;
 color: #333;
 background: white;
 border-radius: 3px;
 margin: 0 auto 5px auto;
}

/*progressbar connectors*/
#progressbar li:after {
 content: '';
 width: 100%;
 height: 2px;
 background: white;
 position: absolute;
 left: -50%;
 top: 9px;
 z-index: -1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
 /*connector not needed before the first step*/
 content: none; 
 }

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
 background: #27AE60;
 color: white;
}

Javascript

Untuk memberikan efek animasi dan membagi formnya menjadi beberapa step kita memerlukan telebih dahulu JQuery, dalam form ini kita membutuhkan dua file download filenya di sini : File1 dan File 2

Kemudian simpan dalam folder yang sama dengan CSS sebelumnya.

Background

Untuk membuat lebih keren lagi form kita kita tambahkan gambar untuk background.

Background Multistep Form

Simpan gambar tersebut dengan nama gs.png dan simpan dalam folder yang sama dengan CSS dan Javascript.

HTML

Sekarang untuk tampilannya buatlah sebuah file HTML baru dengan notepad++ anda dan isi dengan script berikut :

<!DOCTYPE html>
<html>
 <head>          
  <link href="style.css" rel="stylesheet">
        <!-- jQuery -->
        <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
        <!-- jQuery easing plugin -->
        <script src="jquery.easing.min.js" type="text/javascript"></script>      
    </head>
    <body>
     
        <!-- multistep form -->
        <form id="msform">
            <!-- progressbar -->
            <ul id="progressbar">
                <li class="active">Account Setup</li>
                <li>Social Profiles</li>
                <li>Personal Details</li>
            </ul>
            <!-- fieldsets -->
            <fieldset>
                <h2 class="fs-title">Create your account</h2>
                <h3 class="fs-subtitle">This is step 1</h3>
                <input type="email" name="email" placeholder="Email" />
                <input type="password" name="pass" placeholder="Password" />
                <input type="password" name="cpass" placeholder="Confirm Password" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Social Profiles</h2>
                <h3 class="fs-subtitle">This is step 3</h3>
                <input type="text" name="twitter" placeholder="Twitter" />
                <input type="text" name="facebook" placeholder="Facebook" />
                <input type="text" name="gplus" placeholder="Google Plus" />
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Personal Details</h2>
                <h3 class="fs-subtitle">This is step 3</h3>
                <input type="text" name="fname" placeholder="First Name" />
                <input type="text" name="lname" placeholder="Last Name" />
                <input type="text" name="phone" placeholder="Phone" />
                <textarea name="address" placeholder="Address"></textarea>
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />
            </fieldset>
        </form>
        
        <script type="text/javascript">
   //jQuery time
   var current_fs, next_fs, previous_fs; //fieldsets
   var left, opacity, scale; //fieldset properties which we will animate
   var animating; //flag to prevent quick multi-click glitches
   
   $(".next").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    
    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
    
    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
     step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale current_fs down to 80%
      scale = 1 - (1 - now) * 0.2;
      //2. bring next_fs from the right(50%)
      left = (now * 50)+"%";
      //3. increase opacity of next_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({'transform': 'scale('+scale+')'});
      next_fs.css({'left': left, 'opacity': opacity});
     }, 
     duration: 800, 
     complete: function(){
      current_fs.hide();
      animating = false;
     }, 
     //this comes from the custom easing plugin
     easing: 'easeInOutBack'
    });
   });
   
   $(".previous").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    
    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    
    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
     step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale previous_fs from 80% to 100%
      scale = 0.8 + (1 - now) * 0.2;
      //2. take current_fs to the right(50%) - from 0%
      left = ((1-now) * 50)+"%";
      //3. increase opacity of previous_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({'left': left});
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
     }, 
     duration: 800, 
     complete: function(){
      current_fs.hide();
      animating = false;
     }, 
     //this comes from the custom easing plugin
     easing: 'easeInOutBack'
    });
   });
   
   $(".submit").click(function(){
    return false;
   })
   
  </script>
    </body>
</html>

Simpan nama index.html dalam folder yang sama dengan CSS dan Javascript. di dalam HTML ini lah kita memanggil CSS dan JQuery yang kita buat sebelumnya. Dan di dalam sini kita meletakan javascript yang digunakan untuk membagi formnya menjadi beberapa step.

Sekarang Multistep form keren dengan HTML5 anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh klw di IE tidak jalan saya sudah tidak heran.