Cara Membuat Contact Us di Blog dengan Script HTML

Cara Membuat Contact Us di Blog dengan Script HTML
Cara Membuat Contact Us di Blog dengan Script HTML - 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 di blogger merupakan salah satu syarat supaya blog kita bisa lebih mudah dan cepat diterima oleh Google AdSense. Sebuah blog atau website, ada layanan contact form atau 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.

Berikut adalah gambar penampakanya:

Cara Membuat Contact Us di Blog dengan Script HTML

Karena itu kali ini saya akan bagi Kode HTML Contact Usbiar sobat cepat membuatnya daripada buka web yang menyiadakan layanan contact form menurut saya ribet. Bagi teman-teman yang blog atau websitenya belum ada contact form dan tidak tahu cara untuk membuat dan memasangnya yuk simak baik-baik di bawah ini.

Cara Membuat Contact Us di Blog dengan Script HTML

1. Login Dashboard blogger >> Buka Halaman >> Pilih Halaman Baru.

2. Buat Judul Contact Us, Kontak atau Hubungi Kami Lalu copy Script HTML di bawah ini pada mode HTML Jangan compose.

<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.

3. Silakan klik publikasikan Dan lihat hasilnya, Jika ada yang kurang paham silakan tanyakan kepada saya.

Demikian tentang Cara Membuat Contact Us di Blog dengan Script HTML, semoga bermanfaat.

Berlangganan update artikel terbaru via email:

9 Responses to "Cara Membuat Contact Us di Blog dengan Script HTML"

> KOMENTAR SPAM & LINK AKTIF TIDAK AKAN DITAMPILKAN

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel