Bagaimana cara kirim form website ke bot telegram dengan menggunakan javascript? Baik pada kesempatan kali ini saya akan mencoba memberikan tutorialnya yang sangat mudah untuk dimengerti bagi pemula.
Namun sebelumnya apakah kalian tau form website itu apa? Form website merupakan bagian dari suatu website yang berfungsi untuk mengirim formulir berupa text, angka, file, hingga video kepada. Nah untuk mengirimnya ini ada beberapa cara yaitu, biasanya menggunakan email. Sedangkan kali ini saya akan menggunakan bot telegram untuk tujuan formnya.
Biasanya form pada website berguna untuk mengirim saran, kritik, dan pertanyaan kepada admin website atau sebuah instansi. Dengan adanya form pada saat ini, kita berharap agar seseorang menulis pesan dalam website dan terkirim ke bot telegram yang telah kita buat.
Alat Yang Dibutuhkan
Beberapa alat yang akan membantu anda untuk kirim form website adalah Code Editor, akun Telegram, dan tentunya kita butuh jaringan internet atau paket data. Sedangkan bahasa pemrograman yang kita gunakan adalah Javascript. Jika anda menggunakan bahasa pemrograman lain mungkin bisa menyesuaikan, karna alurnya sama saja.
Namun sebelumnya pastikan anda sudah mendaftarkan akun telegram anda dan sudah membuat bot nya. Apabila belum membuat bot telegram, ketik @botfather (yang sudah verifikasi centang biru) pada kolom pencarian. Lalu klik new bot dan ikuti arahannya.
*Setelah membuatnya anda akan otomatis mendapatkan token untuk akses API nantinya.
Cara Kirim Form Website Ke Telegram
Setelah semua selesai, kini saatnya untuk membuat struktur website sederhana. Dan tidak lupa dengan menambahkan tag link style dan tag source script. Namun pada kali ini saya hanya berfokus pada html dan javascriptnya.
Berikut langkah-langkahnya:
Buat Form
Form berguna sebagai tempat menulis pesan pada website anda. Pada kesempatan kali ini saya hanya membuat form sederhana tanpa bantuan css. Namun jika ingin custom silahkan sesuai selera. Asalkan tag, name, type, dan id harus sama agar nanti tidak kebingungan.
<body>
<form action="">
<label for="nama">Nama</label>
<input type="text" name="nama" id="nama">
<br>
<label for="pesan">Pesan</label>
<textarea name="pesan" id="pesan" cols="30" rows="10"></textarea>
<button type="submit">Kirim</button>
</form>
</body>Buat API
Anda harus mengakses halaman t-bot-r.netlify.app. Lalu masukan token yang anda dapatkan sebelumnya ketika membuat bot. Anda akan diarahkan ke halaman informasi bot dan JSON.
Untuk mendapat chat id, pertama-tama anda harus mencoba mengirim pesan (random juga boleh) dari akun telegram langsung. Nanti kamu akan melihat chat.id pada JSON dibawah API Information dan Send Message. Lalu copy chat id tersebut.
Setelah mendapat chat id, alangkah baiknya untuk tes terlebih dahulu pada bagian send message. Untuk memastikan apakah Token API dan Chat id yang anda dapatkan sudah benar atau belum.
Konfigurasi Fetch API
Langkah untuk kirim form website yang terakhir adalah membuat Fetch. Anda membuat method fetch javascript untuk mengirim pesan di form website ke bot telegram yang telah anda buat. Pada code dibawah ini, kamu cukup mengganti api dan chat_id sendiri.
Template pesan yang saya buat di bawah ini bisa anda custom sesuai selera. Namun berhati-hatilah agar nama variable pada template literalsnya (dollar) tidak beda dengan yang atas.
<script>
const nama = document.querySelector('form input#nama')
const pesan = document.querySelector('form textarea#pesan')
const btn = document.querySelector('form')
const api = "6014479556:AAGgW5LTG5coBnAMCHwE7im0hfyMu2xis3U"
const chat_id = "5960545377"
btn.addEventListener('submit' , e => {
const send = fetch(`https://api.telegram.org/bot${api}/sendMessage?chat_id=${chat_id}&text=Nama :%0A${nama.value} %0A%0APesan : %0A${pesan.value}`,
{ method: "POST" }
)
})
</script>Berikut hasilnya:
Perlu anda ingat bahwasanya pesan ini hanya untuk 1 arah saja. Anda tidak dapat membalas pesan yang telah dikirim. Untuk referensi tutorialnya anda bisa kunjungi di Youtube.
Demikian tutorial yang kami berikan tentang cara kirim form website ke telegram dengan menggunakan javascript. Apabila bermanfaat bisa anda bagikan kepada orang lain. Untuk tutorial coding lain bisa anda dapatkan pada arsip coding.