Cara Membuat & Memasang Popup Contact Form di Blogger

Q: Wajib pakai widget Contact Form?

Ya. Widget itu bertindak sebagai mesin kirim email. Kita hanya membungkusnya dengan UI popup.

Q: Bagaimana kalau menu saya pakai LinkList?

Beri ID contact-icon pada tautan Hubungi Kami. Jika tidak bisa via GUI, edit HTML template menu dan tambahkan ID pada elemen .

Di panduan ini kamu akan membuat Popup Contact Form yang tampil modern, ringan, dan mengikuti style bawaan Blogger—tanpa plugin. Termasuk cara menaruh tombol Hubungi Kami di menu navigasi dan menghubungkannya dengan widget Contact Form bawaan Blogger.

Kenapa Memakai Popup Contact Form?

Formulir kontak adalah kanal penting untuk kolaborasi, tawaran kerja sama, maupun pertanyaan pembaca. Popup contact form menghadirkan formulir yang hanya muncul saat dibutuhkan, tidak mengganggu layout, dan fokus pada tindakan pengguna. Keuntungannya:

Tampilan modern dan profesional, serasi dengan tema apa pun.
Fokus pengguna—muncul di tengah layar, mudah diisi, dan bisa ditutup cepat.
Ringan karena memanfaatkan widget Contact Form bawaan Blogger (tanpa plugin).
Responsif & ramah mobile.

Persiapan Wajib

Aktifkan widget Contact Form bawaan Blogger
Buka Tata Letak → Tambahkan Gadget → Formulir Kontak. Letakkan di sidebar/footer. Nanti akan kita sembunyikan agar tidak terlihat namun tetap berfungsi sebagai pengirim pesan.
Pastikan tema Blogger modern (layout baru). Hampir semua tema default (Contempo, Emporio, Soho, Notable, Simple baru) aman.

Tips: Setelah ditambahkan, kamu boleh membiarkannya tampil sementara untuk uji, atau langsung disembunyikan via CSS pada langkah selanjutnya.

Cara Pasang Tombol “Hubungi Kami” di Menu Navigasi

Kita akan menambahkan item menu yang memicu popup. Di banyak template, menu berada pada daftar tautan di header. Masuk ke Tata Letak → Menu (atau “Halaman”), tambahkan entri:

Judul: Hubungi Kami
Tautan: # (atau kosong)

Jika kamu mengedit lewat HTML template, cari blok UL menu dan sisipkan ID berikut pada tautan:

<li><a href="javascript:void(0)" id="contact-icon">Hubungi Kami</a></li>

Dengan ID contact-icon, script kita akan mengenali klik dan memunculkan popup.

HTML Popup Contact Form

Letakkan markup ini sebelum tag penutup </body> di template:

<!-- Overlay Popup Contact -->
<div id='contact-popup-overlay'>
  <div class='popup-content'>
    <span class='popup-close' title='Tutup'>&#215;</span>
    <h3>Hubungi Kami</h3>
    <form id='popup-contact-form'>
      <div class='form-group'>
        <input id='popup-name' type='text' placeholder='Nama Anda' required>
      </div>
      <div class='form-group'>
        <input id='popup-email' type='email' placeholder='Email Anda (wajib)' required>
      </div>
      <div class='form-group'>
        <textarea id='popup-message' rows='5' placeholder='Pesan Anda (wajib)' required></textarea>
      </div>
      <div class='form-group'>
        <button class='popup-submit-btn' type='submit'>Kirim Pesan</button>
      </div>
      <div id='contact-popup-status'></div>
    </form>
  </div>
</div>

<!-- Widget ContactForm bawaan Blogger (cukup ada di layout; disembunyikan lewat CSS) -->
<div id='ContactForm1' style='display:none'></div>

CSS Popup (Mengikuti Variabel Blogger)

CSS berikut memanfaatkan variabel warna bawaan tema (fallback disediakan). Letakkan di <head> template (atau di Tema → Sesuaikan → Lanjutan → Tambahkan CSS).

/* Sembunyikan ContactForm bawaan agar tak mengganggu tampilan, tetap berfungsi */
#ContactForm1{position:absolute;left:-9999px;opacity:0;visibility:hidden}

