Cara Membuat Contact Us di Blogspot dengan Mudah

Contact Us memiliki nama lain yang sering disebut oleh para blogger, ada yang menyebutnya contact form, hubungi kami dan bahkan ada yang menyebutnya kotak saran. Apapun itu sebutannya halaman atau widget ini sangat penting agar pengunjung bisa mengubungi pemilik blog.

Halaman Contact Us merupakan salah satu halaman yang wajib ada pada sebuah blog atau web. Adanya contact us akan mempermudah pengunjung untuk menghubungi kita sebagai pemilik blog, bisa saja pengunjung ingin mengajak kerja sama atau hanya sekedar ingin bertanya.

Keuntungan Membuat Contact Us di Blog

Akan selalu ada blogger baru muncul setiap harinya, karena banyak orang yang suka menulis dan membagikan inspirasi melalui blog. Nah, pasti ada saja blogger pemula yang tidak memperdulikan untuk membuat halaman kontak diblognya.

Berikut adalah alasan kenapa kamu harus membuat contact us di blog:

• Praktis dan Aman

Dibandingkan dengan memberikan informasi kontak berupa no hp, akun sosial media atau alamat email secara langsung, menurut saya lebih aman menggunakan formulir kontak. Lebih aman dan praktis karena blogger sendiri telah menyediakan fitur widget formulir kontak.

• Lebih Profesional

Seperti yang kita ketahui komunikasi melalui email dalam urusan pekerjaan akan lebih profesional. Nah contac us pun begitu, pesan yang dikirim oleh pengunjung akan masuk ke email akun blogger kamu.

• Mudah diterima dan menerima Layanan Iklan

Sebagai blogger kita pasti memikirkan untuk mendapatkan penghasilan dari blog yang sudah dibuat. Menurut pengalaman saya, dengan memasang halaman contac us akan mempermudah kita untuk mendapatkan tawaran iklan atau kerja sama lainnya. Dan perlu kamu ketahui bahwa halaman contact us dapat mempermudah pengajuan saat blog kita didaftarkan ke Google Adsense.

Cara Membuat Contact Us Keren di Blog

Caranya sangat mudah, sama seperti kita membuat postingan artikel. Tidak butuh waktu lama, kurang dari 1 menit juga pasti sudah selesai. Hanya saja, kamu harus memiliki script formulir kontak yang sudah jadi.

Beruntungnya kamu mengunjungi halaman ini, karena saya sudah menyiapkan script html dan css tersebut.

• Buka halaman Dasboard Blogger.
• Buat halaman baru dan beri judul Contact Us.
• Copy semua kode di bawah ini.
• Pilih halaman baru
• Masukan kode berikut pada halaman statis yang akan dibuat :

<form id="kontak-Dedi E Kusmayadi" name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Send Message"/>

<div style="max-width: 100%; text-align: center; width: 100%;">

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

</div>

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

</div>

</div>

</form>

<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager{display:none}

form{color:#666}

form.payforpal{margin:auto;text-align:center}

#kontak-arlina{margin:auto;max-width:640px}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}

#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}

#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}

#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}

.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}

.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}

img.contact-form-cross{line-height:40px;margin-left:5px}

.post-body input{width:initial}

@media only screen and (max-width:640px){

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}

</style>

<script type="text/javascript">

//<![CDATA[

if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');

//]]>

</script>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'IDBLOGSOBAT';BLOG_attachCsiOnload(''); }

_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dIDBLOGSOBAT','//urlblog.blogspot.com/','IDBLOGSOBAT');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'IDBLOGSOBAT', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>

• Beri nama halaman, bisa Contact Us, Contact atau Hubungi Kami
• Terakhir, silahkan dipublish

Sebagai catatan penting, jangan lupa kalian mengganti tulisan IDBLOGSOBAT dengan nomor ID blog kalian dan //urlblog.blogspot.com dengan url blogspot.com mu.

Untuk mengetahui IDBLOGSOBAT caranya sebagai berikut :

1. Pertama, silahkan  masuk ke halaman Blogger masing-masing.

2. Kemudian, kalian pilih blog yang ingin kalian kelola.

Ingat! Walaupun dalam satu akun Blogger terdapat lebih dari satu blog, tetap masing-masing blog memilik ID yang berbeda-beda.

3. Setelah itu, arahkan pandangan kalian pada Address Bar di bagian atas Browser kalian

4. Cari tulisan blogID (Lebih jelasnya silahkan lihat gambar di bawah).

5. Copy no id blog tersebut dan masukan ke format Contact Us diatas.

Sampai sini pembahasan mengenai  Cara Membuat Contact Form pada Blog, jika ada pertanyaan silahkan kalian tulis pada kolom komentar

Semoga jelas dan bermanfaat, sampai jumpa.