Cara Membuat Contact Form di Blogspot Responsive dengan Mudah

Cara Membuat Contact Forum di Blogspot responsive dengan mudah - Contact form atau formulir kontak adalah sebuah navigasi yang di gunakan oleh para blogger untuk memudahkan pengunjung berinteraksi langsung dengan pemilik blog

Cara Membuat contact form di blogspot

Contact Form atau formulir kontak adalah sebuah navigasi yang digunakan oleh para blogger untuk memberikan kemudahan kepada pengunjungnya dalam berinteraksi lebih dalam dengan pemilik blog. Berbeda dengan Kolom komentar yang ada pada bagian bawah halaman posting, contact form akan membuat pengunjung dapat berkomunikasi langsung dengan admin blog via email sedangkan kolom komentar biasanya akan ditayangkan langsung pada bagian bawah halaman posting.

Artinya contact form ini lebih privasi dibandingkan dengan kolom komentar yang bisa dibaca oleh pengunjung lainnya, Sekarang ini saya sudah memunculkan fasilitas baru yaitu kontak forum untuk memudahkan para pengunjung untuk menanyakan persoalan tentang websitenya. Namun demikian navigasi ini boleh terbilang sederhana jika dibandingkan dengan kontak forum yang dirancang para blogger atau penyedia kontak forum instan lainnya, Contoh kontak forumnya seperti yang sedang saya pakai saat ini.


cara membuat kontak forum di blogspot mudah

Tetapi jangan salah dulu, walaupun sederhana tetapi kualitasnya cukup mewah dan keren. Yang jelas contact form bawaan om bloger pasti lebih aman dari url susupan. Masalah kedua (mungkin bagi sebagian orang dianggap masalah sob) contact form yang di sediakan google hanya diuntukkan pada bagian body atau footer saja (karena pemasangannya lewat gadget.

Tapi kamu tidak usah khawatir, karena masih bisa kita fikirkan agar kontak forum ini bisa kita buat dalam sebuah halaman menu dan tidak tampil lagi di bagian gadget (sidebar, footer). Tampilanya pun masih bisa kita ubah dengan menambahkan beberapa kode yang tidak terlalu panjang.

Bagi kamu pendatang baru atau yang lama tapi belum bisa membuat kotak forum, kamu bisa lanjutkan membaca artikel sederhana ini. Bagi yang senior bisa memberi masukannya, demi kebaikan kita bersama. Untuk dapat membuatnya silahkan kamu ikuti langkah-langkah berikut ini.

Cara Membuat Halaman Contact Form di Blogspot

1. Buatlah sebuah halaman baru dengan judul Contact, Kontak Saya, Hubungi Saya, atau Contact US, apapun yang anda lebih sukai. Saya sarankan jenis halaman tersebut adalah halaman Static Page dan bukan halaman posting seperti biasanya, karena halaman tersebut bersifat timeless atau tidak mengandung url yang menunjukkan bulan dan tahun. Selain itu, halaman Contact Me juga tidak membutuhkan optimasi search engine (SEO) seperti postingan lainya.

2.Klik HTML di ujung kanan tepat dikanan Compose


Cara Membuat contact form responsive dengan mudah

3. Masukkan kode di bawah ini di bagian HTML 


Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.

<br />
<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" />  
<br />
<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'] = '5831797774698540610';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5831797774698540610','//www.writergilby.com/','5831797774698540610');
_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': '5831797774698540610', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Ganti semua kode 5831797774698540610 di atas dengan kode ID blog Anda.
Ganti kode //www.writergilby.com/ di atas dengan url blog Anda


4. Untuk preview hasilnya, cukup klik Compose (kembali ke menu) lalu Publikasikan, Setelah itu Klik Lihat.

5. Jika sudah selesai, anda bisa langsung disimpan atau bisa ditambahkan beberapa tulisan lain semaumu, Jangan lupa untuk mencoba atau tes kontak forum tersebut agar hasilnya maksimal.

Sekian tutorial dari saya, jika ada hal yang masih bingung dan perlu di tanyakan silahkan tanyakan di kolom komentar, Secepatnya saya akan membantu persoalan tersebut, Terimakasih.

COMMENTS

Name

AdSense,8,Bisnis Online,9,Internet and Web,1,Media Sosial,2,SEO,16,Tips Blogging,31,Tutorial,12,YouTube,1,
ltr
item
Writer Gilby: Cara Membuat Contact Form di Blogspot Responsive dengan Mudah
Cara Membuat Contact Form di Blogspot Responsive dengan Mudah
Cara Membuat Contact Forum di Blogspot responsive dengan mudah - Contact form atau formulir kontak adalah sebuah navigasi yang di gunakan oleh para blogger untuk memudahkan pengunjung berinteraksi langsung dengan pemilik blog
https://3.bp.blogspot.com/-ubAqVNNdNSM/WmZopUH4CjI/AAAAAAAAAXM/0bTcJPv6cnkTMxHw0hQr-TBhz0Fi8I0YgCLcBGAs/s400/formulir%2Bkontak.png
https://3.bp.blogspot.com/-ubAqVNNdNSM/WmZopUH4CjI/AAAAAAAAAXM/0bTcJPv6cnkTMxHw0hQr-TBhz0Fi8I0YgCLcBGAs/s72-c/formulir%2Bkontak.png
Writer Gilby
https://www.writergilby.com/2018/01/cara-membuat-contact-form-di-blogspot.html
https://www.writergilby.com/
https://www.writergilby.com/
https://www.writergilby.com/2018/01/cara-membuat-contact-form-di-blogspot.html
true
5831797774698540610
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy