Memodifikasi Success Message Contact Form Default Blogger

Memodifikasi Success Message Contact Form Default Blogger

Bola Hero Gawai

Memodifikasi Success Message Contact Form Default Blogger

Memodifikasi Success Message Contact Form Default Blogger
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.

Success Message Contact Form Default Blogger

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

1 Comment

Kang maaf saya agak keluar dari topik. Saya kan menerapkan tutorial akang tentang related post ala kompi ajaib. Saya mau tanya, bisa gak judul postnya muncul tanpa harus menggeser cursor pada arah gambar.
Lebih jelasnya ini blog saya kang iTapuih.com

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×