Cara membuat Contact us html

cara buat halaman contact us pada blogger

Seperti yang pernah saya jelaskan mengenai tujuan blog ini yaitu untuk membagikan tutorial cara menjadi publisher blogger dari awal sampai menghasilkan uang. Salah satu langkah yang saya temukan saat belajar blogger yaitu membuat contact us, maka saya akan membagikan Cara Membuat Contact us HTML seperti pada blog masigun.

Form Contact us adalah cara pengunjung blog anda untuk berkomunikasi secara pribadi dengan pembuat blog atau penulisnya.



Manfaat menambahkan contact us antara lain


1. Pengunjung blog Anda dapat menyampaikan pertanyaan sesuai dengan salah satu isi artikel diblog anda, atau menanyakan sesuatu yang pengunjung Anda butuhkan secara pribadi.

2. Jika Pengunjung Anda memberikan saran atau kritik mengenai blog Anda lewat halaman contact us, pengunjung lainnya tidak akan melihat saran dan kritik jika saran tersebut berupa kritikan yang pedas.

3. Manfaat terpenting dengan adanya contact us, kemungkinan besar blog anda akan disetujui oleh google adsense.

4. Jika pengunjung Anda berkomentar atau mengirimkan pesan melalui contact us, anda akan mendapatkan notifikasi melaluui email yang terhubung dengan akun blogger Anda. Jadi Anda akan lebih cepat untuk merespon email tersebut. Apa Anda tertarik untuk membut contact us?


Cara membuat halaman Contact us pada blog


1. Masuk ke akun blogger anda, klik halaman lalu buat halaman baru.




2. Isi judul dengan Contact us atau hubungi saya, lalu copy kode html dibawah ini dan pastekan pada halaman HTML bukan Compose.

<style type='text/css' scoped=''>
  /*<![CDATA[*/
  
  .contact-form-box {
    width: 100%;
    margin: 20px auto;
    padding: 0
  }
  
  #contactForm .floating-label-form-group {
    font-size: 14px;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd
  }
  
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus {
    position: relative
  }
  
  #contactForm .floating-label-form-group:after,
  #contactForm .floating-label-form-group:before {
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 2px;
    background-color: #e8554e;
    content: "";
    transition: width .4s ease-in-out;
    display: block
  }
  
  #contactForm .floating-label-form-group:before {
    right: 50%
  }
  
  #contactForm .floating-label-form-group:after {
    left: 50%
  }
  
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus:before {
    width: 50%
  }
  
  #contactForm .floating-label-form-group input,
  #contactForm .floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-family: Roboto, Arial, sans-serif;
    font-weight: 400;
    background: 0 0;
    box-shadow: none!important;
    resize: none
  }
  
  #contactForm .floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: 12px;
    font-family: Roboto, Arial, sans-serif;
    font-weight: 300;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease, opacity .3s ease;
    -moz-transition: top .3s ease, opacity .3s ease;
    -ms-transition: top .3s ease, opacity .3s ease;
    transition: top .3s ease, opacity .3s ease
  }
  
  #contactForm .floating-label-form-group::not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #eee
  }
  
  #contactForm .floating-label-form-group-with-value label {
    top: 0;
    opacity: 1
  }
  
  #contactForm .floating-label-form-group-with-focus label {
    color: #e8554e
  }
  
  #contactForm {
    border-top: 1px solid #ddd
  }
  
  #contactForm textarea.form-control {
    height: auto
  }
  
  #contactForm .form-control {
    display: block;
    width: 100%;
    color: #555
  }
  
  #contactForm input:active,
  #contactForm input:focus,
  #contactForm textarea:active,
  #contactForm textarea:focus {
    outline: 0
  }
  
  #contactForm .btn,
  #contactForm .contact-form-button-submit {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    border-radius: 0;
    padding: 0 25px;
    height: 51px;
    line-height: 51px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 20px 0 0;
    background-image: none
  }
  
  #contactForm .contact-form-button {
    height: 51px;
    line-height: 51px
  }
  
  #contactForm .btn-default:focus,
  #contactForm .btn-default:hover,
  #contactForm .contact-form-button-submit:focus,
  #contactForm .contact-form-button-submit:hover {
    background-color: #e8554e;
    border: 1px solid #be403a;
    color: #fff
  }
  
  .contact-form-error-message-with-border,
  .contact-form-success-message-with-border {
    background: #fff;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  
  .contact-form-cross {
    height: 11px;
    margin: 0 5px;
    vertical-align: 0!important;
    width: 11px;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -goog-ms-box-shadow: none!important;
    box-shadow: none!important
  }
  
  .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: 10%;
    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;
    }
    .contact-form-box {
      width: 100%;
    }
  }
  /*]]>*/

</style>
<div class="contact-form-box">
  <div>Silahkan isi form di bawah ini untuk menghubungi admin Masigun. </div>
  <br/>
  <form name="contact-form" id="contactForm">
    <div class="floating-label-form-group">
      <label>Name</label>
      <input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" /> </div>
    <div class="floating-label-form-group">
      <label>Email Address</label>
      <input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" /> </div>
    <div class="floating-label-form-group">
      <label>Message</label>
      <textarea rows="5" class="form-control" name="email-message" placeholder="Message" id="ContactForm1_contact-form-email-message"></textarea>
    </div>
    <input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="Kirim" />
    <div class="clear"></div>
    <div style="max-width: 100%; text-align: left; width: 100%;">
      <div id="ContactForm1_contact-form-error-message"> </div>
      <div id="ContactForm1_contact-form-success-message"> </div>
    </div>
  </form>
</div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js' type='text/javascript'></script>
<script>
$(function() {
  $("body").on("input propertychange", ".floating-label-form-group", function(e) {
    $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
  }).on("focus", ".floating-label-form-group", function() {
    $(this).addClass("floating-label-form-group-with-focus");
  }).on("blur", ".floating-label-form-group", function() {
    $(this).removeClass("floating-label-form-group-with-focus");
  });
});
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1877745665889604279';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1877745665889604279','//masigun.com/','1877745665889604279');
_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": "1877745665889604279", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>


3. Isi dengan id Blogger diatas yang saya beri warna dengan ID blog Anda sendiri. Untuk melihat ID blog silahkan Anda buka postingan saya pada Cara mengetahui ID blog.

4. Peringatan jangan sekali-kali atau mencoba mengklik compose setelah kode html diatas anda paste pada halaman HTML karena akan terjadi kesalahan pada contact us yang anda buat. artinya contact us yang Anda buat tidak akan bekerja

5. Setelah selesai klik publikasi dan jangan lupa untuk submit kewebmaster tool.  jika Anda belum tahu cara submit artikel ke webmaster tool silahkan baca postingan saya mengenai cara submit artikel ke webmaster tool.
 

Begiulah cara membuat contact us html ala masigun.com. jika Anda menemukan kendala saat menerapkannya pada blog anda silahkan berkomentar dipostingan ini atau beritahu saya melalui halaman contact us.

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel