Skip to content Skip to sidebar Skip to footer

Cara Menambahkan Whatsapp Ke Blog Menjadi Contact Form







Bahastutorial.com - Kesempatan kali ini saya akan membuat artikel bagaimana cara nya memasukan whatsapp ke blogger dan bisa menjadikan contact form di suatu blogger.

Perlu kita ketahui whatsapp adalah sebuah aplikasi yang saat ini sangat di gunakan oleh banyak orang di indonesia. Disini kita akan membahas tutorial cara memasukan Whatsapp ke blog dan menjadikanya sebagai contact form.

Yang biasanya contact form digunakan menggunakan email. Nah pada tutorial kali ini kita akan membuatnya contact form menjadi menggunakan whatsapp.

Tentu sangat memudahkan orang yang ingin bertanya dengan fast respawn oleh pemiliki blogger

Langsung saja ke tutorialnya

1) Masuk Ke Blogger
2) Edit Html
3) Masukan Kode CSS Di Bawah Kode </style>
4) Masukan Kode Javascript Di Atas Kode </body>
5) Masukan Kode HTML Di Page / Halaman Pada Mode Html





 
 
#whatsappwidgetbahastutorial {
  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;
}
#whatsappwidgetbahastutorial, #whatsappwidgetbahastutorial * {
    font-family:-apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, sans-serif;
}
#whatsappwidgetbahastutorial header {
  height:60px;
  background:#eee;
  border-radius:3px 3px 0 0;
  margin-bottom:5px;
}
#whatsappwidgetbahastutorial header img {
  width:40px;
  height:40px;
  border-radius:40px;
  float:left;
  margin:10px 20px;
}
#whatsappwidgetbahastutorial header h4 {
  padding:10px 0 0;
  margin:0;
  font-weight:500;
  font-size:15px;
}
#whatsappwidgetbahastutorial header h4 input {
  display:inline;
  background:transparent;
  border:none;
  outline:none;
}
#whatsappwidgetbahastutorial header small {
  display:block;
  opacity:.7;
}
#whatsappwidgetbahastutorial header small#menulis {
  color:green;
}
#whatsappwidgetbahastutorial header small#status {
  display:none;
}
#whatsappwidgetbahastutorial .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) {
  #whatsappwidgetbahastutorial .chat {
    font-size:14px;
  }
}
#whatsappwidgetbahastutorial .chat small {
  font-size:80%;
  opacity:.6;
  position:absolute;
  bottom:5px;
  right:5px;
}
#whatsappwidgetbahastutorial .field {
  display:block;
  background:#f5f1ee;
  color:#989c9d;
  padding:10px;
  margin-top:auto;
}
#whatsappwidgetbahastutorial .field div.option {
  display:none;
  width:100%;
  color:#4d4d4d;
  border:none;
  outline:none;
  resize:none;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,0.080);
}
#whatsappwidgetbahastutorial .field div.option input {
  display:block;
  float:left;
  margin:5px;
  width:calc(50% - 10px);
  height:40px;
  line-height:40px;
  padding:0 10px;
  background:transparent;
  color:#4d4d4d;
  background:#fff;
  border-radius:4px;
  border:none;
  outline:none;

  /* ICON */
  text-indent:30px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size:auto 20px;
  background-position:10px 10px;
}
#whatsappwidgetbahastutorial input#email {
  background-image: url(https://lh3.googleusercontent.com/-mFocT5R7Bn4/WtczsKBCqFI/AAAAAAAAEow/VxtlqCVok-M6AvBcnNTZq0MFFm5plb4eQCLcBGAs/h20/email.png);
}
#whatsappwidgetbahastutorial input#nama {
  background-image: url(https://lh3.googleusercontent.com/-AIQoz3eqd74/WtIab6tY5TI/AAAAAAAAEj0/VSt3vMVeiSoFzAgL9r51aE19mfXLbp-awCEwYBhgL/s20/default-avatar.png);
}
#whatsappwidgetbahastutorial input#perusahaan {
  background-image: url(https://lh3.googleusercontent.com/-Tgr1RY9ha08/WtczsRc0QmI/AAAAAAAAEo0/HSZQdfym2x0HzzZpN1qFbHufu76mHGDTgCLcBGAs/h20/perusahaan.png);
}
#whatsappwidgetbahastutorial .field div.option select {
  display:block;
  float:left;
  margin:5px;
  width:calc(50% - 10px);
  height:40px;
  line-height:40px;
  padding:0 10px;
  background:#fff;
  color:#4d4d4d;
  background:#fff;
  border-radius:4px;
  border:none;
  outline:none;
}
#whatsappwidgetbahastutorial .field .clear:after {
  content:&#39;&#39;;
  display:block;
  clear:both;
}
#whatsappwidgetbahastutorial .field textarea {
  display:block;
  float:left;
  width:calc(100% - 80px);
  height:50px;
  background:#fff;
  color:#4d4d4d;
  padding:15px 20px;
  border-radius:4px;
  border:none;
  outline:none;
  resize:none;
  overflow:hidden;
}
#whatsappwidgetbahastutorial .field textarea:focus {
  overflow-y:auto;
}
#whatsappwidgetbahastutorial .field a.kirimwa {
  display:block;
  float:left;
  background:transparent url(https://lh3.googleusercontent.com/-J_Dvg5M85ng/WtazGsvhUEI/AAAAAAAAEnU/Fe1xRGla5QUWeeP-n8cxdGj-F1-I-A_GwCLcBGAs/h20/send_wa.png) no-repeat center center;
  width:80px;
  height:50px;
  line-height:80px;
  text-align:center;
  text-decoration:none;
  color:#4d4d4d;
  border-radius:2px;
  border:none;
  outline:none;
  resize:none;
  font-size:35px;
  font-weight:bold;
}