/* Overlay */
#contact-popup-overlay{
  position:fixed;inset:0;width:100%;height:100%;
  background-color:rgba(0,0,0,.6);
  display:none;align-items:flex-start;justify-content:center;
  z-index:10001;backdrop-filter:blur(3px);animation:fadeIn .3s ease
}
/* Card popup */
#contact-popup-overlay .popup-content{
  position:relative;background:var(--card-bg,#fff);
  border-radius:8px;box-shadow:0 5px 20px rgba(0,0,0,.2);
  width:90%;max-width:550px;margin-top:10vh;padding:25px 30px;
  animation:fadeInDown .3s ease-out
}
/* Close */
#contact-popup-overlay .popup-close{
  position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;
  color:#aaa;cursor:pointer;line-height:1;transition:color .2s
}
#contact-popup-overlay .popup-close:hover{color:var(--heading-color,#222)}
/* Heading */
#contact-popup-overlay .popup-content h3{
  margin:0 0 10px;font-size:22px;color:var(--heading-color,#222)
}
/* Form controls */
#contact-popup-overlay .form-group{margin-bottom:15px}
#contact-popup-overlay .form-group input,
#contact-popup-overlay .form-group textarea{
  width:100%;padding:12px;border:1px solid var(--border-color,#ddd);
  border-radius:5px;font:400 15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--text-color,#222);background-color:var(--body-bg,#fff);
  transition:border-color .2s,box-shadow .2s
}
#contact-popup-overlay .form-group input:focus,
#contact-popup-overlay .form-group textarea:focus{
  border-color:var(--accent-color,#2196f3);outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-color,#2196f3) 20%, transparent)
}
/* Button */
#contact-popup-overlay .popup-submit-btn{
  appearance:none;background:var(--accent-color,#2196f3);color:#fff;
  border:0;border-radius:50px;padding:12px 20px;font-weight:500;
  font-size:16px;width:100%;cursor:pointer;transition:background-color .2s
}
#contact-popup-overlay .popup-submit-btn:hover{background:#1976d2}
/* Status */
#contact-popup-overlay #contact-popup-status{
  margin-top:12px;font-size:14px;text-align:center;padding:10px;border-radius:6px;display:none
}
/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}

JavaScript: Integrasi ke Widget ContactForm1

<script>
(function(){
  const $ = (sel,ctx=document) => ctx.querySelector(sel);

  function setupPopup(triggerId, overlayId){
    const trigger = document.getElementById(triggerId);
    const overlay = document.getElementById(overlayId);
    if(!trigger || !overlay) return;

    const closeBtn = overlay.querySelector('.popup-close') || overlay;
    const show = () => overlay.style.display = 'flex';
    const hide = () => overlay.style.display = 'none';

    trigger.addEventListener('click', show);
    closeBtn.addEventListener('click', hide);
    overlay.addEventListener('click', e => { if(e.target === overlay) hide(); });
    document.addEventListener('keydown', e => { if(e.key === 'Escape') hide(); });
  }

  if(document.getElementById('ContactForm1')){
    setupPopup('contact-icon','contact-popup-overlay');
  } else {
    const contactIcon = document.getElementById('contact-icon');
    if(contactIcon) contactIcon.style.display = 'none';
  }

  const popupForm = document.getElementById('popup-contact-form');
  if (popupForm && document.getElementById('ContactForm1')) {
    popupForm.addEventListener('submit', function(e){
      e.preventDefault();
      $('#ContactForm1_contact-form-name').value  = $('#popup-name').value.trim();
      $('#ContactForm1_contact-form-email').value = $('#popup-email').value.trim();
      $('#ContactForm1_contact-form-email-message').value = $('#popup-message').value.trim();
      $('#ContactForm1_contact-form-submit').click();
    });

    const showStatus = (text, type) => {
      const box = document.getElementById('contact-popup-status');
      box.textContent = text; box.style.display = 'block';
      box.style.background = type==='success' ? 'rgba(46,125,50,.08)' : 'rgba(198,40,40,.08)';
      box.style.color = type==='success' ? '#2e7d32' : '#c62828';
      setTimeout(() => { const o=$('#contact-popup-overlay'); if(o) o.style.display='none'; box.style.display='none'; }, 3500);
    };

    const observe = (node, type) => {
      if(!node) return;
      new MutationObserver(() => {
        const msg = node.textContent.trim();
        if (msg) showStatus(msg, type);
      }).observe(node, {childList:true,characterData:true,subtree:true});
    };

    observe($('#ContactForm1_contact-form-success-message'), 'success');
    observe($('#ContactForm1_contact-form-error-message'), 'error');
  }
})();
</script>

FAQ

Apakah ini merusak tampilan tema?

Tidak. Warna dan tipografi mengikuti variabel CSS tema Blogger, dengan fallback aman. Overlay hanya muncul saat tombol diklik.

Wajib pakai widget Contact Form?

Ya. Widget itu bertindak sebagai “mesin kirim” email. Kita hanya membungkusnya dengan UI popup.

Bagaimana kalau menu saya pakai LinkList?

Beri ID contact-icon pada tautan “Hubungi Kami”. Jika tidak bisa via GUI, edit HTML template menu dan tambahkan ID pada elemen <a>.

Apakah bisa dipakai di halaman AMP?

Tidak disarankan. AMP membatasi JavaScript kustom. Gunakan versi non-AMP.

NgasalBlog

Cara Membuat & Memasang Popup Contact Form di Blogger

Kenapa Memakai Popup Contact Form?

Persiapan Wajib

Cara Pasang Tombol “Hubungi Kami” di Menu Navigasi

HTML Popup Contact Form

CSS Popup (Mengikuti Variabel Blogger)

JavaScript: Integrasi ke Widget ContactForm1

FAQ

Apakah ini merusak tampilan tema?

Wajib pakai widget Contact Form?

Bagaimana kalau menu saya pakai LinkList?

Apakah bisa dipakai di halaman AMP?

Posting Komentar

Menggunakan AI & Otomasi untuk Mengelola Media Sosial: Panduan Lengkap 2025

Samsung Continuous Zoom: Inovasi Besar, Tapi Bukan untuk Galaxy

Albania Tunjuk AI Bot “Diella” Sebagai Menteri untuk Lawan Korupsi

Apple Intelligence vs Gemini Samsung Galaxy AI: Siapa yang Lebih Unggul?