Cara Setting Halaman Kontak Kami

Ikuti panduan dibawah ini untuk menambahkan halaman kontak kami dengan mudah pada template Median UI.

Persiapan

Hal pertama yang harus Anda lakukan adalah mendapatkan kode Id blog Anda, caranya sangat mudah pada laman blogger lihatlah dibagian address bar maka anda akan menemukan contoh link seperti dibawah ini;

https://www.blogger.com/blog/themes/1234567890000000000

bagian yang ditandai itu adalah kode id blog Anda, silahkan salin karena kode ini akan dibutuhkan saat membuat halaman kontak kami

Tutorial

Silahkan buat halaman baru, jangan lupa isi deskripsi penelusuran pada laman baru Anda

Pindah ke mode HTML lalu salin dan tempel kode dibawah ini pada isi laman Anda:

<div class='ContactForm' id='ContactForm1'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'>Nama Anda</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'>Email<span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'>Pesan<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Kirim' /></div>
    <div class='notif-area'>
      <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
      <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
  </form>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1234567890000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1234567890000000000','//www.namablog.com/','1234567890000000000');
_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': '1234567890000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

Ubah bagian yang ditandai pada kode diatas dengan id blog Anda, setidaknya ada tiga kode yang sama yang harus Anda ubah menjadi id blog Anda

Keterangan:

[ 1234567890000000000 ] : Id Blog Anda, ada 4 kali penulisan dalam kode diatas
[ www.namablog.com ] : Alamat blog Anda (tanpa http / https)
[ Nama Anda, Email, Pesan ] : Judul input di formulir kontak
[ Kirim ] : Teks pada tombol submit
[ Sending... ] : Teks saat mengirim pesan
[ Your message has been sent. ] : Teks pemberitahuan pesan terkirim
[ Message could not be sent. Please try again later. ] : Teks pemberitahuan pesan tidak terkirim
[ A valid email address is required. ] : Teks pemberitahuan email tidak valid
[ A Message field cannot be empty. ] : Teks pemberitahuan saat isi pesan kosong

Publish laman anda dan silahkan uji coba apakah widget kontak nya berhasil atau tidak

Jika diterapkan dengan benar seperti menambahkan id blog anda pada semua bagian yang sudah ditandai seharusnya tidak akan ada kesalahan.

Masalah tombol submit tidak berfungsi

Kami tidak menyadari masalah ini sampai ada pengguna yang melaporkan masalah ini, setelah kami periksa ternyata penyebab tidak berfungsinya tombol submit pada widget ContactForm adalah script ToC pada halaman statis:

<script>medianTOC();</script>

Jadi untuk mengatasi masalah ini Anda hanya perlu menyembunyikan Table of Contents pada halaman statis, tutorial lengkapnya silahkan menuju halaman dibawah ini:

Baca : Cara Menyembunyikan ToC pada halaman statis

Dokumentasi Fitur Preview