Cara membuat halaman Contact Us di blog

Contact us atau contact form ini berfungsi untu mengcontact / menghubungi langsung admin blog. jadi jika pengunjung akan berkonsultasi dengan admin menjadi lebih mudah, karena blog kita terdapat halaman Contact.

Cara memberi halaman Contact ini sangat lah mudah. ikuti langkah-langkah di bawah ini ya sobat.

<script>
var blogId = ‘2550037457453799641’;//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><span style=”color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;”><i class=”fa fa-user”></i> Name </span></div>
<input class=’contact-form-name’ id=’ContactForm1_contact-form-name’ name=’name’ size=’30’ type=’text’ value=”/>
<div><span style=”color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;”><i class=”fa fa-envelope”></i> Email Address <span style=”color: #f56954; font-size: x-small; font-weight: bold;”>(Required)</span></span></div>
<input class=’contact-form-email’ id=’ContactForm1_contact-form-email’ name=’email’ size=’30’ type=’text’ value=”/>
<div><span style=”color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;”><i class=”fa fa-pencil-square-o”></i> Content <span style=”color: #f56954; font-size: x-small; font-weight: bold;”>(Required)</span></span></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>

• kemudian buka laman dan buat laman baru
  
• Ubah ke mode HTML dan Tempelkan script yang sudah kamu salin tadi
  
• Ganti blog id dengan blog id kamu. Blog id terdapat pada link blogger kamu. jika sudah publikasikan
  
  

   

• Setelah itu Salin link alamat dan masukkan ke link navigasi Contact
  
• maka akan tampil seperti berikut :

Jika kamu tidak mau ribet saya anjurkan tidak memodifikasinya lagi script yang saya berikan tadi tapi jika kamu ingin memodifnya lagi ubahlah script tadi sesuai dengan keinginanmu. 

halaman Contact tersebut sudah saya uji dan hasilnya sangta memuaskan. email dapat terkirim dengan sempurna ke email saya.

nah mudah kan ?. jika kamu masih bingung bisa ditanyakan di kolom komentar atau bisa juga di contact langsung sobat. tutorial selanjutnya saya akan buat halaman Disclaimer, Privacy Policy dan Terms of Service (TOS).

kenapa saya beda-bedakan tutorialnya ?

karena tutorial membuat halaman About, Contact, Sitemap,Disclaimer, Privacy Policy, dan Terms of Service (TOS) sangatlah panjang dan banyak memakan waktu. sekian tutorial kali ini. semoga bermanfaat.