Cara Membuat Contact Us di Blog 100% Responsive
Jika dibahas lebih dalam, hal ini akan masuk ke dalam ranah ilmu web desain. Namun, saat ini yang akan saya share ke kalian bukanlah tentang bagaimana caranya mendesain web, tapi hanya berfokus pada salah satu bagian yang paling sederhana dari mendesain web, yakni menambahkan menu navigasi pada blog kalian.
Navigasi pada blog dapat dicontohkan seperti Beranda, Contact Us, Disclaimer, Privacy Police, dan lain-lain sesuai dengan selera masing-masing.
Nah yang akan saya bahas di sini adalah Formulir Kontak, memang ada banyak sekali istilah dari Formulir Kontak ini, ada yang menyebutnya sebagai Contact Form, Contact Us, Contact Me, Kotak Saran, Hubungi Kami, dan masih banyak lagi.
Ini semua sifatnya tidak kaku, namun sangat fleksibel dan bisa menyesuaikan selera kalian masing-masing. Terserah kalian mau memberi nama yang mana saat menampilkan menu ini di blog temen-temen.
Gambar di atas merupakan contoh tampilan halaman Contact Us yang akan kita bahas pada artikel ini.
Sebelum temen-temen memasang Contact Form pada blog yang temen-temen punya, perlu kalian ketahui apa saja fungsi dari Contafct Form itu sendiri.
Tentu bisa ditebak, bahwa salah satu fungsi dari Contact Form ini adalah agar pengunjung blog dapat menghubungi pemilik blog.
Sebenarnya, selain itu masih ada lagi fungsi dari Contact Form, seperti agar blog bisa diterima AdSense, agar memudahkan pengunjung untuk meminta memasang link di blog kalian, dan masih banyak lagi fungsi-fungsi dari Contact Form, tergantung temen-temen juga mau masang Contact Form dengan tujuan seperti apa.
Jika temen-temen pengen tau bagaimana contoh dari Contact Form, temen-temen bisa buka halaman Contact Us di bagian atas blog ini.
Sudah melihatnya?
Yaaa, seperti itulah contoh dari Contact Form, ada box untuk memasukkan nama pengirim, alamat email pengirim, isi pesan, dan tak lupa tombol kirim.
Tentu tidak semua Contact Form memiliki struktur yang sama, kalian bisa menambahi atau mengurangi struktur Contact Form yang akan kalian pasang di blog, jika kalian mampu untuk melakukannya.
Cara memasang Form Contact Us di blog, sebenarnya ada berbagai banyak cara, mulai dari menggunakan situs yang dapat membantu pembuatan scrip Contact Form, ataupun langsung dengan mengcopy script yang sama seperti dengan yang akan saya berikan kali ini.
Namun, menurut saya pribadi, akan lebih mudah jika temen-temen langsung copy paste script Contact Form daripada harus menggunakan layanan online untuk membuatnya sendiri. Akan tetapi itu kembali lagi ke diri kalian masing-masing, mau mengguanakan cara yang seperti apa.
Cara Membuat Contact Us di Blog Responsive
Di artiikel ini akan saya tuntun untuk memasang Contact Form di blog kalian dengan langsung copy paste script, mungkin untuk pemasangan dengan cara melalui layanan pembuatan Contact Form secara online (seperti melalui www.foxyform.com, www.123contactform.com) akan saya bahas di post selanjutnya.Sekarang silahkan temen-temen memulai untuk memasang Contact Form dengan mengikuti langkah-langkah berikut :
- Pertama, silahkan login ke halaman Blogger
- Masuk ke Halaman untuk membuat halaman statis baru
- Pilih Halaman Baru
- Lalu pilih tampilan HTML dengan cara klik tombol < > di kanan atas (di samping tombol publish)
- Masukkan kode berikut ke halaman statis yang dibuat
- Beri nama halaman, bisa Contact Us, Contact atau Hubungi Kami
- Terakhir, silahkan di publish
<form id="kontak-arlina" 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>
Sebagai catatan penting, jangan lupa kalian mengganti tulisan IDBLOGSOBAT dengan nomor ID blog kalian dan urlblog dengan url blog kalian..
Sekarang pertanyaannya adalah bagaimana cara mengetahui ID blog yang kita kelola?
Caranya cukup mudah, silahkan temen-temen baca Cara Mengetahui ID Blog Sendiri.
Perlu saya sampaikan ke temen-temen semua, bahwasannya apa yang saya tulis ini berdasarkan pengalaman dan sepengetahuan saya, jadi apabila temen-temen menemukan kesalahan, baik itu penulisan, pernyataan, langkah-langkah ataupun yang lannya, saya dengan sangat senang hati menerima semua masukan yang temen-temen berikan, karena ini semua demi kenyamanan temen-temen dan pengunjung lain saat membaca artikel di Ide Kevin Blog.
Kalian bisa mengirimkan masukan melalui Contact Form yang ada di navigasi blog ini.
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..
