Beranda Blogger

Cara Membuat & Memasang Popup Contact Form di Blogger

Cara Membuat & Memasang Popup Contact Form di Blogger
Piping
Piping
Updated: • 0 • min read
Table of Contents
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.
Cara Membuat & Memasang Popup Contact Form di 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

  1. 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.
  2. 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 ini membuka & menutup popup, mengirim data ke widget #ContactForm1, dan memantau pesan sukses/gagal dari Blogger.

<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(); });
  }

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

  // Submit ke ContactForm1
  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>

Optimasi SEO & Kinerja

  • Search Description: isi deskripsi singkat berisi kata kunci “popup contact form Blogger”.
  • Struktur heading: gunakan H2 untuk bab, H3 untuk sub-bab.
  • Tanpa halaman baru: popup tidak menambah URL—ramah SEO.
  • Ramah tema: warna mengikuti variabel CSS Blogger, jadi tidak merusak tampilan.
  • Ringan: hanya CSS/JS kecil, tanpa library besar.

Uji Coba & Troubleshooting

  1. Klik menu Hubungi Kami → popup muncul.
  2. Isi form dan kirim → cek pesan status (sukses/gagal).
  3. Jika gagal, pastikan widget Contact Form benar-benar ditambahkan di Tata Letak.
  4. Bila tombol menu tak berfungsi, pastikan ID contact-icon ada pada tautan menu.

Tips: Saat uji, sementara tampilkan widget Contact Form (jangan disembunyikan) untuk melihat elemen sukses/gagal dimutasi, lalu sembunyikan kembali.

Bundle Kode Siap Tempel (Semua Jadi Satu)

Kamu bisa ambil paket cepat berikut—tinggal tempel di template. Pastikan kamu sudah menambahkan menu dengan ID contact-icon.

<!-- ===== Popup Contact Form: HTML ===== -->
<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>

<!-- ===== Popup Contact Form: CSS ===== -->
<style>#ContactForm1{position:absolute;left:-9999px;opacity:0;visibility:hidden}
#contact-popup-overlay{position:fixed;inset:0;background: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}
#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}
#contact-popup-overlay .popup-close{position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;color:#aaa;cursor:pointer;transition:color .2s}
#contact-popup-overlay .popup-close:hover{color:var(--heading-color,#222)}
#contact-popup-overlay h3{margin:0 0 10px;font-size:22px;color:var(--heading-color,#222)}
#contact-popup-overlay .form-group{margin-bottom:15px}
#contact-popup-overlay input,#contact-popup-overlay 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:var(--body-bg,#fff);transition:border-color .2s,box-shadow .2s}
#contact-popup-overlay input:focus,#contact-popup-overlay 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)}
#contact-popup-overlay .popup-submit-btn{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}
#contact-popup-overlay #contact-popup-status{margin-top:12px;font-size:14px;text-align:center;padding:10px;border-radius:6px;display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}</style>

<!-- ===== Popup Contact Form: JS ===== -->
<script>(function(){const $=(s,c=document)=>c.querySelector(s);
function setupPopup(triggerId,overlayId){const t=document.getElementById(triggerId),o=document.getElementById(overlayId);if(!t||!o)return;const x=o.querySelector('.popup-close')||o,show=()=>o.style.display='flex',hide=()=>o.style.display='none';t.addEventListener('click',show);x.addEventListener('click',hide);o.addEventListener('click',e=>{if(e.target===o)hide()});document.addEventListener('keydown',e=>{if(e.key==='Escape')hide()})}
if(document.getElementById('ContactForm1')){setupPopup('contact-icon','contact-popup-overlay')}else{const a=document.getElementById('contact-icon');if(a)a.style.display='none'}
const f=document.getElementById('popup-contact-form');if(f&&document.getElementById('ContactForm1')){f.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=(t,y)=>{const b=document.getElementById('contact-popup-status');b.textContent=t;b.style.display='block';b.style.background=y==='success'?'rgba(46,125,50,.08)':'rgba(198,40,40,.08)';b.style.color=y==='success'?'#2e7d32':'#c62828';setTimeout(()=>{const o=$('#contact-popup-overlay');if(o)o.style.display='none';b.style.display='none'},3500)};const obs=(n,y)=>{if(!n)return;new MutationObserver(()=>{const m=n.textContent.trim();if(m)showStatus(m,y)}).observe(n,{childList:true,characterData:true,subtree:true})};obs($('#ContactForm1_contact-form-success-message'),'success');obs($('#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.

Dipublikasikan untuk membantu blogger membuat formulir kontak modern tanpa plugin & tetap ramah SEO.
Baca juga : Optimasi  Blogger Profesional Hanya dengan HP

Posting Komentar

Santai aja, ☕️ komentar apa pun asal nggak keluar jalur 😎