Cara Membuat Contact Form di Blog

Cara Membuat Contact Form di Blog

Cara Membuat Contact Form di Blog
Cara Membuat Contact Form di Blog

Cara Membuat Contact Form ( Contact Us ) di Blogger / Blogspot sobat , nah sobat bisa juga melihat contoh halaman tersebut disini .

Apa itu Contact Us? 

Layanan Contact Form atau Contact Us adalah Halaman di blog atau website yang digunakan untuk menghubungi admin atau pemilik blog. Layanan Contact Us sangat penting untuk pengunjung yang ingin bekerjasama atau sekedar bertanya kepada si pengelola.

Contact Form memiliki beberapa nama yang cukup populer, ada yang mengatakan “Contact Me”, “Contact Us”, “kotak saran” atau “Hubungi Kami”. Semua nama terssebut intinya sama yaitu sebagai sarana untuk menghubungi admin blog.

Cara Membuat Contact Form di Halaman Statis Blog 

  1. Silahkan login ke akun blogger,
  2. Pilih Laman >> Laman Baru
  3. Buat Judul dengan Contact Us
  4. Copy kode HTML contact form dibawah ini.
  5. Paste pada Mode HTML bukan Compose

<style>
  /*<![CDATA[*/
  
  .contact-form-box {
    width: 100%;
    margin: 20px auto;
    padding: 0
  }
  
  #contactForm .floating-label-form-group {
    font-size: 16px;
    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: #C51162;
    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: 16px;
    font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",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-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: #C51162
  }
  
  #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:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",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: #C51162;
    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;
  }
  .fa.fa-pull-left,.fa.pull-left{margin-right:.3em}.fa,.fa-stack{display:inline-block}.fa-fw,.fa-li{text-align:center}@font-face{font-family:FontAwesome;src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.eot?v=4.6.0);src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.eot?#iefix&v=4.6.0) format('embedded-opentype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff2?v=4.6.0) format('woff2'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff?v=4.6.0) format('woff'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.ttf?v=4.6.0) format('truetype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.svg?v=4.6.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal}.fa{font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa.fa-pull-right,.fa.pull-right{margin-left:.3em}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right,.pull-right{float:right}.pull-left{float:left}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{filter:none}.fa-stack{position:relative;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}
  .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 blog. </div>
<br />
<form id="contactForm" name="contact-form">
<div class="floating-label-form-group">
<label>Name</label>
      <input class="form-control" id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" /> </div>
<div class="floating-label-form-group">
<label>Email Address</label>
      <input class="form-control" id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" type="text" value="" /> </div>
<div class="floating-label-form-group">
<label>Message</label>
      <textarea class="form-control" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
    </div>
<input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
    <br />
<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'] = '8651244672288910445';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8651244672288910445','//www.ruangcoder.com/','8651244672288910445');
_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": "8651244672288910445", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>

Perhatian!
Silahkan ganti ID Blog : 8651244672288910445 dengan ID Blog lihat URL kalian
Kemudian Ganti URL Blog ruangcoder.com dengan url kalian

Penutup

Nah mungkin tutorial Cara Membuat Contact Form di Blog nya sampai sini saja , sangat mudah bukan , itu nanti otomatis masuk ke gmail sobat , tentunya gmail yang nyangkut buat login ke Blogger sobat ya, langsung di cek saja , jadi sekian dulu tutorialnya , semoga bermanfaat ya , jangan lupa di share tutorial nya , jika bermanfaat , sampai ketemu lagi sobat.

Anda mungkin menyukai postingan ini