Cara Menambahkan Formulir Kontak Responsive di Blogspot

Kali ini saya akan memberikan tutorial bagaimana cara membuat dan menambahkan formulir kontak Responsive di blog - Contact Form.

Untuk membuat halaman Contact Form di blog, kita membuatnya di halaman statis (Static Page).

Static Page merupakan laman khusus untuk membuat dan menampilkan konten mengenai blog; misalnya Tentang Saya (About), Kontak (Contact Us), Terms of Service, Daftar Isi (Sitemap), dan banyak lagi.

Cara Menambahkan Formulir Kontak Responsive di Blogspot

Blogger > Tata Letak (Layout) > Tambahkan Widget (Add a Widget)

Selanjutnya masuk ke Gadget Lainnya, klik ikon Plus (+), dan pilih Formulir Kontak, terakhir Simpan.

Masuk ke Tema > Edit HTML > Simpan kode CSS di bawah ini, di atas kode </head>

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

Selanjutnya, masuk ke menu Halaman, klik tombol Halaman Baru (New Page), simpan kode di bawah ini pada mode ketik HTML.

<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU5ibWKA-No1-UupxSSqPT9b2g39hrJIb8SKy8TvT7_2ZalErr6FoHEP78LwSCYUDt32v2-ymTDHttEA5ZZwrQJA1FAJGfs49_eXzIlvnBSrdwcogfLuK0NJwQV8rayi3CPOtfeHmDg97J/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>

Catatan: Baiknya isi judul terlebih dahulu, misalnya Kontak Kami atau Kontak saja, baru mengisi kode di atas pada mode ketik HTML.

Sebelum dipublikasikan, setting lagi pada komentar pembaca. Tampilannya seperti ini:

Simpan dan lihat hasilnya kembali pada Static Page yang baru dibuat!

Kode Tambahan Apabila Error

Apabila widget Contact Form tidak tampil sebagaimana mestinya, coba tambahkan kode di bawah ini di atas kode pada langkah sebelumnya.

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056');
_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': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Perhatikan: Cari dan ganti semua URL dan ID Blog yang ada pada kode di atas dengan URL dan ID Blog kepemilikan dari blog kalian masing-masing.

ID Blog ada di bagian Address Bar pada Browser yang kalian gunakan. Itulah cara menambahkan formulir kontak Responsive di blog - Contact Form.

Sumber: https://www.arlinadzgn.com/2018/05/cara-terbaru-memasang-formulir-kontak-di-blog.html