Media Informasi Tentang Cara Praktis Ngeblog, Tutorial Blog, Monetisasi Blog,Tips Dan Trik Blogger, Template Blog, Adsense Dan Aplikasi Android

Breaking

January 21, 2019

Tutorial Blog Untuk Pemula | Cara Membuat Contact Form Pada Halaman Statis Blog

loading...

Sumber gambar : pixabay

Setelah berhasil membuat privacy policy dan disclaimer pada halaman statis blog,  maka sekarang kita akan coba membuat halaman contact form. 
Cara membuatnya sangat mudah , silahkan simak ulasannya berikut ini. 

Cara Membuat Contact form

1. Login ke dashboard blog anda. 



2. Klik halaman baru

3. Tampilan halaman baru


4. Copy dan Pastekan kode HTML berikut ini ke halaman baru tersebut. 

<script>
var blogId = '7806401170754494680';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
var contactFormInvalidEmailMsg = 'Alamat email harus valid.'

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>
<div class="Form">
<form name="contact-form">
<p></p>
Nama
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Pesan
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<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>

5. Lihat tampilan halaman baru yang sudah di pastekan kode HTML tersebut .


6. Ganti kode blogID dengan ID blog anda.  Untuk yang belum tahu cara mengetahui ID blog anda klik tautan LINK ini. 

7. Tampilan halaman setelah anda ganti ID blog dengan ID blog anda. 


8. Klik tombol Compose


9. Ketik judul halaman Contact,  lalu klik Publish .

10. Cek apakah anda sudah berhasil membuat contact form tadi dengan cara klik halaman pada menu dashboard.  Jika sudah ada di sana itu artinya anda telah berhasil membuatnya dengan benar. 


12. Cek tampilan halaman contact form,  maka tampilannya adalah seperti di bawah ini. 

Demikianlah cara membuat halaman contact form,  semoga berguna dan bermanfaat untuk anda. 
loading...

No comments:

Post a Comment