Cara Membuat Contact Form Resposive di Blogger - KenBoo

Cara Membuat Contact Form Resposive di Blogger

Cara Membuat Contact Form Resposive di Blogger
KenbooBlogger – Halo sobat Kenboo. Pada artikel kali ini saya akan memberikan tutorial Cara Membuat Contact Form / Formulir Kontak yang Responsive untuk Blogger. Sesuai dengan judul nya tema kali ini kita akan membahas seputar Blogger.

Formulir contact atau Contact form mempunyai peran yang sangat penting. Hal ini berguna untuk mempermudah interaksi penting antara pengunjung dan pemilik blog misalnya untuk keperluan menjalankan bisnis atau hanya untuk menanyakan hal-hal tertentu saja.

Setiap halaman formulis kontak yang berada di blog terintegrasi dengan email, sehingga setiap ada pesan baru yang dikirim oleh seseorang akan masuk ke email kita yang digunakan untuk login blogger tersebut.

Cara Membuat Halaman Contact Form Responsive di Blogger.

Contact Form yang akan saya bagikan kali ini sangat responsive dan ringan tentunya untuk menjaga kenyamanan pengunjung blog kita. Untuk demo nya sendiri silahkan masuk ke halaman kontak pada blog ini. Jika kalian tertarik maka saya akan membagikan tutorialnya.

Tutorial nya sangatlah mudah, tidak perlu menambahkan script atau css lainnya di pengaturan tema, karena sudah saya satukan untuk dipastekan di halaman statis.

Kita lanjutkan ke tutorialnya:

Langkah-Langkah

Silahkan kalian login ke blogger kalian terlebih dahulu dan masuk ke tab Halaman atau Ikuti langkah dibawah ini.
  1. Masuk ke Tab Halaman
  2. Pilih Halaman Baru
  3. Beri Judul “Contact Form”
  4. Pindahkan tab Compose ke HTML
  5. Pastekan Kode di Bawah ini Kemudian Klik Simpan
  6. Kemudian Lihat Hasilnya
<div class="contact-form-widget">
<form name="contact-form">
<span class="ctitles">Nama :</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" />
<span class="ctitles">Alamat Email <span class="swajib">*</span> :</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" />
<span class="ctitles">Isi Pesan <span class="swajib">*</span> :</span>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> 

<style type="text/css">
h1.post-title {text-align:center;}
.contact-form-widget {padding: 0 10%;}
#comments, #sidebar-wrapper, .comments {display: none;}
#post-wrapper {width:100%; max-width:999px;}
</style>

Catatan

Untuk mempercantik tampilannya pada blog yang memiliki sidebar, saya telah menghilangkan tampilan sidebar nya dan juga kolom komentar dihilangkan.

Oiya satu lagi, contact form ini hanya dapat digunakan untuk blogger yang menggunakan template Viomagz dari Mas-Sugeng.

Bagaimana tutorialnya? mudah bukan. Jika artikel ini bermanfaat untuk kalian silahkan di bagikan ke sosial media dan forum-forum blogger kalian. Terimakasih

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel