Cara Membuat Halaman Kontak – Contact Form Keren kayak Google

Halaman kontak atau contact form pada blog atau website merupakan sebuah bagian dari halaman menu navigasi statis yang sangat penting, terlebih bagi seorang blogger profesional. Contact form atau halaman kontak akan sangat berguna bagi seseorang guna memberikan kemudahan seseorang yang menginginkan jasa atau produk yang kita jual.

Halaman kontak juga menjadi identitas pribadi Anda layaknya sebuah alamat diri Anda yang akan mempermudah sebuah pesan atau surat bisa dari orang lain ke rumah Anda. Contact form menjadi sebuah tempat yang pas apabila ada pengunjung setia bahkan baru saja membaca artikel Anda ingin meminta masukan dan bantuan kepada Anda.

Read also: 4 Rahasia Cara Daftar Google Adsense Agar Mudah Diterima ala Mas Sugeng

Cara Membuat Halaman Kontak – Contact Form Keren kayak Google

Demo halaman kontak – contact form keren

Berikut ini ada cara mudah membuat halaman kontak – contact form blog dengan desain flat, simple dan tentu saja keren seperti halnya desain Google. Tips kali ini disampaikan oleh kang Adhy Suryadi pengelola blog Kompi Ajaib.

Bagaimana caranya? Berikut selengkapnya:

1. Silakan login kun blogger
2. Silakan pilih menu halaman/ page
3. Buat halaman baru > silakan buka mode htmlnya saja > silakan beri judul Contact atau Kontak
4. Copy paste kode di bawah ini pada halaman menu halaman baru tersebut
5. Publikasikan
6. Silakan perhatikan info tambahan di bawah kode di bawah ini:

<style scoped="scoped">
.post-outer {
  background: #fff
}

.post-footer {
  display: none
}

#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:before {
  display: block;
  position: absolute;
  right: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: #0400bf;
  content: "";
  transition: width 0.4s ease-in-out;
}

#contactForm .floating-label-form-group:after {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: #0400bf;
  content: "";
  transition: width 0.4s ease-in-out;
}

#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before,
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after {
  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: 18px;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: lighter;
  background: none;
  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: "Helvetica", "Arial", sans-serif;
  font-weight: lighter;
  line-height: 1.764705882em;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
  -webkit-transition: top 0.3s ease, opacity 0.3s ease;
  -moz-transition: top 0.3s ease, opacity 0.3s ease;
  -ms-transition: top 0.3s ease, opacity 0.3s ease;
  transition: top 0.3s ease, opacity 0.3s ease;
}

#contactForm .floating-label-form-group::not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #eeeeee;
}

#contactForm .floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}

#contactForm .floating-label-form-group-with-focus label {
  color: #0400bf;
}

#contactForm {
  border-top: 1px solid #ddd;
}

#contactForm textarea.form-control {
  height: auto;
}

#contactForm .form-control {
  display: block;
  width: 100%;
  color: #555;
}

#contactForm input:focus,
#contactForm input:active,
#contactForm textarea:focus,
#contactForm textarea:active {
  outline: none;
}

#contactForm .btn,
#contactForm .contact-form-button-submit {
  font-family: "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  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:hover,
#contactForm .btn-default:focus,
#contactForm .contact-form-button-submit:hover,
#contactForm .contact-form-button-submit:focus {
  background-color: #0400bf;
  border: 1px solid #0400bf;
  color: white;
}

.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: normal;
  line-height: 30px;
  margin-left: 0;
  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;
}
</style>

<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>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></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 type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1540013321535422342';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d1540013321535422342','//forumblogindo.com/','1540013321535422342');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', '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': '1540013321535422342', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>