Cara Mudah Membuat Halaman Kontak Saya [contact us] di Blog Responsive

Oleh Qowim Musthofa February 19, 2022 Post a Comment

Sebagai blogger, tentu kurang lengkap jika tak memiliki halaman kontak. Oleh sebab itu membuat halaman kontak di blog sangat penting untuk diterapkan. Biasanya halaman kontak ditulis contact us atau sering kali dengan istilah kontak kami atau kontak saya.

halaman kontak blog

Apa itu Halaman Kontak

Contack Form atau halaman kontak di blog adalah sebuah halaman yang digunakan untuk berkomunikasi secara personal antara pengunjung dan pemilik blog. Biasanya halaman kontak disematkan bersebelahan dengan halaman disclaimer, about, sitemap atau daftar isi dan privacy policy.

Saya sudah menulis tutorial membuat halaman tersebut, silakan dibaca jika ingin mengetahui cara-caranya.

Intinya halaman kontak adalah halaman yang memudahkan komunikasi antara pengunjung dan pemilik blog. Ketika pengunjung mengisi contact form dan mengirimkannya di blog tersebut, maka isian tersebut masuk di kotak masuk email yang didaftarkan blog.

Meskipun tidak wajib, bagi saya halaman kontak sangat penting untuk di buat. Sebab hal itu juga bisa memberikan kesan kepada pengunjung bahwa blog yang dibuat memang memiliki niat yang profesional, bukan sekadar menjadi blog spam.

Apalagi, saya pernah membaca namun lupa dari mana, halaman kontak menjadi salah satu penilaian Google jika didaftarkan Google adsense.

Manfaat Halaman Kontak di Blog

Fungsi atau manfaat halaman kontak menurut saya pribadi ada tiga hal penting.

Menjaga privasi

Tidak semua pengunjung nyaman menuliskan komentar di postingan blog, jadi halaman kontak lebih memberikan kesan yang privat kepada pengunjung jika ada hal-hal yang ingin ditanyakan.

Bersifat Personal

Masih berkaitan dengan menjaga privasi, memang ada hal-hal yang bersifat personal di dalam postingan blog, terutama bagi yang memiliki jenis blog personal. Nah ini akan membantu pengunjung untuk berkomunikasi secara intens di email pemilik blog.

Bisa jadi juga, ada tawaran-tawaran kerja sama. Ini kan bisa menguntungkan blogger juga, kan?

Menghemat Waktu

Tidak semua komentar yang ada di postingan blog selalu dibalas secara cepat oleh pemilik blog. Mungkin disebabkan tidak semua komentar itu bertanya serius, banyak yang hanya guyonan atau justru kadang-kadang membully.

Nah, halaman kontak memberikan ruang kepada pemilik blog agar tidak buang-buang waktu dengan menanggapi semua komentar di blog.

Pemilik blog hanya membalas secara tepat dan cepat ketika ada yang bertanya lewat jaluk halaman kontak tersebut.

Cara Membuat Halaman Kontak

Sangat mudah membuat halaman kontak di blog. Ikuti saja cara di bawah ini dijamin work, deh.

Masuk ke halaman dashboard Blogspot
Buat halaman baru
Ubah tampilan HTML

Salin dan tempel kode 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','//qowim.net/','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>

Keterangan
- Ganti qowim.net yang warna hijau dengan alamat blog Anda.
- Ganti nomor 6512837267690936704 dengan ID blog Anda. Perhatikan ada 3 kode yang harus diganti.
- Jangan lupa parse terlebih dahulu kode html di atas di sini agar bisa terbaca dengan baik di html halaman.

Simpan dan Publikasikan

Hasilnya bisa dilihat di contoh halaman kontak saya di sini. Mudah, bukan? Silakan dipraktikkan, ya.

Penutup

Begitu saja, ya. Cara mudah membuat halaman kontak saya atau contact form di Blog secara responsive di semua jenis gawai. Semoga bermanfaat.

Qowim Musthofa Blogger yang tinggal di Bantul. Mengajar di Institut Ilmu al-Qur'an (IIQ) An-Nur Yogyakarta. Terima kasih telah berkunjung. Korespondensi melalui surel: [email protected]

QOWIM.NET

Ads #1