CARA PASANG CONTACT US FORM DI PAGES BLOG - SISHAWA DESIGN
test banner

Hot

1.11.17

CARA PASANG CONTACT US FORM DI PAGES BLOG

Assalamualaikum....
Hari ni aku nak share cara untuk pasang 'Contact Us' form pada pages (halaman) blog dengan cara yang paling mudah. Sebenarnya Contact Us form ni boleh juga di letakakn di sidebar tapi kadangkala ada juga yang suka letak di pages sebabnya tak nak sidebar terlalu sarat dengan pelbagai fungsi dan widget.

Ini adalah salah satu contoh Contact Us form yang telah aku sediakan di halaman blog pelanggan dengan menggunakan kaedah yang akan aku beritahu di sini.

CARA-CARA :

- Login ke akaun blogger masing-masing dan terus klik pada bahagian Pages di dashboard. Kemudian klik pada NEW PAGE.


- Sekarang ni ualls cuma perlu letakkan nama untuk new pages tu dan klik pada bahagian HTML untuk memasukkan code di bawah. Just perlu copy dan paste je code tu ke dalam bahagian tersebut. Kemudian ualls tukarkan nombor ID seperti contoh yang telah aku berikan kat gambar di bawah ni ya.


 CODE
<script>
var blogId = ' LETAK NOMBOR ID DI SINI ';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

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>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' 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' type='button' value='Send' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; 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>


- Sekarang ni ubah sikit pada bahagian Comment yang ada di sebelah kanan ruangan post ualls tu.

- Lepas je ualls klik Publish, maknanya dah pun siap. Rupa form ni bergantung pada template blog masing-masing ye....

Selamat Mencuba !! :D

3 comments:

  1. ohhh,,barulah tau. sebelum ni ade jugak duk pikir macam mana lah buatnya. Tapi bila tengok coding..Ina nak pitam dahh. kikiki

    ReplyDelete
  2. bagusnya tutorial ni. bermanfaat untuk para blogger lagi2 yang full time blogger

    ReplyDelete