klik untuk menyalin
👇
<style>
body {
font-family: "Roboto", sans-serif;
background: #f2f3f7;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
form {
width: 100%;
max-width: 420px;
background: #fff;
border-radius: 16px;
padding: 22px 26px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
form h3 {
text-align: center;
color: #1976d2;
margin-bottom: 20px;
}
label {
display: block;
margin-top: 10px;
font-weight: 500;
color: #555;
}
input, textarea, select {
width: 100%;
border: 1px solid #ccc;
border-radius: 6px;
padding: 10px;
margin-top: 5px;
font-size: 15px;
background: #fafafa;
transition: border 0.3s;
}
input:focus, textarea:focus, select:focus {
border-color: #1976d2;
outline: none;
background: #fff;
}
button {
width: 100%;
background: #1976d2;
color: white;
border: none;
padding: 12px;
margin-top: 20px;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
button:hover { background: #1259a8; }
#loading {
display: none;
text-align: center;
color: #1976d2;
margin-top: 10px;
font-size: 14px;
}
</style>
<form id="formJasa">
<h3>🛠️ Form Pemesanan Jasa</h3>
<label>Nama Lengkap</label>
<input type="text" id="nama" required>
<label>Alamat Lengkap</label>
<textarea id="alamat" required></textarea>
<label>No HP Aktif</label>
<input type="tel" id="hp" required>
<label>Barang yang Rusak</label>
<input type="text" id="barang" required>
<label>Keluhan</label>
<textarea id="keluhan" required></textarea>
<label>Upload Foto Barang (opsional)</label>
<input type="file" id="foto" accept="image/*">
<label>Jadwal Kunjungan</label>
<input type="datetime-local" id="jadwal" required>
<label>Metode Pembayaran</label>
<select id="metode" required>
<option value="">Pilih Metode</option>
<option>Bank Transfer</option>
<option>QRIS</option>
<option>Bayar di Tempat</option>
</select>
<button type="submit">Kirim Pesanan</button>
<div id="loading">⏳ Mengirim ke Telegram...</div>
</form>
<script>
const BOT_TOKEN = "GANTI_DENGAN_TOKEN_BOT";
const CHAT_ID = "GANTI_DENGAN_CHAT_ID";
document.getElementById("formJasa").addEventListener("submit", async function(e){
e.preventDefault();
const btn = e.target.querySelector("button");
const loading = document.getElementById("loading");
btn.disabled = true;
loading.style.display = "block";
const nama = document.getElementById("nama").value;
const alamat = document.getElementById("alamat").value;
const hp = document.getElementById("hp").value;
const barang = document.getElementById("barang").value;
const keluhan = document.getElementById("keluhan").value;
const jadwal = document.getElementById("jadwal").value;
const metode = document.getElementById("metode").value;
const foto = document.getElementById("foto").files[0];
const pesan = `
🧾 *Pesanan Jasa Baru!*
👤 Nama: ${nama}
🏠 Alamat: ${alamat}
📞 HP: ${hp}
🔧 Barang: ${barang}
💬 Keluhan: ${keluhan}
🗓️ Jadwal: ${jadwal}
💰 Metode: ${metode}
`;
try {
// kirim pesan teks
await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage?chat_id=${CHAT_ID}&parse_mode=Markdown&text=${encodeURIComponent(pesan)}`);
// kirim foto jika ada
if (foto) {
const fd = new FormData();
fd.append("chat_id", CHAT_ID);
fd.append("photo", foto);
fd.append("caption", `📸 Foto barang dari ${nama}`);
await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendPhoto`, { method: "POST", body: fd });
}
alert("✅ Pesanan berhasil dikirim ke Telegram!");
e.target.reset();
} catch (err) {
alert("❌ Gagal mengirim! Coba periksa koneksi atau token bot.");
console.error(err);
} finally {
btn.disabled = false;
loading.style.display = "none";
}
});
</script>
Komentar untuk Script pesan jasa via telegram