Formulir Kontak Mengambang menggunakan jQuery AJAX

bentuk kontak mengambang jQuery memberikan tampilan modern dan terasa di situs web kami. Tutorial ini memiliki contoh untuk menunjukkan bentuk kontak mengambang lengket di halaman web. Dalam contoh ini, kami memiliki ikon kontak yang akan meluncur naik dan turun berdasarkan gulungan halaman. Pada mengklik ikon ini tampilan formulir kontak dikontrol oleh efek hide show jQuery .

lihat demo unduh

Formulir Kontak Mengambang

Awalnya, kami menunjukkan ikon kontak lengket untuk meluncur di atas gulir konten. Pada mengklik ikon ini, formulir kontak akan diapungkan di area konten.

Markup formulir kontak mengambang adalah,

  <div id = "contact-box">
  <div id = "btnContact" onClick = "showContact ();"> <img src = "contact.png" /> </ div>
  <div id = "frmContact">
   <div id = "mail-status"> </ div>
   <div>
    <label style = "padding-top: 20px;"> Nama </ label>
    <span id = "userName-info" class = "info"> </ span> <br/>
    <input type = "text" name = "userName" id = "userName" class = "demoInputBox">
   </ div>
   <div>
    <label> Email </ label>
    <span id = "userEmail-info" class = "info"> </ span> <br/>
    <input type = "text" name = "userEmail" id = "userEmail" class = "demoInputBox">
   </ div>
   <div>
    <label> Subjek </ label> 
    <span id = "subject-info" class = "info"> </ span> <br/>
    <input type = "text" name = "subject" id = "subjek" class = "demoInputBox">
   </ div>
   <div>
    <label> Konten </ label> 
    <span id = "info-konten" class = "info"> </ span> <br/>
    <textarea name = "content" id = "konten" class = "demoInputBox" cols = "60" baris = "6"> </ textarea>
   </ div>
   <div>
    <button name = "submit" class = "btnAction" onClick = "sendContact ();"> Kirim </ tombol>
   </ div>
  </ div>
 </ div>
 <div class = "txt-content"> <! - area konten -> </ div> 

jQuery Sticky Floating

Kami menggunakan plugin jQuery sticky-float untuk membuat efek mengambang lengket ke formulir kontak di halaman gulir. Kita harus memanggil fungsi plugin seperti,

  $ (document) .ready (function () {
  $ ('# contact-box'). stickyfloat ({duration: 400, offsetY: 200});
 }); 

Pemilih kotak kontak yang mencakup ikon kontak dan formulir untuk diapungkan dengan konten saat bergulir. The showContat () fungsi akan dipanggil pada mengklik ikon kontak untuk menampilkan formulir kontak.Fungsinya adalah,

  function showContact () { 
  if ($ ("# frmContact"). css ('display') == 'none') $ ("# frmContact"). show ();
  else $ ("# frmContact"). hide ();
 } 

Selain itu, kami memiliki validasi form bentuk jQuery, skrip pengiriman email seperti yang telah kita lihat di tutorial formulir kontak sebelumnya. Unduh sumber untuk mendapatkan kode lengkap.

lihat demo unduh

Tutorial kode jQuery ini diterbitkan pada 29 Oktober 2014.