Membuat Kontak Form Ala Blog Belajar Berbagi

Selamat datang di blog belajar berbagi. pada kesempatan yang sangat langka ini, saya ingin berbagi kepada anda bagaimana caranya membuat kontak form atau contact us pada sebuah halaman blog atau widget blogger tanpa adanya unsur kode-kode js (javascript). jika anda sudah membuat kontak form dari pihak kedua sebaiknya hapus saja, karena hal yang sering saya temui adalah ditemukan iklan pada kontak form tersebut sehingga menjadikan blog kita loadingnya begitu lama. kontak form ini juga sebenarnya sangat berguna untuk anda yang suka mencari uang dari blogger (berbisnis online). jika tidak ada kontak form saat berbisnis online, ibaratnya seperti membuat blog tidak ada posting sama sekali (Hampa)

Kontak form pada blog belajar berbagi sendiri sangat penting dan berguna, karena berguna untuk saling bertanya jawab secara tertutup dan masih banyak lagi fungsi dari kontak form ini. sebagai contoh, berikut gambar kontak form ala blog belajar berbagi

Gambaran diatas adalah sebuah contoh kontak form yang saya ambil dari blog belajar berbagi.

Membuat kontak form pada halaman blog

Letak kontak form atau contact us pada blog belajar berbagi sengaja saya letakan di halaman postingan, dan tentunya anda juga bisa membuat kontak form kreasi sendiri seperti ini dengan syarat mengetahui ID profil blogger anda.

Cara mengetahui profil id blogger, sangatlah mudah, yaitu login ke blogger » klik buka daftar entri » pada adress bar itulah id profil anda » copy dan paste di notepad id tersebut

Memasukan script kontak form di halaman posting blog

Setelah anda save id profil blogger pada langkah diatas, sekarang anda copy dan paste kembali kode dibawah ini. taruh di notepad

<script>
var blogId = '1005901797365917320';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan Anda telah dikirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Silakan coba lagi nanti.';
var contactFormEmptyMessageMsg ='Kolom pesan tidak boleh kosong.';
var contactFormInvalidEmailMsg = 'Sebuah email yang valid diperlukan.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name="contact-form">
<div>
Nama Anda : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<div>
Email: <em>(wajib)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<div>
Pesan: <em>(wajib)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="height: 164px; margin: 0px; width: 242px;"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Keterangan: silahkan anda rubah tulisan yang bewarna merah, menjadi ID blogger anda yang sudah anda save di notepad tadi. sekarang langkah selanjutnya adalah

Login ke blogger anda » Laman » Laman baru » pastekan kode script tersebut di laman tersebut dengan metode HTML bukan COMPOSE. sebagai contoh seperti gambar berikut ini

Memasukan script kontak form ke halaman posting

Setelah anda masukan script tersebut, silahkan anda klik terbitkan atau publish.

Cara ini juga bisa anda taruh di widget blog anda (baca: Cara memasukan kode HTML di Widget)

Mudah-mudahan informasi cara membuat kontak form pada blog ini bisa bermanfaat untuk anda. terima kasih dan happy blogging!

Membuat Kontak Form Ala Blog Belajar Berbagi

Membuat kontak form pada halaman blog

Memasukan script kontak form di halaman posting blog

Anda Berada di Label Seputar Blogger ,Widget

1 comment:

Entri Populer

Arsip Blogger