Skip to main content
Home Contact Us panduan blogger seo Panduan Membuat Contact Us Blog Atau Website

Panduan Membuat Contact Us Blog Atau Website


Dengan layanan Contact Us merupakan pilihan bagi pengunjung blog atau website yang ingin berkomunikasi secara privasi melalui pesan pribadi kepada pemilik sebuah blog atau website.
Panduan Membuat Contact Us Blog Atau Website sangat dibutuhkan bagi para blogger pemula yang ingin mendaftarkan blog atau websitenya kegoogle adsense.
Dengan layanan contact us pengunjung bisa berkomunikasi tentang hal-hal yang ingin diketahui atau hal lainnya.
Layanan Form Contact Us memiliki beberapa nama berbeda, ada yang menyebutnya sebagai kotak saran, kontak kami dan lainnya.
Adsense Indonesia menyebutnya layanan Hubungi Kami.

Kelebihan menggunakan form Contact Us adalah:


  1. Visitor blog atau website dapat memberikan pertanyaan seputar salah satu artikel yang dirasa kurang mengerti. Jika anda bisa mejawab apa yang ditanyakan visitor tersebut pasti visitor akan senang dan sering mengunjungi blog atau website yang anda miliki
  2. Visitor juga bisa memberikan masukan dan saran yang bisa membuat anda bisa mengembangkan blog atau website anda lebih baik lagi untuk kenyamanan visitor blog atau website anda.
  3. Form Contact Us merupakan salah satu syarat yang harus anda miliki kalau mau disetujui ketika mendaftar ke Google Adsense saat ini.
Meskipun banyak terdapat kelebihan, layanan contact us juga bisa disalah gunakan oleh visitor blog atau website yang iseng dan mengirim pesan yang tidak sesuai dengan tema artikel blog.

Berikut script layanan Contact Us yang akan Adsense Indonesia tulis buat anda.
Silahkan anda copy dan pastekan dihalaman blog atau website anda

<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 kami lewat email. </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'] = '3604048908081873410';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d3604048908081873410','//www.adsense-indonesia.com/','3604048908081873410');
_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": "3604048908081873410", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>

Setelah anda copy kode script diatas silahkan anda buat halaman baru diblog anda.
Beri judul halaman anda dengan contact us atau hubungi kami.
Pastekan yang anda copy tadi kehalaman tersebut dalam mode html, bukan compose.
Ganti ID blog dengan ID blog anda dan url blog diatas dengan URL blog atau website anda, bila kurang mengerti silahkan tulis dikolom komentar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar