Member Area

Pendaftaran Webinar Sepi? Tingkatkan Konversi dengan Live Certificate Previewer!

📌 Apa itu Live Certificate Name Synchronizer?

Live Certificate Name Synchronizer adalah fitur visual pemicu psikologis konversi (conversion booster) di mana nama calon peserta yang sedang diketik pada kolom formulir pendaftaran langsung tercetak dan teranimasi secara realtime di atas gambar mockup sertifikat resmi.

📖
Skenario Masalah Nyata

Calon peserta pelatihan sering ragu apakah mereka akan benar-benar mendapatkan sertifikat yang kredibel. Dengan melihat nama mereka sendiri langsung terpasang di atas desain sertifikat eksklusif saat mengisi form, tingkat keraguan hilang dan konversi pengiriman pendaftaran meningkat tajam.

✨ Keunggulan Fitur

  • Realtime Two-Way Typing Feedback: Sinkronisasi instan per huruf tanpa jeda (zero lag).
  • Tampilan Kartu Sertifikat Elegan: Efek border emas bronze mewah dengan lencana terverifikasi.
  • Kompatibel dengan Elementor Form: Dapat disambungkan ke widget Form Elementor Pro maupun form standar.

💻 Kode Sumber Lengkap (HTML + CSS + JS)

<!-- MOCKUP SERTIFIKAT DENGAN NAMA DINAMIS -->
<div class="luxee-cert-wrapper">
  <div class="luxee-cert-card">
    <div class="cert-header">SERTIFIKAT PENGHARGAAN</div>
    <div class="cert-sub">Diberikan secara resmi kepada:</div>
    <div class="cert-name" id="cert-live-name">Nama Lengkap Anda</div>
    <div class="cert-desc">Atas partisipasi aktif dalam pelaksanaan program pelatihan komprehensif.</div>
    <div class="cert-badge">VERIFIED CERTIFICATE</div>
  </div>
</div>

<style>
.luxee-cert-wrapper {
  perspective: 1000px;
  margin: 20px 0;
}
.luxee-cert-card {
  background: linear-gradient(135deg, #19221C 0%, #121814 100%);
  border: 2px solid #C29B64;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(194, 155, 100, 0.1);
  position: relative;
}
.cert-header {
  font-family: 'Cinzel', serif, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: #C29B64;
  font-weight: 700;
}
.cert-sub {
  font-size: 0.8rem;
  color: #8E8A80;
  margin-top: 6px;
}
.cert-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #F4F1EA;
  margin: 16px 0;
  border-bottom: 1px dashed rgba(194, 155, 100, 0.4);
  display: inline-block;
  padding: 0 20px 4px 20px;
  min-height: 38px;
  transition: all 0.2s ease;
}
.cert-desc {
  font-size: 0.85rem;
  color: #C4C0B5;
  max-width: 420px;
  margin: 0 auto;
}
.cert-badge {
  display: inline-block;
  margin-top: 18px;
  background: rgba(194, 155, 100, 0.15);
  border: 1px solid #C29B64;
  color: #D4AF37;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 1px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Hubungkan ke input nama di formulir Elementor
  const nameInput = document.querySelector('input[type="text"][name*="nama"], input#form-field-name, input#peserta_nama');
  const certDisplay = document.getElementById('cert-live-name');

  if (nameInput && certDisplay) {
    nameInput.addEventListener('input', function() {
      const val = this.value.trim();
      certDisplay.innerText = val.length > 0 ? val : 'Nama Lengkap Anda';
    });
  }
});
</script>

🔗 Modul Panduan Terkait

Langkah berikutnya dalam kustomisasi script:

💡 Pertanyaan Sering Ditanya (FAQ)

Pastikan field nama pada formulir Anda memiliki atribut ID peserta_nama atau atribut name yang mengandung kata nama. Buka tab Content → Form Fields → Nama Peserta → Advanced → ID di Elementor.

Bisa. Pada blok CSS .luxee-cert-card, ubah nilai background menjadi #FFFFFF dan ubah .cert-name menjadi warna gelap seperti #1E293B.

Mockup ini berfungsi sebagai live interactive preview di landing page pendaftaran. Untuk penerbitan sertifikat resmi PDF pasca acara, panitia dapat menggunakan generator sertifikat email otomatis.

*Terakhir diperbarui: 24-Agustus-2026*