Cara Terbaru Membuat Form Contact Us di Blogger [Email Received]

Cara Terbaru Membuat Form Contact Us di Blogger [Email Received] - Menambahkan layanan Laman Contact Us pada blogger dapat memudahkan pengunjung untuk bisa menghubungi pengelola website/blog dengan mudah.

Sering kita ketahui biasanya artikel-artikel yang sudah dipublikasikan belum tentu bisa dengan mudah di pahami oleh orang lain, dengan begitu terutama pengunjung akan menjadi semakin bingung terhadap bahasan artikel yang sudah dibuat.

Atau bisa kita katakan, apabila pengunjung ingin mengajukan suatu pertanyaan-pertanyaan secara langsung kepada pengelola website terkait informasi yang sudah diberikan, memang benar bisa dilakukan melalui kolom komentar di artikel. Namun akan tetapi lebih baik apabila setiap pengelola website membuat form contact us (page contact) dan menambahkan ke dalam layanan blog, terlebih lagi bisa diterima melalui inbox email anda.

Membuat Form Contact Us bisa juga membuat jalinan yang baik antara pengelola blog dan juga pengunjung blog. Tentunya hal yang seperti ini sangat dibutuhkan, agar sebuah website dapat berkembang dalam cara strategi peningkatan blog.

Cara Terbaru Membuat Form Contact Us di Blogger [Email Received]

<div dir="ltr" style="text-align: left;" trbidi="on">
Silahkan isi form di bawah ini untuk menghubungi admin.
<form id="kontak-form" 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="Kirim Pesan" />
<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-form{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:80%;min-width:80%;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:##4d90fe;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:40%;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'] = '16854xxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d16854xxxxxxx','//namadomain[dot]com/
','16854xxxxxxx');
_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': '16854xxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>

Langkah cara membuat form contact us blogger:
1. Login akun Blogger
2. Pilih Menu Laman/Page
3. Submit Buat Laman Baru
4. Salin atau Copy kode script HTML diatas (ubah BlogID dan alamat blog)
5. Paste pada HTML
6. Publikasikan

Note:
- Ubah  16854xxxxxxx  menjadi BlogID anda.
- Ganti  namadomain[dot]com  menjadi alamat blog website anda.

Cek Contact Us Genakmi.Com

Script code HTML terbaru untuk membuat page contact form diatas bisa langsung diterima melalui email (email received) yang digunakan sebagai login akun blogger. Jika tidak mendapatkan email pada inbox Gmail silahkan di cek pada pesan Junk/Spam mungkin terkirim kesana.

Share this post