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

Cara Membuat Contact Form - Halaman Kontak 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?blogID\x3d1540013321535422342','//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>

Untuk kode jquery yang saya marking di atas silahkan hapus jika di blog Anda sudah menggunakan jquery library.
Ganti kode 1540013321535422342 dengan ID blog Anda.
Ganti kode //forumblogindo.com/ dengan URL blog Anda.

Mudah bukan? 


Demikian sekilas informasi mengenai Cara Membuat Contact Form - Halaman Kontak Keren kayak Google. Semoga bermanfaat, salam.

2 Responses to "Cara Membuat Halaman Kontak - Contact Form Keren kayak Google"

  1. ko ga bisa ngirim pesan gan
    id blog sama urlnya udah diganti tapi kenapa ga bisa ngirim yah

    BalasHapus
    Balasan
    1. mungkin karena ada beberapa kode yang terhapus mas..atau karena memang beberapa script di atas sudah tidak bisa bekerja dgn maksimal lagi...silakan gunakan cara lain mas..si situs ini juga banyak ulasan mengenai cara membuat halaman kontak

      Hapus

Hanya sebagian kecil komentar yang disetujui. Jangan membuang waktu Anda jika hanya untuk melakukan "spam" di Forum Blogger Indonesia ini. So, komentar yang Anda tuliskan menunjukkan tingkat kualitas diri Anda.

Salam blogger

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel