Sekarang form sudah dapat berfungsi. Kita dapat membuka halaman di browser, klik link "Send Us an Email" untuk melompat ke form, isi kolom, dan submit form untuk mengirim pesan.

Namun, kita sekarang akan meningkatkan form kita menggunakan JavaScript untuk memberikan experience yang lebih baik untuk pengunjung.

Kita akan menggunakan jQuery untuk melakukannya, sehingga langkah pertama adalah untuk menyertakan pustaka jQuery di pada halaman head elemen:

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Kita juga akan tambahkan variable global config, yaitu messageDelay, untuk mengontrol berapa lama message box tampil pada layar, Nilai ini berjumlah milliseconds. Silahkan ganti jika ingin lebih cepat atau lambat

<script type="text/javascript">
 
var messageDelay = 2000;  // How long to display status messages (in milliseconds)

Setelah kita menyisipkan file JQuery, sekarang kita akan tingkatkan JavaScript init () function. Atur bentuknya agar dapat ditampilkan dan disembunyikan sesuai permintaan, dan juga modifikasi bentuknya agar bias dikirim menggunakan JavaScript.

Berikut source kodenya:

// Init the form once the document is ready
$( init );
 
 
// Initialize the form
 
function init() {
 
  // Hide the form initially.
  // Make submitForm() the form’s submit handler.
  // Position the form so it sits in the centre of the browser window.
  $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
 
  // When the "Send us an email" link is clicked:
  // 1. Fade the content out
  // 2. Display the form
  // 3. Move focus to the first field
  // 4. Prevent the link being followed
 
  $('a[href="#contactForm"]').click( function() {
    $('#content').fadeTo( 'slow', .2 );
    $('#contactForm').fadeIn( 'slow', function() {
      $('#senderName').focus();
    } )
 
    return false;
  } );
   
  // When the "Cancel" button is clicked, close the form
  $('#cancel').click( function() { 
    $('#contactForm').fadeOut();
    $('#content').fadeTo( 'slow', 1 );
  } );  
 
  // When the "Escape" key is pressed, close the form
  $('#contactForm').keydown( function( event ) {
    if ( event.which == 27 ) {
      $('#contactForm').fadeOut();
      $('#content').fadeTo( 'slow', 1 );
    }
  } );
 
}

Berikut keterangan dari kode di atas

1. Init bentuk setelah dokumen siap

Kita gunakan objek jQuery $, untuk memicu fungsi init () setelah DOM siap.

2. Sembunyikan form, atur submit handler, dan posisi form

Hal pertama yang kita lakukan di dalam fungsi init () itu sendiri adalah membuat beberapa perubahan pada form#contactForm.

Pertama kita sembunyika dari halaman dengan menggunakan metode jQuery hide (). Kemudian kita atur submit event handler untuk fungsi submitForm (). Terakhir, kita tambahkan kelas CSS untuk diposisikan di tengah jendela browser.

3. Membuat link "Kirim Email"agar  membuka form

Selanjutnya kita mengikat fungsi event handler anonim ke link "Kirim Email" menjadi click 'events. Fungsi ini memudar halaman konten sehingga hanya hanya terlihat di background memudar pada kontak form dan memfokuskan pada "Nama "field, dan pengunjung siap untuk mulai mengisi form. Terakhir, fungsi mengembalikan jadi false untuk mencegah link diikuti.

4. Ketika tombol "Batal" diklik, maka akan menutup form

Sekarang kita mengikat fungsi anonim lain clickevent tombol untuk "Batal" sehingga pengunjung dapat menutup form dengan mengklik tombol. Fungsi hanya memudar form keluar, dan memudar ke halaman konten kembali.

5. Ketika tombol "Escape" tombol ditekan, maka akan menutup form

Demikian pula kita mengikat fungsi untuk keydown event form kontak, sehingga kita dapat membaca tombol apa saja yang pengunjung tekan ketika melihat form. Dalam fungsi ini, kita memeriksa apakah pengunjung telah menekan tombol "Escape" (kode karakter: 27). Jika mereka tekan maka kita menutup form dengan memudarkan halaman konten.

Pada Tutorial selanjutnya kita akan menuliskan beberapa fungsi pada form agar lebih interaktif lagi.

Sampai jumpa di Tutorial selanjutnya.