Home » Web Designs » Membuat Form Pendaftaran “Multi-Step” Dengan CSS3 & jQuery

Membuat Form Pendaftaran “Multi-Step” Dengan CSS3 & jQuery

Kali ini saya akan menyajikan artikel tutorial tentang cara membuat form pendaftaran multi step dengan menggunakan CSS3 dan JQuery.

Untuk lebih jelasnya, lihat demonya di link yang saya sematkan di gambar berikut:

Tampilan Form Pendaftaran "Multi-Step" Dengan CSS3 & JQuery

Tampilan Form Pendaftaran "Multi-Step" Dengan CSS3 & JQuery

Kita akan membuat 3 step form untuk mengisi dan 1 form untuk menampilkan ringkasan data yang sudah di-inputkan sebelumnya. Untuk detailnya:

  1. Username dan password
  2. Nama depan, nama belakang (family name) dan alamat email
  3. Jenis kelamin dan regional
  4. Ringkasan data

Kode HTML

Oke, untuk mengawalinya. Kita akan membuat container dengan membagi 4 div untuk masing-masing langkah.

<div id="container">
    <form action="#" method="post">

        <div id="langkah_pertama">
        <div id="langkah_kedua">
        <div id="langkah_ketiga">
        <div id="langkah_keempat">

    </form>
</div>

