Membuat dan Memasang Contact Form Bawaan Blogger Pada Halaman Statis - Contact Form sangat berperan penting dalam sebuah blog, karena dengan adanya widget ini seorang pengunjung bisa langsung berkomunikasi dengan pemilik blog atau website secara pribadi melalui email ketika pengunjung mengalami kesulitan dalam memahami isi artikel blog.
Selain itu keberadaan Contact Form pada sebuah situs blog atau web. Bisa dijadikan sebagai indikator bahwa pemilik blog tersebut memiliki keseriusan dalam pengelolaan, sehingga dapat meningkatkan kepercayaan pengguna atau pengunjung terhadap apa yang ada di dalamnya. Alhasil bukan tidak mungkin seorang pengunjung yang dahulu pernah berkunjung akan kembali lagi berkunjung ke blog.
Pada dasarnya Contact Form atau Formulir Kontak di platform Blogger / Blogspot sudah tersedia dalam bentuk widget atau gadget yang bisa dipasang pada sidebar blog maupun footer blog. Namun, sepertinya sangat jarang sekali kita jumpai blog yang menggunakan widget Contact Form dan meletakkannya pada sidebar blog. Mereka lebih memilih untuk membuat dan memasang Contact Form pada Halaman Statis, walau harus menggunakan layanan penyedia kode gratis Contact Form dari pihak ketiga. Apabila anda ingin membuat dan memasang Contact Form dari pihak ketiga anda bisa menyimak artikel Cara Membuat Form Contact Us di Blog.
Nah pada tutorial kali ini saya akan menjabarkan dengan singkat bagaimana membuat dan memasang Contact Form bawaan blogger pada halaman statis blog atau website. Sehingga nanti ketika ada pengunjung menggunakan contact form tersebut, maka pesannya akan masuk ke Email admin blog langsung, yaitu email yang digunakan untuk membuat blog. Berikut tampilan Contact Form yang akan dibuat.
Cara Membuat dan Memasang Contact Form Bawaan Blogger atau Blogspot Pada Halaman Statis (StaticPage)
1. Pertama-tama silahkan masuk ke akun blogger anda. Apabila anda memiliki blog lebih dari satu, pilih blog yang ingin anda buatkan halaman contact form.
2. Pada menu blogger silahkan pilih menu Halaman (Page), kemudian klik Halaman baru.
3. Isi Judul halaman, contoh : Contact Us, Contact Me, Hubungi Kami, atau yang lainnya terserah anda.
4. Klik logo pensil yang terletak paling kiri pada tool editor halaman, kemudian pilih < > Tampilan HTML.
5. Copy Paste kode di bawah ini sebagai isi halaman
<style type="text/css">
.contact-form {
width: 600px;
max-width:100%;
margin-left:auto;
margin-right:auto;
padding: 0;
color: #000;
}
.contactf-name {
float: left;
width: 45%;
}
.contactf-email {
float: right;
width: 45%;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
padding: 20px 15px;
margin: 20px 0 30px 0;
}
.contact-form-button, .contact-form-button-submit {
width: 20%;
max-width: 20%;
height: 40px;
color: #fff;
background: #616363;
font-size: 0.875em;
border-radius: 5px;
}
.contact-form-button-submit {
-webkit-transition: background-color 100ms ease-out 100ms;
-moz-transition: background-color 100ms ease-out 100ms;
-o-transition: background-color 100ms ease-out 100ms;
transition: background-color 100ms ease-out 100ms;
}
.contact-form-button-submit:hover {
background: #373838;
}
</style>
<script>
var blogId = 'nomor-ID-blog';//Isi dengan nomor ID blog kamu
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan terkirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak terkirim, coba beberapa saat lagi.';
var contactFormEmptyMessageMsg ='Harap isi kotak pesan.';
var contactFormInvalidEmailMsg = 'Harap isi alamat email yang 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="contact-form">
<form name="contact-form">
<div class="contactf-name">
Nama : <br/>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Nama..."/></div>
<div class="contactf-email">
Email: <em>(harus diisi)</em><br/>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Email..."/></div>
<div style="clear:both"></div>
<div class="contactf-message">
Pesan: <em>(harus diisi)</em><br/>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="7" style="height: 149px; margin: 0px;" placeholder="Pesan..."></textarea></div>
<br />
<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>
</div>
Keterangan :
- Tulisan berwarna merah merupakan warna tombol, anda bisa mengubahnya dengan warna sesuai keinginan.
- Tulisan berwarna orange merupakan nomor blogID, ganti tulisan tersebut dengan nomor blogID anda. Untuk mengetahui nomor blogID, silahkan anda menuju ke dashboard blogger dan alihkan pandangan anda ke address bar seperti gambar berikut. Nomor yang ada di dalam kotak merupakan nomor blogID.
- Pada tulisan berwarna biru, anda bisa mengubahnya dengan kata-kata sesuai keinginan.
6. Setelah semuanya dirasa benar, silahkan klik Publish atau Publikasikan.
7. Kunjungi Contact Form yang sudah anda buat tadi, kemudian cobalah untuk berkirim pesan untuk mengetahui apakah contact form tersebut bisa bekerja dengan baik dan benar. Lalu cek inbox email anda.
Dengan membuat Contact Form bawaan blogger pada halaman statis, selain memudahkan pengunjung untuk berkomunikasi secara pribadi dengan pemilik blog tentunya juga akan membuat blog yang dimiliki tampil lebih keren.
Demikian tutorial sederhana mengenai bagaimana cara membuat dan memasang Contact Form bawaan blogger pada halaman statis. Semoga bermanfaat and Happy Blogging
