Membuat Halaman Kontak Blogger Menggunakan Telegram Pribadi

Membuat halaman kontak Blogger memang gampang-gampang susah. Ada banyak alternatif yang dapat digunakan untuk menyampaikan pesan dari halaman kontak kepada admin blogger. Namun, banyak alternatif tersebut memiliki limitasi atau fitur yang tidak diperlukan, karena pada dasarnya hanya ingin menyampaikan pesan dari halaman kontak kepada admin blogger.

Saya telah mencari banyak alternatif untuk mengirimkan pesan dari halaman kontak ke admin blogger, namun tidak ada yang cocok. Akhirnya muncul dengan ide yang sangat simpel, yaitu menggunakan Telegram. Namun, untuk menggunakan Telegram, perlu menguasai konfigurasinya.

Untuk memudahkan para blogger, saya membuat kode yang dapat digunakan dengan mudah. Kode ini akan mengirimkan pesan dari halaman kontak ke Telegram.

Anda bisa membaca halaman Cara Membuat Halaman Kontak di Blogger Menggunakan Telegram

Namun ada cara yang dapat menggunakan akun telegram pribadi dengan cara beikut:

1. Membuat Bot Telegram

Anda bisa membuat bot telegram melalui BotFather.

Klik tombol start kemudian pilih /newbot, kemudian buat nama bot, lalu buat username bot, bisa dilihat pada gambar berikut:

Jika sudah berhasil, maka akan terlihat balasan seperti ini berserta token yang akan digunakan untuk mengirim pesan telegram.

2. Membuat formulir kontak blogger

Pada bagian ini anda harus membuat formulir kontak dengan kode berikut

<p>Silakan menghubungi kami melalui contact form berikut ini.</p>
<div class="row">
  <div class="col-6">
    <div class="mb-3">
      <label class="form-label">Name</label>
      <input class="form-control" id="full_name" required="" type="text" />
    </div>
  </div>
  <div class="col-6">
    <div class="mb-3">
      <label class="form-label">Email/Phone</label>
      <input class="form-control" id="contact-user" placeholder="name@example.com/08123456789" type="text" />
    </div>
  </div>
  <div class="col-12">
    <div class="mb-3">
      <label class="form-label">Message</label>
      <textarea class="form-control" id="message" rows="3"></textarea>
    </div>
  </div>
  <div class="col-md-6">
    <button class="btn btn-primary" id="send-form" onclick="sendContact()">Send</button>
  </div>
  <div class="col-md-6">
    <p id="status-message"></p>
  </div>
</div>
<script>
  function sendContact(){
    event.preventDefault();
    var token = '#####';';
    var id_telegram = '#####';
	var full_name = document.getElementById("full_name").value;
    var contact_user = document.getElementById("contact-user").value;
    var message = document.getElementById("message").value;
    var text = `Name: ${full_name}\nContact: ${contact_user}\nMessage:\n` + message;
    var params = `chat_id=${id_telegram}&text=${text}`;
    
    if(full_name != '' && contact_user != '' && message != ''){
      document.getElementById("send-form").textContent = 'Loading...';
      document.getElementById("send-form").disabled = true;
      var http = new XMLHttpRequest();
      var url = `https://api.telegram.org/bot${token}/sendMessage`;
      http.open('POST', url, true);

      //Send the proper header information along with the request
      http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

      http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.status == 200) {
          document.getElementById("status-message").innerHTML = "Message has been sent";
          document.getElementById("full_name").value = document.getElementById("contact-user").value = document.getElementById("message").value = "";
          document.getElementById("send-form").textContent = 'Send';
          document.getElementById("send-form").disabled = false;
        }else{
          document.getElementById("status-message").innerHTML = "Ada kesalahan pada pengiriman pesan";
        }
      }
      http.send(params);
    }else{
      document.getElementById("status-message").innerHTML = "Semua kolom isian wajib diisi";
    }
  }
</script>

Lihat pada bagian ##### ganti dengan token dan id telegram penerima milik anda.

Cukup mudah ya membuat halaman kontak blogger menggunakan telegram, ngga perlu lagi pusing mikirin server karena dalam hal ini langsung mengirim ke telegram yang kemungkinan servernya akan selalu online.

Jika ada hal lain atau masih bingung cara membuatnya, silakan bertanya dikolom komentar atau bisa menghubungi halaman kontak.

Terima kasih telah berkunjung dan mengikuti tutorial ini, semoga bermanfaat 😊