Hallo sobat blogger, pada kesempatan kali ini saya akan membagikan tutorial tentang cara membuat halaman Contact Us yang keren dan modern di Blogger.

Halaman Contact Us merupakan salah satu halaman penting yang wajib dimiliki oleh sebuah blog. Selain membantu pengunjung menghubungi admin, halaman ini juga menjadi salah satu syarat pendukung agar blog terlihat lebih profesional dan siap dimonetisasi menggunakan Google AdSense.

Pada Blogger sendiri sebenarnya sudah tersedia widget Contact Form bawaan. Namun tampilannya masih sangat sederhana dan biasanya hanya bisa dipasang pada sidebar.

Untungnya, widget tersebut dapat dimodifikasi sehingga tampil lebih menarik dan diletakkan pada halaman statis (Page) khusus Contact Us.

Langkah 1 : Tambahkan Widget Contact Form

Masuk ke menu:

Tata Letak → Tambahkan Gadget → Formulir Kontak

Simpan gadget tersebut di sidebar blog.

Widget ini wajib dipasang terlebih dahulu agar Contact Form dapat berfungsi dengan baik.

Langkah 2 : Tambahkan CSS Sebelum Kode </head>

Masuk ke menu:

Tema → Edit HTML

Kemudian cari kode:

</head>

Lalu letakkan kode berikut tepat di atas kode tersebut:

<style>
#ContactForm1{
display:none;
}

.contact-box{
max-width:700px;
margin:30px auto;
padding:30px;
background:#fff;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.contact-title{
font-size:30px;
font-weight:700;
margin-bottom:10px;
color:#222;
}

.contact-desc{
font-size:15px;
color:#666;
margin-bottom:25px;
}

#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email,
#ContactForm1_contact-form-email-message{
width:100%;
padding:15px;
border:1px solid #ddd;
border-radius:12px;
outline:none;
margin-bottom:15px;
font-size:15px;
transition:.3s;
box-sizing:border-box;
}

#ContactForm1_contact-form-name:focus,
#ContactForm1_contact-form-email:focus,
#ContactForm1_contact-form-email-message:focus{
border-color:#4f46e5;
box-shadow:0 0 10px rgba(79,70,229,.2);
}

#ContactForm1_contact-form-email-message{
height:180px;
resize:none;
}

#ContactForm1_contact-form-submit{
background:linear-gradient(135deg,#4f46e5,#7c3aed);
color:#fff;
padding:14px 30px;
border:none;
border-radius:50px;
cursor:pointer;
font-size:16px;
font-weight:600;
transition:.3s;
}

#ContactForm1_contact-form-submit:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(79,70,229,.3);
}

#ContactForm1_contact-form-error-message,
#ContactForm1_contact-form-success-message{
margin-top:15px;
}
</style>

Setelah itu klik Simpan.

Langkah 3 : Buat Halaman Contact Us

Masuk ke menu:

Halaman → Halaman Baru

Lalu pilih mode HTML dan masukkan kode berikut:

<div class="contact-box">

<div class="contact-title">
Hubungi Kami
</div>

<div class="contact-desc">
Silakan isi formulir berikut untuk menghubungi kami. Kami akan berusaha merespon pesan Anda secepat mungkin.
</div>

<form name="contact-form">

<input id="ContactForm1_contact-form-name"
name="name"
placeholder="Nama Lengkap"
type="text"/>

<input id="ContactForm1_contact-form-email"
name="email"
placeholder="Alamat Email"
type="text"/>

<textarea cols="25"
id="ContactForm1_contact-form-email-message"
name="email-message"
placeholder="Tulis pesan Anda..."
rows="5"></textarea>

<input id="ContactForm1_contact-form-submit"
type="button"
value="Kirim Pesan"/>

<div id="ContactForm1_contact-form-error-message"></div>

<div id="ContactForm1_contact-form-success-message"></div>

</form>

</div>

Setelah itu beri judul halaman seperti:

• Contact Us
• Hubungi Kami
• Kontak Kami

Kemudian klik Publikasikan.

Hasil Akhir

Setelah selesai, halaman Contact Us akan memiliki tampilan:

• Modern dan elegan.
• Responsif di HP maupun desktop.
• Tombol gradient yang menarik.
• Efek focus pada kolom input.
• Sudut membulat (rounded).
• Box shadow yang membuat tampilan lebih premium.

Halaman ini sangat cocok digunakan pada template Blogger modern tahun 2026.

Kesimpulan

Contact Us merupakan halaman penting yang wajib dimiliki setiap blog. Selain memudahkan pengunjung menghubungi admin, halaman ini juga meningkatkan profesionalitas blog dan menjadi salah satu halaman pendukung untuk Google AdSense.

Dengan script di atas, Anda dapat membuat halaman Contact Us yang lebih keren, modern, dan responsif tanpa menggunakan layanan tambahan.

Semoga tutorial ini bermanfaat.

Selamat mencoba!