Custom Whatsapp Field (jQuery)

by. Kang Rian - Tetangga Sebelah

HTML

<div id='wafield'>

  <audio id="my_audio" src="https://www.tetangga-sebelah.com/whatsapp_ringtone.mp3"></audio>
  
  <header>
    <a href='#profil'>
      <img src='https://lh3.googleusercontent.com/-KKDl5K32rlE/WtaKsZ9LTXI/AAAAAAAAEnE/gQSTaic6MbgIFlRhIzfXWB9WseMtAvYCACLcBGAs/h40/ava.jpg' alt='ava'/>
    </a>

    <h4>Codepelajar.com</h4>
    <small id='menulis'>Sedang menulis...</small><small id='status'>Online @ <time id='dateTime'></time></small>
  </header>
  <br/>
  <div class='chat c1'>
    Terima kasih sudah mampir ke <b>Tetangga-sebelah.com</b> 🙏
  </div>
  <div class='chat c2'>
    Silahkan hubungi saya melalui "Whatsapp" untuk memudahkan Layanan & Percakapan selanjutnya.. <small id='chatTime'></small>
  </div>
  <div class='field'>
    <div id='option' class='option clear'>
      <select id='layanan'>
        <option value='pilihLayanan' selected hidden>Pilih Layanan →</option>
        <option value='Buat Website'>Buat Website</option>
        <option value='Optimasi SEO'>Optimasi SEO</option>
        <option value='Desain Template "Blogger"'>Desain Template "Blogger"</option>
        <option value='Desain Template "Wordpress"'>Desain Template "Wordpress"</option>
        <option value='Beli Template Blogger "PRO-File"'>Beli Template Blogger "PRO-File"</option>
        <option value='Beli Template Blogger "Media ID"'>Beli Template Blogger "Media ID"</option>
        <option value='Beli Template Blogger "Lite Media"'>Beli Template Blogger "Lite Media"</option>
        <option value='Konsultasi...'>Konsultasi...</option>
      </select>
      <input autocomplete='off' type='email' id='email' placeholder='E-mail..'>
      <input autocomplete='off' type='text' id='nama' placeholder='Nama..'>
      <input autocomplete='off' type='text' id='perusahaan' placeholder='Perusahaan (Jika ada)'>
    </div>
    <div id='sendmessage' class='clear'>
      <input type='tel' name='tel' id='tel' value='+62 896-1888-5066' hidden>
      <textarea type='textarea'...

CSS

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background:#dbdbd3;
}
body:before {
  content:'';
  display:block;
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  height:127px;
  background:#009688;
}
b {
  font-weight:500;
}
#wafield {
  text-rendering:optimizeLegibility;
  font-size:16px;
  position:relative;
  display: flex;
  flex-direction: column;
  max-width:calc(100% - 20px);
  min-width:280px;
  width:760px;
  min-height:calc(100vh - 40px);
  border-radius:3px;
  box-shadow:0 1px 5px rgba(0,0,0,0.2);
  margin:20px auto;
  background:#e5ddd5 url(https://lh3.googleusercontent.com/-j4ZM9guJB7o/WtcreGub2CI/AAAAAAAAEoI/TwI7gBTRWFEj5XGOb4XFjeRAwVgZnWJlQCLcBGAs/s0/wa_bg.png) repeat center center;
  background-size:cover;
}
#wafield, #wafield * {
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
}
#wafield header {
  height:60px;
  background:#eee;
  border-radius:3px 3px 0 0;
  margin-bottom:5px;
}
#wafield header img {
  width:40px;
  height:40px;
  border-radius:40px;
  float:left;
  margin:10px 20px;
}
#wafield header h4 {
  padding:10px 0 0;
  margin:0;
  font-weight:500;
  font-size:15px;
}
#wafield header h4 input {
  display:inline;
  background:transparent;
  border:none;
  outline:none;
}
#wafield header small {
  display:block;
  opacity:.7;
}
#wafield header small#menulis {
  color:green;
}
#wafield header small#status {
  display:none;
}
#wafield .chat {
  display:inline-block;
  opacity:0;
  max-width:calc(100% - 20px);
  background:#fff;
  color:#4d4d4d;
  padding:10px 15px;
  padding-right:40px;
  font-size:90%;
  margin:5px auto 5px 10px;
  border-radius:6px;
  position:relative;
}
@media(max-width:480px) {
  #wafield .chat {
    font-size:14px;
  }
}
#wafield .chat small {
  font-size:80%;
  opacity:.6;
  position:absolute;
  bottom:5px;
  right:5px;
}
#wafield .field {
  display:block;
  background:#f5f1ee;
  color:#989c9d;
  padding:10px;
 ...

JavaScript

$(window).bind('load', function () {

  $("#menulis").delay(2000).fadeOut(0);
  $("#status").delay(2000).fadeIn(0);

  $(".c1").delay(2000).animate({opacity: "1"},0);
  var notif = document.getElementById("my_audio"); setTimeout(function() { notif.play(); }, 2000);

  $("#menulis").delay(1000).fadeIn(0);
  $("#status").delay(1000).fadeOut(0);

  $("#menulis").delay(3000).fadeOut(0);
  $("#status").delay(3000).fadeIn(0);

  $(".c2").delay(6000).animate({opacity: "1"},0);
  var notiff = document.getElementById("my_audio"); setTimeout(function() { notiff.play(); }, 6000);

});

$('#pesan').focus(function(){
  $('#wafield .field div.option').fadeIn();
  $('html, body').animate({scrollTop: $('#option').offset().top}, 500);
});

$('a.kirimwa').click(function(){
  if ($('#layanan').val() == 'pilihLayanan'){
    alert('Silahkan "Pilih Layanan" sebelum mengirim pesan...');
    $('#pesan').focus();
    return false;
  } else if ($('#email').val() == '') {
    alert('Alamat E-mail dibutuhkan...');
    $('#pesan').focus();
    return false;
  } else if ($('#nama').val() == '') {
    alert('Silahkan Tulis "Nama Lengkap Anda" sebelum mengirim pesan...');
    $('#pesan').focus();
    return false;
  } else if ($('#pesan').val() == '') {
    alert('Silahkan tulis pesan...');
    $('#pesan').focus();
    return false;
  } else if ($('#perusahaan').val() == '') {
    $(this).attr('href','https://api.whatsapp.com/send?phone=' + $('#tel').val() + '&text=Assallamu`alaikum kang, saya ' + $('#nama').val() + '.. mau ' + $('#layanan').val() + '%0A%0AE-mail: ' + $('#email').val() + '%0A%0A-%0A%0A' + $('#pesan').val());

    $(this).attr('target','_blank');
  } else {
    $(this).attr('href','https://api.whatsapp.com/send?phone=' + $('#tel').val() + '&text=Assallamu`alaikum kang, saya ' + $('#nama').val() + ' dari Perusahaan "' + $('#perusahaan').val() + '".. mau ' + $('#layanan').val() + '%0A%0AE-mail: ' + $('#email').val() + '%0A%0A-%0A%0A' + $('#pesan').val());
   ...