Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Halaman Kontak Form di Blogspot (Responsive)

Cara Membuat Halaman Kontak (contact form) Pada Halaman Statis di Blogger




Cara Membuat Halaman Kontak di Blogger


Sebuah blog kurang lengkap rasanya jika tidak memiliki halaman kontak pada bagian navigasinya. Memang tidak wajib memasang form kontak di blog tetapi form kontak ini akan memudahkan para pengunjung blog kita untuk sekedar berkomunikasi dengan kita selaku pemilik blog (admin).

Laman kontak (contact form) dibuat  sebagai pendukung kelengkapan pada navigasi blog yang biasanya letaknya disejajarkan atau bersebelahan dengan halaman about, disclaimer, privasi, tos dan partner.

Baca Juga: Cara Membuat Halaman Partner di Blog

Laman kontak (contact) memang hadir dengan fungsi utama sebagai alat komunikasi antara pemilik dan pengunjung blog. Laman kontak yang dibuat di blog biasanya telah terhubung atau dikaitkan langsung dengan email pemilik blog tersebut.

Jadi misalnya ada pengunjung yang ingin berkomunikasi dengan pemilik blog bisa langsung menuju pada laman kontak tersebut lalu pengunjung hanya tinggal mengisi form yang terdiri dari nama, pesan dan email, lau klik kirim. Selanjutnya nantinya pemilik blog akan menerima pesan dari pengunjung tadi via email pribadinya.

Pesan yang dikirim pengunjung bisa bermacam-macam misalkan pengunjung mengirim sebuah saran dan kritik atas konten yang telah kita bagikan ke blog. Sifatnya bisa puas atau kurang puas.

Atau bisa saja pengirim pesan adalah salah satu pengunjung yang kebetulan profesinya sama dengan kita yaitu seorang Blogger. Mungkin saja mereka ingin membangun relasi dan kerjasama dengan blog kita.

Bagi saya sendiri keberadaan laman kontak menjadi menu wajib yang harus ada pada sebuah blog. Karena selain berfungsi untuk memudahkan berkomunikasi antara pemilik dan pengunjung blog. Laman kontak juga berfungsi sebagai alat evaluasi terhadap perkembangan blog terkait konten yang dibagikan selama ini.

Sehingga apabila saat pengunjung memberikan masukan berupa saran dan kritik dengan mengirimkan pesan via email. Maka dengan cepat saya akan mempertimbangkan dan memperbaharui sesuai dengan saran dan kritik yang telah dikirimkan.


Manfaat Halaman Kontak di Blog



Ada beberapa manfaat yang didapatkan pengunjung blog jika mereka mengirim pesan melalui laman kontak yang telah terpasang di blog kita.

Privasi Terjaga

Mengirim pesan melalui laman kontak diklaim sebagai cara yang lebih aman untuk menjaga privasi terkait identitas diri kita dibanding mengirim pesan melalui laman komentar. Jika kita sebagai pengunjung mengirimkan sebuah pesan melalui laman kontak di blog.

Maka publik tidak akan mengetahui apa isi pesan yang dikirimkan kecuali kita dan pemilik blog tersebut. Hal ini berbeda jika mengirimkan pesan lewat komentar tentu identitas diri dapat dilacak dengan mudah.

Menghemat Waktu

Waktu adalah uang menjadi slogan populer untuk para orang yang memiliki mobilitas tinggi dalam hidupnya. Lalu kaitannya apa dengan laman kontak?

Begini mengirimkan pesan via laman kontak di blog memiliki peluang dibalas lebih tinggi oleh pemilik blog dibanding berikirim pesan lewat komentar.

Alasannya karena laman kontak telah terkait dengan email pribadi pemilik blog jadi notifikasi pesan akan langsung ditampilkan dan peluang mendapatkan balasan menjadi lebih tinggi.

Bersifat Lebih Personal

Sebagian dari pengunjung terbiasa basa-basi dalam berkomentar di sebuah blog. Bahkan kebanyakan komentar cenderung disalahgunakan sebagai ajang bercandaan saja.

Sebenarnya ada sih pengunjung yang berkomentar berbobot sesuai dengan isi dan topik yang disajikan. Namun pengunjung yang berkarakter seperti itu persentasenya sangat sedikit dan jarang ditemui.

Lebih banyak pengunjung dengan karakter komentar yang ngawur dan tidak sejalur dengan topik yang diulas. Akibatnya terkadang pemilik blog enggan dan malas menanggapi komentar para pengunjung yang kesannya hanya bercanda dan kurang menghargai.

Disinilah kelebihan laman kontak tersebut sifat pesan yang dikirim melalui jalur email memiliki sifat yang lebih personal dan serius. Sehingga pemilik blog akan cepat juga membalas pesan yang dikirimkan.

Nah mengingat begitu pentingnya keberadaan laman kontak di blog. Maka kali ini saya akan memberikan tutorial mudah tentang cara membuat laman kontak di Blogspot atau Blogger.

Khususnya tutorial ini saya tujukan bagi pemula yang baru menginjakkan kakinya di dunia blogging yang keras :v. Bercanda kawan :v.

Ohya Tutorial pembuatan laman kontak yang akan dibagikan ini memiliki sifat responsive.

yang berarti jika pengunjung melakukan pengiriman pesan melalui laman kontak tersebut maka kita sebagai pemilik blog akan langsung menerima notifikasi pemberitahuan lewat email tanpa adanya delay.

Sehingga akan mempercepat juga kita untuk memberikan respon atau balasan. Oke langsung saja berikut tutorialnya.


Cara Membuat Halaman Kontak (contact form) Pada Halaman Statis di Blogger



1. Login ke akun Blogger kamu.

2. Lihat pada tab sebelah kiri Dasbor. Lalu klik Halaman > Buat Halaman Baru > Mode HTML (Bukan Compose).

3. Selanjutnya masukkan kode script di bawah ini:

<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'] = '6512837267690936704';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6512837267690936704','//droidide.com/','6512837267690936704');
_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': '6512837267690936704', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Catatan:
Ganti angka 6512837267690936704 dengan ID blog kamu dan ganti droidide.com Dengan blog kamu.

4. Beri nama halaman baru dengan nama "contact". Lalu simpan halaman. Selanjutnya  silakan lihat halaman kontak tersebut  dengan cara mengunjunginya.

Bagaimana? Mudah bukan? Semoga kamu berhasil membuat laman kontaknya. Share juga pada yang lain. Terimakasih.