Cara Membuat Halaman Kontak di Blogger Menggunakan Telegram

Intro

Hallo, membuat formulir kontak di blogger memang gampang gampang susah, banyak sekali alternatif yang dapat digunakan untuk menyampaikan pesan dari halaman kontak kepada admin blogger, ini merupakan kegelisahan admin mas2it yang telah mencari banyak sekali alternatif namun banyak sekali limit ataupun fitur yang tidak digunakan, karena pada dasarnya hanya ingin menyampaikan pesan dari halaman kontak kepada admin blogger.

Muncul suatu ide yang sangat simpel yaitu menggunakan telegram, namun perlu menguasai untuk konfigurasinya. Jangan khawatir karena mas2it juga ingin berkontribusi mendukung para blogger, dengan ide sederhana ini maka dibuat sebuah kode yang dapat digunakan dengan mudah. Gambar dibawah ini menjelaskan alur pengiriman pesan dari halaman kontak yang dikirim ke telegram user anda.

Berikut ini langkah-langkah pendaftaran user telegram anda dan cara menggunakannya:

• Hal pertama yang perlu anda lakukan adalah memiiliki akun telegram
• Kemudian daftarkan telegram anda ke bot telegram mas2it disini
• Klik /start kemudian kirim pesan /register_contact atau bisa dari menu bot

• Anda akan mendapatkan apikey yang dapat digunakan untuk mengirim pesan dari halaman kontak ke telegram anda. apikey setiap user berbeda-beda.

• Gunakan apikey didalam kode berikut ini:

<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/Telegram</label>
      <input class="form-control" id="contact-user" placeholder="name@example.com/08123456789/@username" type="email" />
    </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>
<br />
<p>created by <a href="https://www.masmasit.com" id="mas2it-key">https://www.masmasit.com</a></p>
<script>
  function sendContact(){
    event.preventDefault();
    var apikey = 'apikey';
	var full_name = document.getElementById("full_name").value;
    var contact_user = document.getElementById("contact-user").value;
    var message = document.getElementById("message").value;
    var mas2it_key = document.getElementById("mas2it-key").textContent;
    
    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://tools.masmasit.com/telegram/send/contact/form';
      var params = `key=${mas2it_key}&apikey=${apikey}&full_name=${full_name}&contact_user=${contact_user}&message=${message}`;
      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.readyState == 4 && http.status == 200) {
          if(http.responseText == 'ok'){
            document.getElementById("status-message").innerHTML = "Message has been sent";
            document.getElementById("full_name").value = document.getElementById("contact-user").value = document.getElementById("message").value = "";
          }else{
            document.getElementById("status-message").innerHTML = "Ada kesalahan pada pengiriman pesan";
          }
          document.getElementById("send-form").textContent = 'Send';
          document.getElementById("send-form").disabled = false;
        }
      }
      http.send(params);
    }else{
      document.getElementById("status-message").innerHTML = "Semua kolom isian wajib diisi";
    }
  }
</script>

• Buat halaman baru di blogger atau edit halaman contact anda jika sudah ada kemudian Salin dan Paste kode diatas di bagian HTML view.
• Ganti apikey dengan apikey yang anda dapatkan dari telegram bot mas2it.
• Jika anda telah berhasil menerapkannya, cobalah untuk mengirim pesan dari halaman kontak

Jika pesan anda berhasil terkirim maka akan mendapatkan response Message has been sent pada bagian kanan bawah formulir kontak, dan anda akan menerima pesan masuk di telegram dari bot telegram mas2it

Conclusion

Mengirim pesan dari halaman kontak adalah hal yang lumayan penting agar pengunjung tidak repot jika ingin menghubungi admin blogger, dengan memanfaatkan telegram sebagai media untuk menerima pesan yang dikirim akan sangat memudakan apalagi telegramnya juga aktif digunakan. semoga tutorial ini dapat dimanfaatkan sebaik mungkin oleh para blogger. Jangan khawatir dengan server yang digunakan karena mas2it akan mengelolanya dengan baik.

Jika ada kesulitan dalam penggunaannya atau ada pertanyaan silakan tanyakan pada kolom komentar dibawah ini.

Terima Kasih.