Skip to main content

Cara Membuat Contact Us Via Email Dengan HTML Pada Halaman Statis Blogger

cara membuat contact us via email dengan html pada halaman statis blogger

Seo v6 - Cara membuat contact us di blog, contact us merupakan elemen penting dalam suatu blog ataupun website dimana fungsinya bisa sangat banyak tergantung bagaimana cara kita mengelola website atau blog. Ibaratnya contac us adalah alat penghubung kita dengan dunia luar, sehingga bisa saling terkoneksi dengan jalan komunikasi yang mudah lewat internet online.

Berikut ini cara buat contact us via email dengan html pada halaman statis blogger, cara nya cukup mudah dan praktis, kita tinggal memanfaatkan halaman statis pada blogger dengan menerapkan mode HTML.

Cara membuat contact us di blogger seperti ini:  Halaman baru > HTML > Copy dan paste code di bawah ini pada halaman sobat:

<form id="kontak-seo" name="contact-form" style="
    padding-right: 25px;
"><br>
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value=""><br>
<br>
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value=""><br>
<br>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <br>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message">  <br>
<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-seo{margin:auto;max-width:300px}
#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:#34495e;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:#3498db;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%;}}
.contact_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.8);z-index:99999}
.contact_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:30%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.contact_message:before{content:"\f164";font-family:FontAwesome;font-weight:500;font-size:30px;display:block;margin-bottom:10px}
@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}
</style><br>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script><br>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '58891862532827193632';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\58891862532827193632','//blogtes6.blogspot.com/','58891862532827193632');
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'><div class='contact_message'><b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div></div><br/>", "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": "58891862532827193632", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
//]]>
</script>
<div class="clear"></div>

Selanjutnya ganti code yang berwarna "merah" dengan no id blogger sobat, serta ganti alamat blog dengan url blog sobat. Cara mengetahui no id blog sobat bisa dilihat ketika membuka akun blog di blogger, contohnya seperti gambar dibawah ini:

cara mengetahui blog id

Cukup mudah bukan?, pesan yang dikirimkan langsung terkirim ke alamat email akun blogger. Bisa di cek lewat gmail . jika terdapat eror atau ada yang tidak berfungsi dengan baik bisa langsung di tanyakan. begitulah cara membuat contact us di blogspot via email dengan html pada halaman statis blogger.


NB : Jika sudah selasai pengeditan langsung di publikasikan, jangan buka mode composenya atau pratinjau, karena bisa terjadi perubahan code dan contact us nya tidak akan berfungsi.


Comments

  1. Assalamualaykum
    Alhandulillah berhasil ms, kemarin saya kurang teliti si, hehe.. biasa orang baru,
    Syukron buat semuanya.

    ReplyDelete
  2. Salam Mitra,
    sebenarnya ini bagus dan semestinya berjalan, namun karena saya tidak teliti sehingga belum berjalan sesuai harapan, terdapat komentar "Send..." namun belum tuntas terkirim. Masalah ini akan saya pelajari lebih lanjut ketika saya telah banyak waktu. Terima kasih atas artikel yang diberikan, salam Mitra

    ReplyDelete
    Replies
    1. harus lebih teliti lagi gan, dibaca setiap petunjuknya sampai bawah,

      Delete
  3. Alhamdulillah, script contac us nya juga work 100% mas Randi.
    Matur nuwun Saget...

    ReplyDelete
  4. Wah Mantap. Nyari dibeberapa situs gak ada yang work. Ternyata situs ini ngasih coding yang work. Makasih gan. Saya akan beri donasi klik kepada agan dengan iklhas

    ReplyDelete
  5. ane masih belum ada email masuk ini gan.. gimana ya?

    ReplyDelete
    Replies
    1. email nya masuk ke tab sosial, disebelah tab utama

      Delete
  6. Gan, ane dah coba tpi ga ke sent gan. Kira2 problem diapanya ya? url blog nya sudah ane ganti blog id nya juga sudah,

    ReplyDelete
    Replies
    1. yang diganti ada URL nya satu dan ID nya empat buah yang mesti di ganti, kalau masih belum bisa, coba jangan buka mode compose ketika masuk ke halaman statisnya untuk mengedit, dan untuk pesan yang sampai ke email itu masuknya di folder sosial

      Delete

Post a Comment