Memodifikasi Success Message Contact Form Default Blogger

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

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


Atau untuk demonya silahkan coba contact form Kompi Ajaib.

DEMO

Namun hal ini hanya dapat dilakukan untuk blog yang memakai kode &lt;!--</body>--&gt;&lt;/body&gt; untuk mengganti isyarat </body> untuk menyembunyikan blogger.js dan dapat juga untuk DI SINI.

Nah kalau blog Anda memakai contact form Blogger tersebut, Anda dapat menciptakan atau memodifikasi success message menjadi popup menyerupai pada demo, silahkan ikuti langkahnya di bawah ini.

Silahkan perhatikan pada javascript contact form blog Anda yang menyerupai 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 isyarat di atas dengan isyarat 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 pribadi 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 isyarat yang saya tandai silahkan sesuaikan dengan bahasa Anda sendiri untuk keterangan suplemen 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 memakai Font Awesome sebab ini memakai ikon font untuk gambar jempolnya.

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

Selamat mencoba.
Sumber https://www.kompiajaib.com/

Share this post