Referensi template

Template adalah satu file HTML dengan placeholder Mustache. Daftar di halaman ini dibuat langsung dari kode validator, jadi selalu sama dengan yang diperiksa saat diunggah.

Unduh starter template

Starter memakai semua blok dan ketujuh partial dengan CSS dasar. Ubah sesukamu, lalu unggah.

Dasar Mustache

{{bride.full_name}} mencetak teks. Semua teks di-escape otomatis.
{{#akad}}...{{/akad}} hanya dirender bila sesi akad ada. Di dalamnya, field sesi bisa ditulis langsung: {{date_long}}.
{{#gifts}}...{{/gifts}} mengulang isi untuk setiap item list.
{{^has_gallery}}...{{/has_gallery}} dirender bila nilainya kosong atau tidak.
Section hanya boleh pada field berjenis objek, list, atau ya/tidak. Section pada field teks ditolak.
Template wajib berisi <html dan </body>, berupa UTF-8, maksimal 2 MB. Inline <script> dan <style> diizinkan.

Field baku

Field di dalam list ditulis dengan nama list-nya, misalnya gifts.bank_name; di template tulis {{bank_name}} di dalam {{#gifts}}. Contoh nilai berasal dari data contoh yang dipakai pratinjau.

Path	Jenis	Contoh nilai
`akad`	objek
`akad.address`	teks	Jl. Tamansari No. 73, Bandung
`akad.calendar_url`	teks	https://calendar.google.com/calendar/render?action=TEMPLATE…
`akad.date`	teks	2026-12-23
`akad.date_iso`	teks	2026-12-23
`akad.date_long`	teks	Rabu, 23 Desember 2026
`akad.datetime_iso`	teks	2026-12-23T08:00:00+07:00
`akad.dress_code`	teks	Batik atau kebaya
`akad.lat`	teks	-6.8869
`akad.lng`	teks	107.6105
`akad.maps_url`	teks	https://maps.app.goo.gl/contoh
`akad.note`	teks
`akad.time_end`	teks	10:00:00
`akad.time_range`	teks	08.00 - 10.00 WIB
`akad.time_start`	teks	08:00:00
`akad.timezone`	teks	WIB
`akad.title`	teks	Akad Nikah
`akad.venue_name`	teks	Masjid Salman ITB
`bride`	objek
`bride.child_order`	teks	Putri pertama
`bride.father_deceased`	ya/tidak	false
`bride.father_name`	teks	Ahmad Suryadi
`bride.full_name`	teks	Rani Puspitasari
`bride.guardian`	teks
`bride.instagram`	teks	rani
`bride.mother_deceased`	ya/tidak	false
`bride.mother_name`	teks	Siti Aminah
`bride.nickname`	teks	Rani
`bride.parents_line`	teks	Bapak Ahmad Suryadi & Ibu Siti Aminah
`bride.photo_url`	teks	https://purwarupa.freeundangan.id/static/demo/mempelai-wani…
`closing_text`	teks	Merupakan suatu kehormatan dan kebahagiaan bagi kami apabil…
`countdown_label`	teks	Rabu, 23 Desember 2026
`countdown_target`	teks	2026-12-23T11:00:00+07:00
`couple_order`	teks	bride_first
`couple_short`	teks	Rani & Budi
`cover_image_url`	teks	https://purwarupa.freeundangan.id/static/demo/sampul.webp
`custom`	objek
`extra_sessions`	list	1 item
`extra_sessions.address`	teks	Jl. Tamansari No. 73, Bandung
`extra_sessions.calendar_url`	teks	https://calendar.google.com/calendar/render?action=TEMPLATE…
`extra_sessions.date`	teks	2026-12-30
`extra_sessions.date_iso`	teks	2026-12-30
`extra_sessions.date_long`	teks	Rabu, 30 Desember 2026
`extra_sessions.datetime_iso`	teks	2026-12-30T10:00:00+07:00
`extra_sessions.dress_code`	teks	Batik atau kebaya
`extra_sessions.lat`	teks	-6.8869
`extra_sessions.lng`	teks	107.6105
`extra_sessions.maps_url`	teks	https://maps.app.goo.gl/contoh
`extra_sessions.note`	teks
`extra_sessions.time_end`	teks	13:00:00
`extra_sessions.time_range`	teks	10.00 - 13.00 WIB
`extra_sessions.time_start`	teks	10:00:00
`extra_sessions.timezone`	teks	WIB
`extra_sessions.title`	teks	Ngunduh Mantu
`extra_sessions.venue_name`	teks	Kediaman Keluarga Santoso
`first`	objek
`first.child_order`	teks	Putri pertama
`first.father_deceased`	ya/tidak	false
`first.father_name`	teks	Ahmad Suryadi
`first.full_name`	teks	Rani Puspitasari
`first.guardian`	teks
`first.instagram`	teks	rani
`first.mother_deceased`	ya/tidak	false
`first.mother_name`	teks	Siti Aminah
`first.nickname`	teks	Rani
`first.parents_line`	teks	Bapak Ahmad Suryadi & Ibu Siti Aminah
`first.photo_url`	teks	https://purwarupa.freeundangan.id/static/demo/mempelai-wani…
`gallery`	list	4 item
`gallery.url`	teks	https://purwarupa.freeundangan.id/static/demo/galeri-1.webp
`gift_address`	teks	Jl. Cisitu Indah No. 12, Bandung 40135
`gifts`	list	2 item
`gifts.account_holder`	teks	Rani Puspitasari
`gifts.account_number`	teks	1234567890
`gifts.bank_name`	teks	BCA
`groom`	objek
`groom.child_order`	teks	Putra kedua
`groom.father_deceased`	ya/tidak	false
`groom.father_name`	teks	Hadi Santoso
`groom.full_name`	teks	Budi Santoso
`groom.guardian`	teks
`groom.instagram`	teks	budi
`groom.mother_deceased`	ya/tidak	false
`groom.mother_name`	teks	Ratna Dewi
`groom.nickname`	teks	Budi
`groom.parents_line`	teks	Bapak Hadi Santoso & Ibu Ratna Dewi
`groom.photo_url`	teks	https://purwarupa.freeundangan.id/static/demo/mempelai-pria…
`guest_fallback_text`	teks	Tamu Undangan
`has_akad`	ya/tidak	true
`has_extra_sessions`	ya/tidak	true
`has_gallery`	ya/tidak	true
`has_gifts`	ya/tidak	true
`has_love_story`	ya/tidak	true
`has_music`	ya/tidak	true
`has_resepsi`	ya/tidak	true
`has_video`	ya/tidak	true
`hashtag`	teks	#RaniBudiBerbagiCerita
`love_story`	list	3 item
`love_story.date`	teks	Agustus 2019
`love_story.text`	teks	Kami bertemu di sebuah kegiatan kampus dan ternyata satu an…
`love_story.title`	teks	Pertama bertemu
`music_id`	teks	contoh
`music_url`	teks	https://files.example.com/music/contoh.mp3
`opening_text`	teks	Dengan memohon rahmat Tuhan Yang Maha Esa, kami bermaksud m…
`quote`	teks	Dan di antara tanda-tanda kebesaran-Nya ialah Dia menciptak…
`quote_source`	teks	QS Ar-Rum: 21
`resepsi`	objek
`resepsi.address`	teks	Jl. Tamansari No. 73, Bandung
`resepsi.calendar_url`	teks	https://calendar.google.com/calendar/render?action=TEMPLATE…
`resepsi.date`	teks	2026-12-23
`resepsi.date_iso`	teks	2026-12-23
`resepsi.date_long`	teks	Rabu, 23 Desember 2026
`resepsi.datetime_iso`	teks	2026-12-23T11:00:00+07:00
`resepsi.dress_code`	teks	Batik atau kebaya
`resepsi.lat`	teks	-6.8869
`resepsi.lng`	teks	107.6105
`resepsi.maps_url`	teks	https://maps.app.goo.gl/contoh
`resepsi.note`	teks
`resepsi.time_end`	teks
`resepsi.time_range`	teks	11.00 WIB - selesai
`resepsi.time_start`	teks	11:00:00
`resepsi.timezone`	teks	WIB
`resepsi.title`	teks	Resepsi
`resepsi.venue_name`	teks	Gedung Sabuga
`second`	objek
`second.child_order`	teks	Putra kedua
`second.father_deceased`	ya/tidak	false
`second.father_name`	teks	Hadi Santoso
`second.full_name`	teks	Budi Santoso
`second.guardian`	teks
`second.instagram`	teks	budi
`second.mother_deceased`	ya/tidak	false
`second.mother_name`	teks	Ratna Dewi
`second.nickname`	teks	Budi
`second.parents_line`	teks	Bapak Hadi Santoso & Ibu Ratna Dewi
`second.photo_url`	teks	https://purwarupa.freeundangan.id/static/demo/mempelai-pria…
`slug`	teks	contoh
`video_embed_url`	teks	https://www.youtube.com/embed/dQw4w9WgXcQ
`video_url`	teks	https://www.youtube.com/watch?v=dQw4w9WgXcQ

Partial SDK

Partial menyisipkan markup interaktif yang dihidupkan SDK. Partial tidak membawa CSS; semua tampilan diatur template-mu. Partial lain selain tujuh ini ditolak, dan setiap partial boleh dipakai lebih dari sekali.

`{{> open_button}}`

Tanpa data-state. Setelah diklik, <html> mendapat class fu-opened.

<button type="button" class="fu-open">Buka Undangan</button>

`{{> guest_name}}`

data-state: pending, resolved, fallback

<span class="fu-guest-name" data-state="pending" aria-busy="true">{{guest_fallback_text}}</span>

`{{> rsvp_form}}`

data-state: no-token, closed, idle, sending, done, error

<form class="fu-rsvp" data-state="idle" data-closes-at="{{countdown_target}}">
  <p class="fu-rsvp__no-token" hidden>Konfirmasi kehadiran hanya untuk tamu undangan.</p>
  <p class="fu-rsvp__closed" hidden>Konfirmasi kehadiran sudah ditutup.</p>
  <fieldset class="fu-rsvp__attending">
    <legend>Kehadiran</legend>
    <label><input type="radio" name="attending" value="true" required> Hadir</label>
    <label><input type="radio" name="attending" value="false"> Tidak hadir</label>
  </fieldset>
  <label class="fu-rsvp__party-size">Jumlah orang <input type="number" name="party_size" min="1" max="1" value="1" inputmode="numeric"></label>
  <label class="fu-rsvp__message">Ucapan (opsional) <textarea name="message" maxlength="500"></textarea></label>
  <button type="submit" class="fu-rsvp__submit">Kirim</button>
  <p class="fu-rsvp__done" role="status" hidden>Terima kasih, konfirmasi tersimpan.</p>
  <p class="fu-rsvp__error" role="alert" hidden>Gagal mengirim, coba lagi.</p>
</form>

`{{> guestbook}}`

data-state: loading, ready, empty, error

<section class="fu-guestbook" data-state="loading" aria-busy="true">
  <form class="fu-guestbook__form">
    <label class="fu-guestbook__name">Nama <input name="name" maxlength="60" required autocomplete="name"></label>
    <label class="fu-guestbook__message">Ucapan <textarea name="message" maxlength="500" required></textarea></label>
    <button type="submit" class="fu-guestbook__submit">Kirim</button>
    <p class="fu-guestbook__sent" role="status" hidden>Ucapan terkirim.</p>
    <p class="fu-guestbook__error" role="alert" hidden>Gagal mengirim, coba lagi.</p>
  </form>
  <ul class="fu-guestbook__list" aria-label="Ucapan"></ul>
  <template class="fu-guestbook__item-template">
    <li class="fu-guestbook__item">
      <strong class="fu-guestbook__item-name"></strong>
      <time class="fu-guestbook__item-time"></time>
      <p class="fu-guestbook__item-message"></p>
    </li>
  </template>
  <button type="button" class="fu-guestbook__more" hidden>Muat lagi</button>
  <p class="fu-guestbook__empty" hidden>Belum ada ucapan. Jadilah yang pertama.</p>
</section>

`{{> countdown}}`

data-state: running, past

{{#countdown_target}}<div class="fu-countdown" data-target="{{countdown_target}}" data-state="running" role="timer" aria-label="Menuju {{countdown_label}}">
  <span class="fu-countdown__unit"><span class="fu-countdown__days">0</span> <span class="fu-countdown__label">Hari</span></span>
  <span class="fu-countdown__unit"><span class="fu-countdown__hours">0</span> <span class="fu-countdown__label">Jam</span></span>
  <span class="fu-countdown__unit"><span class="fu-countdown__minutes">0</span> <span class="fu-countdown__label">Menit</span></span>
  <span class="fu-countdown__unit"><span class="fu-countdown__seconds">0</span> <span class="fu-countdown__label">Detik</span></span>
</div>{{/countdown_target}}

`{{> music_player}}`

data-state: paused, playing

{{#has_music}}<button type="button" class="fu-music" data-state="paused" aria-label="Musik latar" aria-pressed="false">
  <span class="fu-music__play" aria-hidden="true"></span>
  <span class="fu-music__pause" aria-hidden="true"></span>
  <audio class="fu-music__audio" src="{{music_url}}" loop preload="none"></audio>
</button>{{/has_music}}

`{{> copy_button}}`

data-state: idle, copied

<button type="button" class="fu-copy" data-copy="{{account_number}}" data-state="idle">
  Salin <span class="fu-copy__done" role="status" hidden>Tersalin</span>
</button>

Menata status

Status partial ada di atribut data-state pada elemen root. Pesan per status disembunyikan SDK dengan atribut hidden, sehingga template yang belum menata status tetap tampil benar. Template yang memakai partial tanpa selector .fu- atau [data-state di CSS mendapat peringatan saat diunggah.

/* Layar pembuka hilang setelah tombol buka diklik */
html.fu-opened .cover { display: none; }

/* Status di elemen root */
.fu-rsvp[data-state="sending"] .fu-rsvp__submit { opacity: .6; }
.fu-copy[data-state="copied"] { background: seagreen; color: white; }
.fu-music[data-state="playing"] .fu-music__play { display: none; }

/* Pesan yang disembunyikan SDK */
[hidden] { display: none !important; }

/* Atau beri animasi masuk dengan menimpa [hidden] */
.fu-rsvp__done { transition: opacity .3s; }
.fu-rsvp__done[hidden] { display: block; opacity: 0; }

Pratinjau template bisa memaksa status no-token, error, empty, dan closed agar setiap tampilan bisa dicek tanpa data sungguhan.

Field custom

Butuh isian yang tidak ada di daftar field baku? Tulis nama satu kata yang belum dipakai, misalnya {{motto}} atau {{custom.motto}}. Saat diunggah, validator mencatatnya sebagai field custom dan kamu diminta mendeklarasikannya: label yang dilihat pasangan, jenis isian (text, textarea, image, atau url), dan nilai bawaan.

Nama yang sama dengan field baku ditolak.
Nama yang mirip field baku, misalnya hastag, mendapat peringatan salah ketik.
Path bertitik yang tidak dikenal, misalnya bride.nam, ditolak dengan saran nama yang benar.
Pasangan mengisi field custom di bagian Custom pada editor. Selama kosong, nilai bawaan yang dipakai.

Aturan aset

Atribut src, href, srcset, dan poster pada img, source, video, audio, link, script, dan iframe hanya boleh mengarah ke alamat berikut. Atribut action pada form juga diperiksa.

https://purwarupa.freeundangan.id/files
https://fonts.googleapis.com
https://fonts.gstatic.com
https://cdnjs.cloudflare.com
https://cdn.jsdelivr.net
https://unpkg.com
https://www.youtube.com
https://www.google.com/maps

URI data: hanya boleh di <img>, maksimal 100 KB. Nilai yang berisi placeholder, misalnya src="{{bride.photo_url}}", dilewati saat diunggah karena diisi dari data undangan. Gambar dekorasi yang lebih besar perlu di-host di salah satu alamat di atas.