Di artikel ini kita akan menggunakan struktur asli widget Blogger kemudian mengubah bagian visualnya. Ada empat style yang bisa dipilih: Formal Clean, Nature Panel, Cyber Grid, dan Night Sky. Semua kode dibuat ulang agar responsive, lebih ringan, dan tidak lagi bergantung pada Font Awesome lama untuk dekorasi CSS.
CONTACT FORM STYLE LAB
Gunakan widget Blogger yang sudah bekerja, lalu ubah tampilannya dengan CSS.
Tidak perlu membongkar mekanisme pengiriman hanya untuk mendapatkan desain yang lebih modern.
CSS OnlyTanpa JavaScript tambahan.
ResponsiveAman untuk layar kecil.
4 StylesPilih sesuai tema blog.
LightweightDekorasi lebih ringan.
Informasi Singkat
Contact Form Blogger merupakan gadget bawaan yang menyediakan form sederhana untuk menghubungkan pengunjung dengan pengelola blog. Struktur standarnya mempunyai field Name, Email, Message, tombol kirim, serta area informasi berhasil atau gagal.
Artikel ini hanya mengubah bagian visual menggunakan CSS. Mekanisme pengiriman tetap menggunakan fungsi asli Blogger.
Kenapa Menggunakan Contact Form Bawaan Blogger?
Untuk blog sederhana, kita tidak selalu membutuhkan layanan form eksternal. Contact Form Blogger sudah cukup jika kebutuhan utamanya hanya menerima pesan dari pengunjung.
Terintegrasi
Berjalan di dalam Blogger.
Mudah Distyle
Input dan tombol dapat diubah dengan CSS.
Kontak Sederhana
Cocok untuk pertanyaan dan feedback.
Email Tidak Ditulis Terbuka
Alamat email tidak perlu ditampilkan sebagai teks pada halaman.
Namun widget ini memang sederhana. Kalau kamu membutuhkan dropdown kompleks, upload file, conditional fields, database lead, integrasi CRM, atau automation marketing, solusi seperti Google Forms atau layanan form pihak ketiga biasanya lebih sesuai.
Field yang Tersedia pada Contact Form Blogger
01
Name
Nama pengirim. Field ini biasanya bersifat opsional.
02
Email
Alamat email pengirim dan diperlukan agar form dapat diproses dengan benar.
03
Message
Isi pesan yang ingin dikirimkan kepada pengelola blog.
04
Send
Tombol yang menjalankan proses pengiriman melalui Contact Form Blogger.
Contact Form Blogger tidak menyediakan field Subject sebagai field standar.
Kalau membutuhkan subject, dropdown, nomor telepon, upload file atau field khusus lain, pertimbangkan menggunakan solusi form yang memang dirancang untuk kebutuhan tersebut.
Cara Memasang Contact Form di Blogger
Cara paling aman adalah memasang gadget melalui dashboard Blogger terlebih dahulu. Jangan memulai dengan menyalin HTML dari halaman lain.
01
Buka Dashboard Blogger
Login kemudian pilih blog yang ingin diedit.
02
Buka Tata Letak
Masuk ke menu Tata Letak atau Layout.
03
Tambah Gadget
Pilih area tempat Contact Form akan dipasang kemudian tekan Tambahkan Gadget.
04
Pilih Contact Form
Tambahkan gadget Contact Form jika tersedia pada daftar gadget.
05
Simpan Tata Letak
Buka halaman blog dan pastikan form tampil serta dapat digunakan sebelum menambahkan CSS custom.
06
Baru Tambahkan Style
Pilih salah satu CSS pada artikel ini dan pasang melalui CSS template atau editor HTML tema.
Tata Letak
Tambahkan Gadget
Kenali Selector Contact Form Sebelum Mengubah CSS
Supaya CSS tidak mengganggu form lain pada template, kita akan menargetkan selector di bawah melalui parent #ContactForm1.
#ContactForm1
Wrapper utama widget.
.contact-form-widget
Area utama form.
.contact-form-name
Input nama.
.contact-form-email
Input email.
.contact-form-email-message
Textarea pesan.
.contact-form-button-submit
Tombol kirim.
.contact-form-error-message
Pesan error.
.contact-form-success-message
Pesan berhasil.
Kenapa menggunakan #ContactForm1 di depan selector?
Supaya aturan CSS hanya mengenai Contact Form Blogger dan tidak ikut mengubah input, textarea, atau tombol lain pada template.
Style Formal Clean
Style pertama dibuat untuk company profile, blog jasa, portfolio dan website yang membutuhkan tampilan bersih. Tidak ada background berat atau animasi besar.
KarakterClean dan profesional.
BebanRingan.
CocokBisnis dan jasa.
<style>
#ContactForm1{--cf-bg:#fff;--cf-soft:#f5f8fb;--cf-text:#26333d;--cf-line:#d8e1e8;--cf-main:#0083da;max-width:680px;margin:auto;padding:18px;border:1px solid var(--cf-line);border-radius:7px;background:var(--cf-bg);box-sizing:border-box}
#ContactForm1 .contact-form-widget{max-width:100%;padding:0;box-sizing:border-box}
#ContactForm1 .form form>p{margin:11px 0 5px;color:var(--cf-text);font-weight:700;text-transform:none;text-shadow:none}
#ContactForm1 .contact-form-name,#ContactForm1 .contact-form-email,#ContactForm1 .contact-form-email-message{display:block;width:100%!important;max-width:100%;box-sizing:border-box;margin:0;padding:11px 12px;border:1px solid var(--cf-line)!important;border-radius:5px;outline:none;background:var(--cf-soft);color:var(--cf-text);font-size:15px;box-shadow:none!important;transition:border-color .2s,box-shadow .2s}
#ContactForm1 .contact-form-email-message{min-height:160px;resize:vertical}
#ContactForm1 .contact-form-name:focus,#ContactForm1 .contact-form-email:focus,#ContactForm1 .contact-form-email-message:focus{border-color:var(--cf-main)!important;box-shadow:0 0 0 3px rgba(0,131,218,.1)!important}
#ContactForm1 .contact-form-button-submit{display:inline-flex;width:auto;min-width:145px;height:auto;margin:13px 0 0;padding:10px 17px;border:0!important;border-radius:5px;background:var(--cf-main);color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:none;text-shadow:none;transition:opacity .2s,transform .2s}
#ContactForm1 .contact-form-button-submit:hover{opacity:.9;transform:translateY(-1px)}
#ContactForm1 .contact-form-error-message{color:#c43d3d}
#ContactForm1 .contact-form-success-message{color:#14855f}
</style>
Style Nature Panel
Versi lama menggunakan banyak pseudo-element Font Awesome untuk membuat pohon, awan dan gunung. Versi ini dibuat ulang dengan gradient CSS sehingga tidak membutuhkan font icon tambahan.
KarakterNatural dan colorful.
TeknikCSS gradient.
CocokPersonal dan kreatif.
<style>
#ContactForm1{--cf-main:#168b63;--cf-text:#18362c;position:relative;max-width:680px;margin:auto;padding:20px;border:1px solid rgba(22,139,99,.3);border-radius:7px;overflow:hidden;background:linear-gradient(160deg,transparent 48%,rgba(54,167,91,.2) 48% 58%,transparent 58%),linear-gradient(205deg,transparent 52%,rgba(17,115,65,.22) 52% 65%,transparent 65%),linear-gradient(to bottom,#dff7ff 0%,#eefcff 55%,#dff5d2 56%,#f5f1d8 100%);box-sizing:border-box}
#ContactForm1 .contact-form-widget{position:relative;z-index:2;max-width:100%;padding:0;box-sizing:border-box}
#ContactForm1 .form form>p{margin:11px 0 5px;color:var(--cf-text);font-weight:700;text-transform:none;text-shadow:none}
#ContactForm1 .contact-form-name,#ContactForm1 .contact-form-email,#ContactForm1 .contact-form-email-message{display:block;width:100%!important;max-width:100%;box-sizing:border-box;margin:0;padding:11px 12px;border:1px solid rgba(24,54,44,.18)!important;border-radius:5px;outline:none;background:rgba(255,255,255,.82);color:var(--cf-text);font-size:15px;box-shadow:none!important;backdrop-filter:blur(4px);transition:border-color .2s,background .2s}
#ContactForm1 .contact-form-email-message{min-height:160px;resize:vertical}
#ContactForm1 .contact-form-name:focus,#ContactForm1 .contact-form-email:focus,#ContactForm1 .contact-form-email-message:focus{background:#fff;border-color:var(--cf-main)!important}
#ContactForm1 .contact-form-button-submit{width:auto;min-width:145px;height:auto;margin:13px 0 0;padding:10px 17px;border:0!important;border-radius:5px;background:var(--cf-main);color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 5px 14px rgba(22,139,99,.18);text-shadow:none;transition:transform .2s}
#ContactForm1 .contact-form-button-submit:hover{transform:translateY(-2px)}
#ContactForm1 .contact-form-error-message{color:#a43232}
#ContactForm1 .contact-form-success-message{color:#126b4d}
</style>
Style Cyber Grid
Style Cyber dibuat untuk blog teknologi, coding atau tema futuristik. Background lama menggunakan gambar eksternal dan input melakukan rotasi 3D ketika fokus. Versi baru dibuat lebih ringan dan tidak menggerakkan field saat pengguna sedang mengetik.
KarakterFuturistik.
VisualCyber grid.
CocokTech dan coding.
<style>
#ContactForm1{--cf-main:#00d8ff;--cf-pink:#ff4fd8;--cf-text:#e8fbff;position:relative;max-width:680px;margin:auto;padding:20px;border:1px solid rgba(0,216,255,.48);border-radius:7px;overflow:hidden;background-color:#07131d;background-image:linear-gradient(rgba(0,216,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,216,255,.07) 1px,transparent 1px),linear-gradient(135deg,rgba(255,79,216,.06),transparent 55%);background-size:24px 24px,24px 24px,100% 100%;box-shadow:inset 0 0 30px rgba(0,216,255,.04);box-sizing:border-box}
#ContactForm1 .contact-form-widget{position:relative;z-index:2;max-width:100%;padding:0;box-sizing:border-box}
#ContactForm1 .form form>p{margin:11px 0 5px;color:var(--cf-text);font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-shadow:none}
#ContactForm1 .contact-form-name,#ContactForm1 .contact-form-email,#ContactForm1 .contact-form-email-message{display:block;width:100%!important;max-width:100%;box-sizing:border-box;margin:0;padding:11px 12px;border:1px solid rgba(0,216,255,.38)!important;border-radius:4px;outline:none;background:rgba(3,18,28,.86);color:var(--cf-text);font-size:15px;box-shadow:none!important;transition:border-color .2s,box-shadow .2s,background .2s}
#ContactForm1 .contact-form-email-message{min-height:165px;resize:vertical}
#ContactForm1 .contact-form-name:focus,#ContactForm1 .contact-form-email:focus,#ContactForm1 .contact-form-email-message:focus{background:#081d2a;border-color:var(--cf-main)!important;box-shadow:0 0 0 2px rgba(0,216,255,.1),0 0 16px rgba(0,216,255,.09)!important}
#ContactForm1 .contact-form-button-submit{width:auto;min-width:150px;height:auto;margin:13px 0 0;padding:10px 18px;border:1px solid var(--cf-main)!important;border-radius:4px;background:rgba(0,216,255,.12);color:var(--cf-main);font-size:15px;font-weight:800;letter-spacing:.5px;cursor:pointer;box-shadow:none;text-shadow:none;transition:background .2s,color .2s}
#ContactForm1 .contact-form-button-submit:hover{background:var(--cf-main);color:#031018}
#ContactForm1 .contact-form-error-message{color:#ff8c8c}
#ContactForm1 .contact-form-success-message{color:#66ffd0}
</style>
Style Night Sky
Versi Night Sky lama memakai ratusan koordinat box-shadow untuk membuat bintang. Tampilan memang unik, tetapi CSS menjadi sangat panjang. Di versi baru bintang dibuat menggunakan beberapa radial gradient saja.
KarakterDark dan elegan.
BintangRadial gradient.
CocokBlog modern.
<style>
#ContactForm1{--cf-main:#64b5ff;--cf-text:#f1f6ff;position:relative;max-width:680px;margin:auto;padding:20px;border:1px solid rgba(100,181,255,.35);border-radius:7px;overflow:hidden;background-color:#0a0820;background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.9) 0 1px,transparent 1.5px),radial-gradient(circle at 72% 25%,rgba(255,255,255,.7) 0 1px,transparent 1.4px),radial-gradient(circle at 35% 72%,rgba(255,255,255,.55) 0 1px,transparent 1.5px),radial-gradient(circle at 88% 74%,rgba(255,255,255,.8) 0 1px,transparent 1.5px),linear-gradient(145deg,#09071d,#15114b 55%,#071d3d);background-size:95px 95px,130px 130px,155px 155px,190px 190px,100% 100%;box-sizing:border-box}
#ContactForm1 .contact-form-widget{position:relative;z-index:2;max-width:100%;padding:0;box-sizing:border-box}
#ContactForm1 .form form>p{margin:11px 0 5px;color:var(--cf-text);font-weight:700;text-shadow:none}
#ContactForm1 .contact-form-name,#ContactForm1 .contact-form-email,#ContactForm1 .contact-form-email-message{display:block;width:100%!important;max-width:100%;box-sizing:border-box;margin:0;padding:11px 12px;border:1px solid rgba(255,255,255,.25)!important;border-radius:5px;outline:none;background:rgba(5,7,28,.68);color:var(--cf-text);font-size:15px;box-shadow:none!important;backdrop-filter:blur(4px);transition:border-color .2s,background .2s}
#ContactForm1 .contact-form-email-message{min-height:165px;resize:vertical}
#ContactForm1 .contact-form-name:focus,#ContactForm1 .contact-form-email:focus,#ContactForm1 .contact-form-email-message:focus{background:rgba(7,12,42,.92);border-color:var(--cf-main)!important}
#ContactForm1 .contact-form-button-submit{width:auto;min-width:150px;height:auto;margin:13px 0 0;padding:10px 18px;border:1px solid rgba(255,255,255,.32)!important;border-radius:5px;background:linear-gradient(135deg,#1976d2,#6246c7);color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 7px 18px rgba(0,0,0,.2);text-shadow:none;transition:transform .2s,opacity .2s}
#ContactForm1 .contact-form-button-submit:hover{transform:translateY(-2px);opacity:.92}
#ContactForm1 .contact-form-error-message{color:#ff9a9a}
#ContactForm1 .contact-form-success-message{color:#7fffc9}
</style>
Di Mana CSS Contact Form Dipasang?
Ada dua lokasi yang umum digunakan. Pilih salah satu, jangan memasang kode yang sama di beberapa tempat sekaligus.
METODE MUDAH
Theme → Customize → Advanced → Add CSS
Cocok jika template mendukung penambahan CSS melalui Theme Designer.
METODE TEMPLATE
Theme → Edit HTML
Cocok jika CSS memang dikelola langsung melalui kode template. Selalu backup template sebelum mengedit.
Backup template sebelum melakukan perubahan besar.
Jika template sudah mempunyai CSS untuk Contact Form, periksa selector yang bentrok terlebih dahulu. Tidak perlu langsung menghapus semua CSS lama tanpa mengetahui fungsinya.
Kalau Tampilan Tidak Berubah, Cek Hal Ini
01
CSS Template Lebih Spesifik
Selector template mungkin mempunyai specificity lebih tinggi sehingga style baru kalah.
02
Ada CSS Ganda
Style Contact Form mungkin sudah ditulis di beberapa lokasi sekaligus.
03
ID Widget Berbeda
Periksa apakah widget menggunakan ContactForm1 atau instance lain.
04
CSS Mobile Override
Media query template dapat mengubah width, display atau posisi widget pada layar kecil.
05
Widget Disembunyikan
Beberapa template menyembunyikan sidebar atau widget tertentu pada halaman maupun mobile.
06
Cache Browser
Lakukan hard refresh atau buka private tab setelah mengganti CSS.
Form Tampil tetapi Tombol Kirim Tidak Bekerja
Masalah ini berbeda dengan CSS. Kalau field tampil normal tetapi tombol tidak mengirim pesan, jangan terus mengubah desain.
Form Tampil?
Ya
Send Bekerja?
Tidak
Cek Widget
Bukan CSS
Salah satu kesalahan umum adalah menyalin HTML form dari hasil inspect kemudian menaruhnya langsung pada halaman statis. Tampilan field memang ikut tersalin, tetapi fungsi asli Blogger belum tentu ikut bekerja karena bagian tersebut terkait dengan widget dan script Contact Form Blogger.
Uji Contact Form asli sebelum menambahkan style.
Jika widget bawaan dapat mengirim pesan sebelum CSS dipasang tetapi rusak setelah perubahan template, kita bisa lebih mudah mempersempit sumber masalahnya.
Bagaimana Kalau Ingin Contact Form di Halaman Statis?
Membuat halaman Contact khusus memang lebih rapi dibanding menaruh form di sidebar. Tetapi ada perbedaan antara memindahkan widget secara benar dan hanya menyalin HTML tampilannya.
BLOGGER NATIVE
Gunakan ContactForm1 yang Tetap Terintegrasi dengan Template
Lebih cocok jika kamu memahami struktur widget Blogger dan conditional layout template.
STANDALONE
Gunakan Google Forms atau Form Service
Lebih mudah jika membutuhkan halaman form terpisah, field tambahan atau fungsi lebih kompleks.
Tips Membuat Contact Form Nyaman Digunakan
Input Full Width
Lebih mudah digunakan pada ponsel.
Font Minimal 15px
Teks tidak terlalu kecil.
Tombol Jelas
Area klik cukup besar.
Kontras
Teks tetap terbaca.
Textarea Cukup Tinggi
Pengguna nyaman menulis.
Status Terlihat
Error dan sukses mudah diketahui.
Mana Style yang Sebaiknya Dipilih?
FORMAL CLEAN
Company Profile
Jasa, CV, bisnis dan portfolio.
NATURE PANEL
Creative Blog
Personal, lifestyle dan blog santai.
CYBER GRID
Tech Blog
Coding, teknologi dan cyber theme.
NIGHT SKY
Dark Theme
Blog modern dan desain gelap.
Tidak ada style yang paling bagus untuk semua website. Pilih desain yang menyatu dengan tampilan blog dan tetap mudah digunakan. Jangan memilih efek visual yang membuat form sulit dibaca hanya karena terlihat lebih ramai.
Apakah Contact Form Berpengaruh pada SEO?
Contact Form bukan fitur yang otomatis menaikkan ranking. Nilainya lebih kepada pengalaman pengguna dan ketersediaan jalur komunikasi yang jelas.
Untuk website bisnis atau jasa, halaman kontak yang jelas dapat membantu pengguna memahami bagaimana menghubungi pemilik website. Tetapi indexing dan ranking artikel tetap bergantung pada keseluruhan kualitas halaman, struktur situs, crawlability dan banyak faktor lain.
Konten UnikJangan hanya menampilkan kode tanpa penjelasan.
PreviewTunjukkan hasil style yang dibahas.
Kode OriginalBerikan implementasi yang benar-benar berguna.
TroubleshootingBantu pembaca ketika kode tidak bekerja.
Supaya Artikel Tutorial Lebih Layak Masuk Indeks
Tidak ada kode yang bisa menjamin Google mengindeks sebuah halaman. Yang bisa kita lakukan adalah memastikan artikel mempunyai nilai yang jelas dan tidak sekadar menjadi kumpulan CSS tanpa konteks.
Judul menjelaskan bahwa artikel berisi desain dan kode Contact Form Blogger.
Opening langsung menjawab apa yang bisa dilakukan pembaca.
Ada penjelasan fungsi widget, bukan sekadar kode.
Setiap style mempunyai karakter dan kegunaan yang berbeda.
Kode CSS tidak bergantung pada library lama.
Ada troubleshooting berdasarkan masalah nyata.
Gambar sekunder menggunakan loading lazy.
Gambar utama tidak dilazy-load.
Artikel mempunyai internal link masuk dari tutorial Blogger yang relevan.
Canonical menunjuk URL artikel yang benar.
SETELAH UPDATE
Cek URL Inspection setelah artikel benar-benar selesai diperbarui.
Pastikan halaman dapat diakses, canonical sesuai, tidak memiliki noindex, kemudian gunakan Request Indexing satu kali jika memang diperlukan.
Pertanyaan yang Sering Ditanyakan
Apakah Contact Form Blogger masih bisa digunakan?
Contact Form masih digunakan sebagai gadget Blogger. Ketersediaan dan posisi gadget dapat bergantung pada template dan konfigurasi blog.
Apakah desain pada artikel ini membutuhkan JavaScript?
Tidak. Empat style hanya mengubah tampilan menggunakan CSS. Fungsi pengiriman tetap berasal dari widget Contact Form Blogger.
Apakah harus memasang Font Awesome untuk Contact Form?
Tidak untuk CSS widget pada artikel ini. Font Awesome hanya digunakan oleh visual artikel CodeFlare, bukan sebagai ketergantungan dekorasi Contact Form.
Kenapa style tidak berubah setelah CSS dipasang?
Kemungkinan ada selector template yang lebih spesifik, CSS ganda, ID widget berbeda, cache browser, atau aturan responsive yang mengoverride style baru.
Kenapa tombol Send tampil tetapi tidak bekerja?
Jika HTML form disalin secara manual ke halaman statis, fungsi widget Blogger belum tentu ikut terbawa. Uji terlebih dahulu Contact Form yang dipasang melalui gadget Blogger.
Bisakah Contact Form ditambah field nomor WhatsApp?
Widget bawaan tidak dirancang sebagai form builder bebas. Untuk field custom, lebih praktis menggunakan Google Forms atau layanan form lain.
Style mana yang paling ringan?
Formal Clean paling sederhana. Nature, Cyber Grid dan Night Sky juga tidak memakai gambar background eksternal pada kode barunya sehingga tetap relatif ringan.
Apakah Contact Form membantu artikel masuk Google?
Tidak secara langsung. Untuk artikel tutorial seperti ini, nilai utama berasal dari kualitas pembahasan, kode yang berguna, struktur halaman, internal link dan kondisi teknis indexing.
Ubah Tampilan Tanpa Merusak Fungsi
Prinsip paling aman ketika memodifikasi Contact Form Blogger adalah sederhana: pastikan widget aslinya bekerja lebih dulu, kemudian ubah hanya bagian yang memang perlu diubah.
Dengan cara tersebut kita bisa membuat Contact Form terlihat jauh lebih menarik tanpa perlu membongkar sistem pengiriman atau menambah script yang sebenarnya tidak dibutuhkan. Kalau suatu saat desain tidak cocok lagi, cukup hapus CSS custom dan widget dapat kembali mengikuti tampilan template.
STYLE WITHOUT BREAKING FUNCTION
Biarkan Blogger menangani pengiriman pesan. Gunakan CSS untuk mengatur pengalaman visualnya.
Pilih satu style, sesuaikan warna, lalu uji desktop dan mobile sebelum digunakan secara permanen.
Referensi
Blogger Help - Change the Design of Your Blog
Penambahan gadget serta pengaturan HTML dan CSS Blogger.
Blogger Help - Add Pages to Your Blog
Pembuatan dan pengelolaan halaman statis Blogger.
Google Search Crawling and Indexing
Informasi mengenai proses discovery, crawling dan indexing.
No comments
💬 Share Your Thoughts & Join the Hall of Fame!
Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀
💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.
👉 Comment now. Share your ideas. Get noticed on codeflare.net