Cara Membuat Halaman Kontak (Contact Form) Responsif dan Keren

Suatu blog/website kurang lengkap rasanya bila tidak memiliki halaman kontak pada bagian navigasinya. Memang tidak harus memasang form kontak di web namun form kontak ini hendak mempermudah para wisatawan web kita buat hanya berbicara dengan kita sebagai owner web (admin).

Halaman kontak (contact form) sebagai pendukung kelengkapan pada navigasi blog/website yang umumnya posisinya disejajarkan ataupun berdekatan dengan halaman about, disclaimer, pribadi, tos serta partner. Halaman kontak (contact) mempunyai fungsi utama untuk menjalin komunikasi antara admin blog/website dengan visitor (pengunjung) blog/website. Halaman kontak yang telah dibuat pada umumnya sudah tersambung ataupun berhubungan langsung dengan email admin blog/website tersebut.

Jadi misalnya ada seorang visitor (pengunjung) yang mau berbicara dengan admin blog dapat langsung mengarah pada halaman kontak tersebut kemudian visitor cuma tinggal mengisi form yang terdiri dari nama, pesan serta email, lau klik kirim. Maka admin blog/website akan menerima pesan dari visitor yang telah mengisi contact form tersebut dengan via email pribadinya.

Pesan yang dikirim visitor (pengunjung ) berbagai macam, misalkan visitor  mengirim suatu anjuran serta kritik atas konten yang sudah kita posting dengan respon puas dan kurang puas.

Baca Juga: Cara Mebuat Sitemap (Daftar Isi) Otomatis Sesuai Label Pada Blog

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

Manfaat Halaman Kontak di Blog

Ada beberapa manfaat yang didapatkan dari visitor (pengunjung) blog/website jika mereka mengirim pesan melalui laman kontak yang telah terpasang di blog kita.

1. Menghemat Waktu

Waktu adalah uang menjadi slogan populer untuk para orang yang memiliki mobilitas tinggi dalam hidupnya. Lalu kaitannya apa dengan laman kontak? Alasannya karena laman kontak telah terkait dengan email pribadi pemilik blog jadi notifikasi pesan akan langsung ditampilkan dan peluang mendapatkan balasan menjadi lebih tinggi.

2. Privasi Terjaga

Mengirim pesan melalui halaman 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.

3. Bersifat Lebih Personal

Sebagian dari pengunjung terbiasa basa-basi dalam berkomentar di sebuah blog. Bahkan kebanyakan komentar cenderung disalahgunakan sebagai ajang bercandaan saja. Nah mengingat begitu pentingnya keberadaan halaman kontak di blog/website. Maka kali ini saya akan memberikan tutorial mudah tentang tentang cara membuat halaman kontak di Blogspot atau Blogger.

Baca Juga: Cara Membuat Kotak Script Dalam Postingan Blog/Website

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

1. Login ke akun Blogger anda terlebih dhulu.

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 6909367046512837267 dengan ID blog anda dan ganti url ngampus09.blogspot.com dengan url blog anda.

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

Bagaimana? Mudah bukan? Semoga anda berhasil membuat halaman kontak. Share juga pada yang lain. Terimakasih.

Share this post