#whatsappwidgetbahastutorial .field:last-of-type {
  border-radius:0 0 3px 3px;
}

 

<script type='text/javascript'> 
//<![CDATA[
$(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(){
  $('#whatsappwidgetbahastutorial .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());
    $(this).attr('target','_blank');
  }
});

var today = new Date();
var date = today.getDate()+'-'+(today.getMonth()+1)+'-'+today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes('ms');
var dateTime = date + ' ' + time;

document.getElementById('dateTime').innerHTML = dateTime;
document.getElementById('chatTime').innerHTML = time;
//]]>
</script>



<div id='whatsappwidgetbahastutorial'>
<header>
    <a href='#profil'>
      <img src='//2.bp.blogspot.com/-uf0eh1zq1B4/XCE1NOiu2eI/AAAAAAAAADQ/MMtyMrEBw-4YmYMZJpLYXGxtH93WQmWtACK4BGAYYCw/s113/bahastutorial.png' alt='ava'/>
    </a>

    <h4>Bahas Tutorial</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 Berkunjung Di Bahastutorial.com <b> Maaf Ada Yang Bisa Saya Bantu ? </b> 
  </div>
  <div class='chat c2'>
    Silahkan isi form pesan di bawah untuk mendapatkan bantuan secara langsung <small id='chatTime'></small>
  </div>
  <div class='field'>
    <div id='option' class='option clear'>
      <select id='layanan'>
        <option value='Pilih Salah Satu' selected hidden>Pilih Salah Satu →</option>
        <option value='Ada Template "Blogger" Apa Saja'>Ada Template "Blogger" Apa Saja</option>
        <option value='Request Tutorial "Blogger"'>Request Tutorial "Blogger"</option>
        <option value='Bertanya Seputar "Blogger"'>Bertanya Seputar "Blogger"</option>
        <option value='Bertanya Seputar "Wordpress"'>Bertanya Seputar "Wordpress"</option>
        <option value='Bertanya Seputar "Adsense"'>Bertanya Seputar "Adsense"</option>
        <option value='Request Bikin Template "Blogger"'>Request Bikin Template "Blogger"</option>
        <option value='Ada Promo Template "Blogger" Tidak'>Ada Promo Template "Blogger" Tidak</option>
        <option value='Pertanyaan Lainya...'>Pertanyaan Lainya...</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='Nama Website (Jika ada)'>
    </div>
    <div id='sendmessage' class='clear'>
      <input type='tel' name='tel' id='tel' value='6283827433008' hidden>
      <textarea type='textarea' name='pesan' id='pesan' placeholder='Tulis pesan...'></textarea>
      <a class='kirimwa' href='javascript:void(0);'></a>

    </div>
  </div>

</div>




Note :Silahkan kalian ganti gambar,nomor whastaap kalian dan kata kata yang kalian butuhkan

Bagimana tutorialnya apakah berhasil atau belum. Apabila belum tampil di cek lagi tutorialnya sudah benar atau belum. Apabila sudah benar tetapi tidak tampil bisa komen di bawah komentar ya . Nanti admin pasti ngebantu sampai berhasil.

BAHASTUTORIAL.COM
BAHASTUTORIAL.COM Selamat Datang Di Situs Bahastutorial.com Di Situs Ini Anda Akan Mendapatkan Tutorial Yang Sangat Bermanfaat Dan Jangan Lupa Untuk Share Tutorial Ini Ke Media Sosial Kalian.

Post a Comment for "Cara Menambahkan Whatsapp Ke Blog Menjadi Contact Form"