Cara Membuat Laman Kontak (Contract Form) Blog di Blogger - KangdimsCOM

Halaman Contact Me di Blogspot - Sebuah blog belum lengkap jika tidak memiliki halaman kontak atau hubungi kami pada menu navigasinya. Memang bukan sebuah hal yang wajib namun ini berguna untuk sarana komunikasi antara pemilik blog dengan pengujung. 

Halaman kontak dibuat sebagai syarat untuk pendaftaran google adsense, layaknya halaman privacy policy, disclaimer, terms of use, maupun laman pendukung lainnya. 

Laman contact me memang hadir sebagai alat berkomunikasi antara pengujung dan pemilik blog. Halaman kontak biasanya langsung terhubung dengan alamat email yang dikaitkan pemilik blog tersebut. 

Sebagai contohnya ketika pengujung anda ingin berkomunikasi maka langsung menuju halaman kontak tersebut, lalu mengisi form yang terdiri dari nama, alamat email dan pesan lalu klik kirim. 

Selanjutnya pemilik blog akan menerima email dari blogger terkait pesan yang dikirimkan pengujung tadi. Pesan yang dikirim pengujung bisa bermacam-macam seperti bertanya, mengirim kritik atau saran maupun penawaran bisnis. 

Untuk saya pribadi hadirnya laman kontak pada blog merupakan hal yang wajib. Selain syarat pendaftaran google adsense dan sarana berkomunikasi, laman kontak berfungsi sebagai evaluasi diri terhadap kemajuan blog yang dikelola. 

Apabila pengujung mengirim kritik maupun saran melalui laman kontak, maka akan secara sigap untuk langsung mengevaluasi dan mempertimbangkan sesuai dengan kritik dan saran yang dikirim pengunjung. 

Keuntungan Halaman Kontak di Blog

Mungkin ada beberapa keuntungan atau manfaat  halaman kontak pada blog. Berikut akan saya bagikan kepada kalian. 

1. Privasi Terjaga

Perlu kalian ketahui bahwa mengirim pesan melalui email pada halaman kontak akan lebih baik untuk menjaga privasi, dari pada mengirim pesan melalui komentar. 

Contohnya kita sebagai pengunjung lalu mengirim pesan melalui laman kontak, maka publik tidak akan mengetahui isi dari pesan yang kita kirim kecuali kita dan pemilik blog tersebut. 

Hal tersebut berbeda dengan orang yang mengirim pesan lewat komentar, maka publik akan lebih mudah melacak identitas diri kita. 

2. Lebih Personal

Mungkin kita sebagai pemilik blog sangat resah dengan orang yang mengirim pesan yang bersifat spam atau hanya sebagai ajang bercandaan melalui kotak komentar.

Namun tidak semua pengujung mengirim pesan bersifat spam, ada juga pengujung yang mengirim pesan yang berbobot sesuai dengan isi topik konten artikel yang disajikan. 

Akan tetapi pengujung dengan karakter tersebut sangat jarang ditemui bahkan presentasenya sangat kecil. Lebih banyak pengujung dengan karakter komentar ngawur yang tidak sejalur dengan isi topik pembahasan. 

Hal tersebutlah yang membuat pemilik blog malas untuk menanggapi maupun membalasnya. Disinilah kelebihan laman kontak, pesan yang dikirim melalui email akan lebih terlihat personal atau serius. 

3. Menghemat Waktu

Mungkin kalian pernah mendengar slogan waktu adalah uang, slogan populer tersebut mungkin untuk orang yang memiliki mobilitas tinggi dalam hidupnya. Loh apa hubungannya dengan laman kontak kang? 

Tunggu saja mengirim pesan email melalui laman kontak, akan memiliki peluang tinggi untuk dibalas daripada mengirim pesan melalui komentar. 

Bukan karena tanpa alasan, karena laman kontak telah terikat dengan email pribadi pemilik blog, jadi ketika ada notifikasi akan langsung ditampilkan dan memiliki presentasi dibaca maupun dibalas lebih tinggi. 

Cara membuat halaman Kontak (Contact Me) pada halaman Stastis di blogspot 

Nah, mengingat begitu, hadirnya halaman kontak pada blog sangat penting. Maka dari itu saya akan membagikan cara untuk membuat halaman kontak (contact form) pada halaman statis di blogger. 

Tutorial ini dikhususkan bagi kalian yang baru terjun ke dunia blogging, tutorial membuat halaman kontak ini sudah saya desain agar responsif. Oke langsung saja berikut tutorialnya. 

1. Langkah Pertama : Login ke blog blogger kalian

2. Langkah Kedua : Masuk menu Halaman, lalu pilih ikon plus (+) yang ada di pojok bawah

3. Langkah ketiga : Silahkan isi judul dengan "Contact Me" atau Kontak dan pada isi silakan masukan kode dibawah ini (pastikan kalian pada mode HTML) 

<div class="enterblogger-logo">
<i class="material-icons md-48">verified_user</i></div>
<style scoped="scoped">
  .enterblogger-logo{text-align:center;}
  @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}
  .md-48{font-size: 100px;
    color: #546de5;
    padding: 10px;
    background: #dde3ff;
    border-radius: 100px;}
.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#546de5}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#546de5}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#546de5;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<form name="contact-form">
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
account_circle
</i> Name</label></div>
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
contact_mail
</i> Email</label></div>
<div class="enterblogger-input">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
message
</i> Message</label></div>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<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'] = 'xxxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dxxxxxxxxxxxxxxxxx','//droidide.com/','xxxxxxxxxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Catatan :
Silakan ganti xxxxxxxxxxxxxxxxx dengan ID Blog Blogger kalian

4. Langkah keempat : Silahkan simpan halaman, lalu bisa mengunjungi halaman tersebut dengan cara lihat halaman. 

Bagimana mudah bukan? Cara Membuat Halaman Kontak (Contact Form) di Blogger , semoga artikel kali ini bisa bermanfaat bagi kalian. Apabila ada pertanyaan seputar halaman kontak bisa tuliskan pada kolom komentar dibawah. 

Related Posts