Memodifikasi Success Message Contact Form Default Blogger

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/05/2016

Setelah kemarin kita berhasil membuat popup success message untuk form Formspree, maka kini kita akan membuat hal yang sama untuk contact form default Blogger.

Success message yang biasanya muncul di bawah form setelah pengguna klik tombol Submit form, kini akan kita buat menjadi popup success message seperti pada animasi gif di bawah ini.


Atau untuk demonya silahkan coba contact form Kompi Ajaib.


Namun hal ini hanya bisa dilakukan untuk blog yang menggunakan kode &lt;!--</body>--&gt;&lt;/body&gt; untuk mengganti kode </body> untuk menyembunyikan blogger.js dan bisa juga untuk menjebak iklan pihak ketiga.

Untuk contact form Blogger untuk blog yang menyembunyikan blogger.js sendiri sudah pernah saya posting dan bisa Anda simak DI SINI.

Nah jika blog Anda menggunakan contact form Blogger tersebut, Anda bisa membuat atau memodifikasi success message menjadi popup seperti pada demo, silahkan ikuti langkahnya di bawah ini.

Silahkan perhatikan pada javascript contact form blog Anda yang seperti di bawah ini.

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '2583045784323695327', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

Silahkan ganti kode di atas dengan kode di bawah ini.

_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class="contact_layout"><div class="contact_message"><b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div></div><br/>", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "<data:blog.blogId/>", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));

Untuk kode yang saya tandai silahkan sesuaikan dengan bahasa Anda sendiri untuk keterangan tambahan pada success message contact form.

Kemudian tambahkan CSS di bawah ini pada CSS contact form blog Anda.

.contact_layout{text-align: center; position: fixed; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.8);z-index:99999}

.contact_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align: center; color:#333; position: absolute; top: 10%; left: 50%;margin-left:-25%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

.contact_message:before{content:"\f164";font-family:FontAwesome;font-weight:500;font-size:30px;display:block;margin-bottom:10px;}

@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important;}

}

Dan pastikan blog Anda sudah menggunakan Font Awesome karena ini menggunakan ikon font untuk gambar jempolnya.

Sekarang silahkan coba contact form blog Anda. Tambah keren, bukan?

Selamat mencoba.