Membuat Contact Us Via Email Dengan HTML

Kali ini share bagaimana cara membuat contact us di blogger, contact us merupakan elemen yang penting dalam suatu blog ataupun website dimana fungsinya bisa sangat banyak tergantung bagaimana cara kita mengelola website atau blog. Contac us merupakan alat penghubung dengan dunia luar, sehingga bisa saling terkoneksi dengan jalan komunikasi yang mudah lewat internet online.

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

Berikut cara membuat contact us di Blogger :

1. Masuk ke akun blogger
2. Pilih menu 'Laman'
3. Buat laman baru (Klik tombol 'Laman baru' > 'Laman kosong')
4. Pilih mode 'HTML'
5. Beri judul Contact Us (judul terserah anda)
6. Masukkan kode utama dibawah sebagai berikut :

<form id="kontak" 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{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>
<!--
    Created By     : Cyber-H@ck
    Email        : habibulhakim02@gmail.com
    Home Page      : hakimbabels.blogspot.com
-->
  
<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'] = '6773944261335126588';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID6773944261335126588','//hakimbabels.blogspot.com/','6773944261335126588');_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": "6773944261335126588", "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 "6773944261335126588" dengan no id blogger sobat, serta ganti alamat blog "hakimbabels.blogspot.com" dengan url blog sobat.
Cara mengetahui no id blog sobat bisa dilihat ketika membuka akun blog di blogger, contohnya seperti gambar dibawah ini:

Pesan hasil contac us yang dikirimkan langsung terkirim ke alamat email akun blogger. Bisa di cek lewat gmail, biasanya pesan yang masuk dari contact us akan masuk pada inbox bagian social, seperti gambar dibawah.

 DEMO

Terimakasih salam Blogger, semoga Trik ini bermanfaat.