Part 4: Cara Membuat Tombol RSVP dan Lokasi Google Maps di Web Undangan Pernikahan Online
Pada Part 3, kita sudah menambahkan foto pasangan dan detail acara ke halaman undangan. Sekarang di Part 4, kita akan membuat undangan semakin interaktif dengan menambahkan tombol RSVP dan tombol Lokasi Google Maps.
Apa yang Akan Dibuat?
- Tombol RSVP yang membuka form konfirmasi kehadiran sederhana.
- Tombol Lokasi yang langsung membuka Google Maps lokasi acara.
- JavaScript sederhana untuk menampilkan popup RSVP.
Langkah 1: Tambahkan CSS untuk Tombol
Buka file index.html dari Part 3. Cari bagian <style> lalu tambahkan kode berikut:
/* Tombol Interaktif */
button {
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.btn-rsvp {
background: #ff7eb3;
color: white;
}
.btn-rsvp:hover {
background: #e75480;
}
.btn-maps {
background: #4caf50;
color: white;
}
.btn-maps:hover {
background: #388e3c;
}
/* Popup RSVP */
#popup {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
justify-content: center; align-items: center;
}
#popup .box {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
text-align: center;
}
Langkah 2: Tambahkan Tombol di HTML
Cari bagian <div class="detail-acara">, lalu tambahkan tombol berikut setelah detail acara:
<!-- Tombol RSVP dan Maps -->
<button class="btn-rsvp" onclick="showPopup()">Konfirmasi Kehadiran</button>
<button class="btn-maps" onclick="openMaps()">Lihat Lokasi</button>
<!-- Popup RSVP -->
<div id="popup">
<div class="box">
<h3>Konfirmasi Kehadiran</h3>
<p>Apakah Anda akan hadir di acara pernikahan Andi & Siti?</p>
<button onclick="closePopup()">Ya, Saya Hadir</button>
<button onclick="closePopup()">Tidak Bisa Hadir</button>
</div>
</div>
Langkah 3: Tambahkan JavaScript
Sebelum tag </body>, tambahkan script berikut:
<script>
function showPopup() {
document.getElementById("popup").style.display = "flex";
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
function openMaps() {
window.open("https://goo.gl/maps/xYz123ContohLokasi", "_blank");
}
</script>
Hasil Akhir
Simpan file lalu buka di browser. Sekarang undangan kamu sudah memiliki tombol interaktif RSVP dan tombol lokasi Google Maps.
Kesimpulan
Pada Part 4 ini, kita belajar menambahkan tombol RSVP dengan popup sederhana serta link lokasi ke Google Maps. Di Part 5, kita akan membuat musik background otomatis agar undangan terasa lebih hidup dan romantis 🎶.