Jumat, 21 Juli 2017

Cara Membuat Layanan Contact Form Di Blog

Cara Membuat Layanan Contact Us di Blog, Cara membuat contact form atau contact us di sebut juga hubungi kami adalah hal yang terpenting buat para blogger yang serius dengan dunia blogging, Form Contact merupakan salah satu elemen yang harus ada itu wajib menurut saya dan terpasang pada blog atau website Sobat Biar para pengunjung blog anda mudah buat menghubungi anda.

Menurut para sobat blogger, memasang Contact Form merupakan salah satu syarat supaya blog kita bisa lebih mudah dan cepat diterima oleh Google Adsense. Sebuah blog atau website, ada layanan contact form/contact us setidaknya para pengunjung blog tahu gimana cara menghubungi anda biar mudah berinteraksi walaupun ada yang iseng sih di salah gunakan buat kirim-kirim spam. Kan bikes. Hahaha

Berikut adalah gambar penampakanya:
Cara Membuat Layanan Contact Form Di Blog

Karena itu kali ini saya akan bagi kode html contact form biar sobat cepat membuatnya daripada buka web yang menyiadakan layanan contact form menurut saya ribet. Hehehe
Bagi teman-teman yang blog atau websitenya belum ada contact form dan tidak tahu cara untuk membuat dan memasangnya silahkan copy paste kode htmlnya di bawah ini.
<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: 222px; 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}
#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:#95a5a6;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#e74c3c;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
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'] = '1870007106932997444';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1870007106932997444','//blogbegul.blogspot.com/','1870007106932997444');
_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': '1870007106932997444', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Nb: Silahkan ganti kode yang berwarna merah dengan ID Blog sobat yang saya tandai itu.

Yang tidak tahu ID Blog sobat silakan buka halaman postingan sobat klik url diatas yang banyak angkanya itu adalah ID blog sobat.
Cara Membuat Layanan Contact Form Di Blog

Cara Pemasangnya:

1. Silakan login ke blogger

2. Buka Halaman Laman :
Cara Membuat Layanan Contact Form Di Blog
3. Buat Laman Baru

4. Pastekan Kode html tadi yang anda telah copy
Cara Membuat Layanan Contact Form Di Blog

5. Pastekan Kode tersebut di Mode HTML jangan Compose nanti akan rusak.

Silakan klik publikasikan Dan lihat hasilnya. Semoga Bermanfaat
-Jika ada yang kurang paham silakan tanyakan kepada saya.

Terima Kasih.

Artikel Terkait

Seseorang blogger pemula masih baru dalam menekuni dunia blogging, Yang tujuanya jelas dalam menulis blog.

6 komentar

Silahkan berkomentar jika ada pertanyaan seputar topik pembahasan diatas.
Dilarang Keras!!!:
1. No Spam
2. Jangan sisipkan link aktif
3. Komentar berbau sara
Langsung saya hapus!!!
EmoticonEmoticon