Pada masing-masing div kita isikan elemen HTML untuk membuat komponen form (label, tabel, input, optiion dan lain sebagainya.

Untuk div id langkah pertama, kita akan isikan elemen H1, input, label dan submit.

<div id="langkah_pertama">
<h1>FORM<span>PENDAFTARAN</span></h1>

<div>
    <input type="text" name="username" id="username" value="username" />
    <label for="username">Minimal 4 karakter. Huruf kapital, huruf kecil dan angka</label>

    <input type="password" name="password" id="password" value="password" />
    <label for="password">Minimal 5 karakter. Gunakan kombinasi huruf kapital dan huruf kecil untuk password yang lebih kuat</label>

    <input type="password" name="ulangpassword" id="ulangpassword" value="password" />
    <label for="ulangpassword">Ketik ulang password</label>
</div>
<!-- clearfix -->
<div class="clear"></div>
<!-- /clearfix -->

     <input type="submit" name="submit_pertama" id="submit_pertama" value="Submit" />

<!-- clearfix -->
<div class="fix"></div>
<!-- /clearfix -->
</div>

Untuk selanjutnya, ini kode lengkap untuk HTML-nya.

<div id="container">
<form action="#" method="post">

<div id="langkah_pertama">
<h1>FORM<span>PENDAFTARAN</span></h1>
      <div class="form">
      <input type="text" name="username" id="username" value="username" />
      <label for="username">Minimal 4 karakter. Huruf kapital, huruf kecil dan angka</label>

      <input type="password" name="password" id="password" value="password" />
      <label for="password">Minimal 5 karakter. Gunakan kombinasi huruf kapital dan huruf kecil untuk password yang lebih kuat</label>

      <input type="password" name="ulangpassword" id="ulangpassword" value="password" />
      <label for="ulangpassword">Ketik ulang password</label>
</div>

<!-- clearfix -->
<div class="clear"></div>
<!-- /clearfix -->

      <input class="submit" type="submit" name="submit_pertama" id="submit_pertama" value="Submit" />

<!-- clearfix -->
<div class="clear"></div>
<!-- /clearfix -->
</div>

<div id="langkah_kedua">
<h1>FORM<span>PENDAFTARAN</span></h1>

      <div class="form">
      <input type="text" name="firstname" id="firstname" value="first name" />
      <label for="firstname">Nama Depan </label>

      <input type="text" name="lastname" id="lastname" value="last name" />
      <label for="lastname">Nama Belakang </label>

      <input type="text" name="email" id="email" value="email address" />
      <label for="email">Alamat email Anda. Detail pendaftaran akan dikirim melalui alamat email yang anda tuliskan.</label>
 </div>

<!-- clearfix -->
<div class="clear"></div>
<!-- /clearfix -->

     <input class="submit" type="submit" name="submit_kedua" id="submit_kedua" value="Submit" />

<!-- clearfix -->
<div class="clear"></div>
<!-- /clearfix -->
</div>

<div id="langkah_ketiga">
<h1>FORM<span>PENDAFTARAN</span></h1>
<div class="form">
      <select id="gender" name="gender">
         <option>Laki-laki</option>
         <option>Perempuan</option>
      </select>
      <label for="gender">Jenis kelamin </label> 

<!-- clearfix -->
<div class="clear"></div>
<!-- /clearfix -->

       <select id="region" name="region">
         <option>Jawa</option>
         <option>Sumatra</option>
         <option>Kalimantan</option>
         <option>Sulawesi</option>
         <option>Papua</option>
       </select>
       <label for="region">Daerah regional </label>
</div>

<!-- clearfix -->
<div class="clear"></div>
<!-- /clearfix -->

       <input class="submit" type="submit" name="submit_ketiga" id="submit_ketiga" value="Submit" /></div>  

<!-- clearfix -->
<div class="clear"></div>
<!-- /clearfix -->
</div>

<div id="langkah_keempat">
<h1>FORM<span>PENDAFTARAN</span></h1>
<div class="form">
<h2>Ringkasan</h2>

       <table>
           <tr><td>Username</td><td></td></tr>
           <tr><td>Password</td><td></td></tr>
           <tr><td>Email</td><td></td></tr>
           <tr><td>Nama</td><td></td></tr>
           <tr><td>Jenis Kelamin</td><td></td></tr>
           <tr><td>Regional</td><td></td></tr>
        </table>
</div>      

<!-- clearfix -->
<div class="clear"></div>
<!-- /clearfix -->

<input class="send submit" type="submit" name="submit_keempat" id="submit_keempat" value="Kirim" />

</div>
</form>
</div>

<div id="progress_bar">
<div id="progress"></div>
<div id="progress_text">LANGKAH 0/3</div>
</div>

Namun jangan lupa untuk meletakan script untuk memanggil CSS dan javascript pada bagian header yang tidak dituliskan di sini.

Kode CSS

Selanjutnya, mari kita rias markup yang sudah dibuat sebelumnya. Di tutorial ini, di dalam paket file yang bisa diunduh, saya tidak menyediakan file gambar. Karena form pendaftaran ini memang tidak memiliki komponen gambar. Semua menggunakan teknik CSS3 untuk membuat radius dan gradasi warna.

Pada bagian atas dari baris kode CSS dibawah ini, saya menyematkan CSS Reset dari Eric Meyer.

/* CSS Reset (Eric Meyer) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Verdana, sans-serif;
    font-size: 12px;
}

input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; }
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#container {
    background: -moz-linear-gradient(top,#ff2819 0%,#ab0000);
    background: -webkit-gradient(linear,left top,left bottom,from(#ff2819),to(#ab0000));
    border-radius: 25px;    
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border: 1px solid #7d0000;
    -moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
    inset 0px 0px 2px rgba(255,255,255,0.7);
    -webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
    inset 0px 0px 2px rgba(255,255,255,0.7);
    width: 754px;
    height: 370px;
    margin: 50px auto;
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}
    #container #langkah_pertama, #langkah_kedua, #langkah_ketiga, #langkah_keempat { display: none; }
    #container #langkah_pertama{ display: block; }

    #container .form { margin: 66px 72px 0 72px; }

    #container h1, #container h2 {
        color: #EAEAEA;
        font-size: Verdana, sans-serif;
        text-align: center;
        font-size: 24px;
        text-shadow: 1px 1px 2px #222;
    }
        #container h1 span { color: #BAB8B8; }

    #container h2 {
        color: #888;
        font-size: 20px;
        text-align: left;
        text-shadow: none;
    }

    #container table {
        margin: 20px 40px;
        font-size: 14px;
        font-weight: bold;
    }
        #container table td {
            padding: 5px 10px;
        }
            #container table td:nth-child(2) {
                color: #222222;
            }

    #container input, #container select {
        color: #888;
        border: 1px solid #ccc;
        font-family: Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        height: 35px;
        padding: 0 25px;
        margin: 20px 0;
        float: left;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }
        #container input.submit {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #ffffff;
        padding: 10px 20px;
        background: -moz-linear-gradient(top,#ff2819 0%,#ab0000);
        background: -webkit-gradient(linear,left top,left bottom,from(#ff2819),to(#ab0000));
        border-radius: 25px;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border: 1px solid #7d0000;
        -moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);
        -webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);
        text-shadow:0px -1px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
        border: none;
        cursor: pointer;
        width: 85px;
        height: 38px;
        position: relative;
        bottom: 2px;
        left: 555px;
        width: 100px;
        }
            #container input.submit:focus { border: none; }

        #container input.error { border: 3px solid #FFFA02; }
        #container input.valid { border: 3px solid #1FFF00; }

        #container input:focus, #container select:focus {
            border: 1px solid #a90329;
            color: #a90329;
        }

    #container select { padding: 5px 0 5px 25px; }
        #container option { padding: 0 15px; }

    #container label {
        color: #E5DCDC;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        float: right;
        margin: 23px -25px;
        width: 270px;
    }

#progress_bar {
    width: 339px;
    height: 24px;
    margin: 0 auto;
    position: relative;
}

#progress {
    width: 0px;
    height: 23px;
    border-radius: 20px;
}
#progress_text {
    background: -moz-linear-gradient(top,#b3ef00 0%,#1a8e00);
    background: -webkit-gradient(linear,left top,left bottom,from(#b3ef00),to(#1a8e00));
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    position: relative;
    line-height: 21px;
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px #222;
    width: 339px;
    height: 24px;
    top: -23px;
    left: 0;
}

Yap! Form sudah terlihat cantik setelah dipoles dengan CSS. Namun, masih ada komponen lagi untuk menambah fungsi dari form tersebut yaitu jQuery.

jQuery

Kita menggunakan jQuery untuk menangani:

  • membuat efek slider pada perpindahan tahapan (step)
  • validasi data masukan (input)

Kok cuma dua? Tenang… masih banyak yang bisa dilakukan oleh jQuery. Untuk eksplorasi lebih jauh, silakan googling dan bereksperimen sendiri.

Saya menggunakan 2 plugin jQuery, jQueryUI (user interface) dan jQuery inputfocus.

Mari kita copy-paste-kan baris kode jQuery dibawah ini.

$(function(){
    //field value
    var field_values = {
            //id        :  value
            'username'  : 'username',
            'password'  : 'password',
            'ulangpassword' : 'password',
            'firstname'  : 'first name',
            'lastname'  : 'last name',
            'email'  : 'email address'
    };

    //inputfocus
    $('input#username').inputfocus({ value: field_values['username'] });
    $('input#password').inputfocus({ value: field_values['password'] });
    $('input#ulangpassword').inputfocus({ value: field_values['ulangpassword'] });
    $('input#lastname').inputfocus({ value: field_values['lastname'] });
    $('input#firstname').inputfocus({ value: field_values['firstname'] });
    $('input#email').inputfocus({ value: field_values['email'] }); 

    //setting langkah
    $('#progress').css('width','0');
    $('#progress_text').html('Langkah 0/1');

    //langkah_pertama
    $('form').submit(function(){ return false; });
    $('#submit_pertama').click(function(){
        //menghilangkan class
        $('#langkah_pertama input').removeClass('error').removeClass('valid');

        //melakukan cek jika input tidak kosong
        var fields = $('#langkah_pertama input[type=text], #langkah_pertama input[type=password]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<4 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });        

        if(!error) {
            if( $('#password').val() != $('#ulangpassword').val() ) {
                    $('#langkah_pertama input[type=password]').each(function(){
                        $(this).removeClass('valid').addClass('error');
                        $(this).effect("shake", { times:3 }, 50);
                    });

                    return false;
            } else {   
                //update progress
                $('#progress_text').html('Langkah 1/3');
                $('#progress').css('width','113px');

                //slider langkah
                $('#langkah_pertama').slideUp();
                $('#langkah_kedua').slideDown();     
            }               
        } else return false;
    });

    $('#submit_kedua').click(function(){
        //menghilangkan class
        $('#langkah_kedua input').removeClass('error').removeClass('valid');

        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields = $('#langkah_kedua input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update langkah (progress)
                $('#progress_text').html('Langkah 2/3');
                $('#progress').css('width','226px');

                //slider langkah
                $('#langkah_kedua').slideUp();
                $('#langkah_ketiga').slideDown();     
        } else return false;
    });

    $('#submit_ketiga').click(function(){
        //update langkah (progress)
        $('#progress_text').html('Langkah 3/3');
        $('#progress').css('width','339px');

        //ke langkah ke empat
        var fields = new Array(
            $('#username').val(),
            $('#password').val(),
            $('#email').val(),
            $('#firstname').val() + ' ' + $('#lastname').val(),
            $('#gender').val(),
            $('#region').val()                       
        );
        var tr = $('#langkah_keempat tr');
        tr.each(function(){
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });

        //slider langkah
        $('#langkah_ketiga').slideUp();
        $('#langkah_keempat').slideDown();            
    });

    $('#submit_keempat').click(function(){
        //mengirimkan informasi dan alert
        alert('Data sent');
    });

});

Penjelasan umum dari kode diatas:

  • Kode dibawah komentar (// ) //inputfocus di atas adalah untuk mengaktifkan / memanggil fungsi dari plugin inputfocus.
  • Kode diantara //langkahkedua -  mempunyai fungsi untuk mem-validasi atau mengoreksi data masukan. Misalnya username harus minimal 4 karakter, parameter email dan memeriksa apakah input password dan ulang password adalah sama.
  • Kode selanjutnya adalah untuk menyimpan hasil masukan dan pada akhirnya meringkasnya dalam ringkasan.

Jika sudah di copy-paste namun fungsi jQuery tidak berfungsi. Coba cek apakah script pemanggil arwahnya javascriptnya sudah diletakan di antara <head></head> atau belum. Ini script yang harus dimasukan di awal-awal dokumen HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.inputfocus-0.9.min.js"></script>
<script type="text/javascript" src="js/jquery.main.js"></script>

Sekian dulu tutorial Membuat Form Pendaftaran “Multi-Step” Dengan CSS3 & JQuery, sampai ketemu di artikel-artikel berikutnya. :)

12 Comments

  1. kang ini gimana cara masang nya?
    saya mau bikin form registrasi sama login ..
    tapi bingung kang ..tolong pencerahan nya…
    email ya kang…
    denyjackrose@gmail.com

    • andreanisme

      Download scriptnya, lalu buat folder dan taruh di webserver (localhost atau di web hosting) lalu panggil dengan nama folder.
      Ex: localhost/namafolder (jika diletakan di localhost komputer) :)

  2. mas ijin sedot dulu ya , saya coba dulu..

    pertanyaan nyusul thx:)

  3. mas an’ kalo mau di hubungin ke data base gimana tuh biar nanti orang-orang yang daftar bisa tersimpan di data base dan bisa login lagi??
    makasi sebelumnya.

  4. Mangtabs. . request untuk contoh sekalian ada database nya dong mas. .hee

  5. Saya sudah coba Mas .
    keren banget :D
    cuma bingung saat Saya aplikasikan ke website Saya tampilannya jadi ke pinggir dan banner yang Saya buat hilang .
    mohon pencerahannya Mas ke email Saya .
    artikelnya sangat membantu .
    terima kasih :)

  6. Ko sama dengan ini y?
    Tapi gap2 yg penting keren

  7. gan, klo misalnya nya salah input gmn cara bikin menu backnya?

  8. Makasih banget, matap. Tapi untuk eksekusi ke databasenya gak ada ya? mohon dong he he action ke data basenya please… makasih ya.

Leave a Reply

Scroll To Top