Script HTML Undangan Online Simpel, Menarik dan Lebih Interaktif

Nusantara Mails – Script template undangan yang sederhana namun elegan. Template ini cocok untuk berbagai jenis acara, seperti pernikahan, ulang tahun, atau acara formal lainnya.

Desainnya responsif, sehingga dapat tampil dengan baik di perangkat desktop maupun mobile.

Script Template Undangan

<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Undangan Acara</title>
<style>
body {
font-family: ‘Arial’, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: white;
padding: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
text-align: center;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 10px 10px 0 0;
}
header h1 {
margin: 0;
font-size: 36px;
}
header p {
margin-top: 5px;
font-size: 18px;
}
.content {
margin-top: 30px;
}
.content h2 {
color: #333;
font-size: 28px;
}
.content p {
font-size: 18px;
line-height: 1.6;
color: #666;
}
.date-time {
margin: 20px 0;
background-color: #f1f1f1;
padding: 15px;
border-radius: 8px;
}
.date-time h3 {
font-size: 20px;
color: #4CAF50;
}
.date-time p {
font-size: 18px;
}
.cta {
margin-top: 30px;
}
.cta a {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 15px 30px;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
}
.cta a:hover {
background-color: #45a049;
}
footer {
margin-top: 40px;
font-size: 14px;
color: #888;
}
</style>
</head>
<body>

<div class=”container”>
<header>
<h1>Undangan Acara</h1>
<p>Dengan hormat, kami mengundang Anda untuk hadir dalam acara istimewa kami.</p>
</header>

<div class=”content”>
<h2>Detail Acara</h2>
<p>Acara ini akan diadakan untuk merayakan momen yang sangat berarti bagi kami. Kami berharap kehadiran Anda untuk turut serta dalam acara spesial ini.</p>

<div class=”date-time”>
<h3>Waktu dan Tempat:</h3>
<p><strong>Tanggal:</strong> 15 Januari 2025</p>
<p><strong>Waktu:</strong> 10:00 – 14:00 WIB</p>
<p><strong>Tempat:</strong> Gedung Serba Guna, Desa Sejahtera</p>
</div>

<div class=”cta”>
<a href=”mailto:undangan@acara.com”>Konfirmasi Kehadiran</a>
</div>
</div>

<footer>
<p>Terima kasih atas perhatian Anda. Kami sangat berharap dapat bertemu dengan Anda di acara ini.</p>
<p>&copy; 2025 Acara Undangan. Semua hak cipta dilindungi.</p>
</footer>
</div>

</body>
</html>

(Silahkan anda copy script diatas untuk digunakan membuat undangan online) 

Keterangan:

1. Header:
   • Menampilkan nama acara dengan desain yang mencolok menggunakan warna hijau yang menonjol, dan deskripsi singkat mengenai acara.
2. Content:
   • Bagian utama yang memuat detail acara, termasuk tanggal, waktu, dan lokasi acara. Ini juga dilengkapi dengan teks yang memberikan informasi tambahan tentang acara.
3. Date & Time Section:
   • Menampilkan informasi mengenai waktu dan tempat acara yang diatur dalam bagian terpisah untuk meningkatkan visibilitas.
4. CTA (Call to Action):
   • Menggunakan tombol dengan teks “Konfirmasi Kehadiran” yang terhubung dengan email untuk memberikan kemudahan bagi undangan untuk mengonfirmasi kehadirannya.
5. Footer:
   • Memberikan ucapan terima kasih dan informasi tambahan seperti hak cipta.

Fitur Responsif:

• Template ini dirancang dengan menggunakan desain yang responsif, memanfaatkan max-width pada container utama, sehingga desain dapat menyesuaikan dengan berbagai ukuran layar baik di desktop maupun perangkat mobile.

Template ini bisa disesuaikan lebih lanjut dengan menambahkan gambar, logo, atau elemen desain lainnya untuk membuat undangan lebih personal dan sesuai dengan tema acara.

Anda juga bisa menambahkan fitur RSVP online atau menambahkan media sosial untuk undangan digital lebih interaktif.