Cara Membuat Contact Form Responsive dan Elegant di Blogspot

Cara Membuat Contact Form Responsive dan Elegant di Blogspot

Assalamu'alaikum, contact form adalah salah satu halaman yang sangat diperlukan dalam sebuah blog. contact form berfungsi sebagai halaman untuk pembaca mengirimkan pesan kepada email kita. Selain contact form, halaman lainnya yang sangat diperlukan dalam sebuah situs adalah halaman daftar isi, halaman pengenalan tentang blog dan juga privacy policy.

Baca juga : Cara membuat daftar isi responsive dan elegant di blogspot

Halaman-halaman seperti about, contact form, sitemap (daftar isi) dan privacy policy juga sangat berpengaruh untuk di terimanya dalam pengajuan Google Adsense. Jika ingin membaca lebih jauh tentang kriteria-kriteria penting suatu blog agar diterima Google Adsense, baca : Kriteria-kriteria penting suatu blog untuk diterima Google Adsense.

Banyak cara untuk membuat contact form, namun disini admin akan membagikan cara membuat contact form yang responsife dan elegant sehingga enak dipandang mata. Cara membuat contact form responsife dan elegant yang admin bagikan disini hanya untuk situs dengan platform blogspot.


Inilah cara membuat contact form responsife dan elegant di blogspot :

1. Buka platform > www.blogger.com dan login akun blogspot anda.

2. Pilih tab Halaman / Page di sidebar kiri tampilan platform blogspot.
Cara Membuat Contact Form Responsive dan Elegant di Blogspot
3. Pilih tab Halaman baru / New page
Cara Membuat Contact Form Responsive dan Elegant di Blogspot
4. Pilih tab HTML diatas area postingan halaman
Cara Membuat Contact Form Responsive dan Elegant di Blogspot
5. Copy-Paste source code dibawah ini :

Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan. <form id="kontak-arlina" name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> <div style="max-width: 100%; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <style scoped="" type="text/css"> #comments,.post_meta,#blog-pager{display:none} form{color:#666} form.payforpal{margin:auto;text-align:center} #kontak-arlina{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)} #ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease} #ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px} .contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px} .contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px} img.contact-form-cross{line-height:40px;margin-left:5px} .post-body input{width:initial} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style> <script type="text/javascript"> //<![CDATA[ if (window.jstiming) window.jstiming.load.tick('widgetJsBefore'); //]]> </script> <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'] = '8418194729603372315';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8418194729603372315','//glorif.com/','8418194729603372315'); _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': '8418194729603372315', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>

6. Ganti setiap ID 8418194729603372315 dengan ID blog anda yang bisa dilihat di searchbar platform blogspot anda. Untuk memudahkan pencarian ID diatas, anda dapat mencarinya dengan menekan tombol "Ctrl + F" kemudia ketikkan 3 angka ID diatas yaitu : 315

7. Ganti link glorif.com dengan link blog anda.

8. Setelah semua ID 8418194729603372315 diganti dengan ID blog anda dan link glorif.com dengan link blog anda, maka sekarang halaman contact form siap dipublikasikan.

Anda dapat mengubah kata-kata "Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan." dengan kata-kata yang anda inginkan.

Setelah halaman contact form dipublikasikan, maka coba tes mengirim pesan. Jika pesannya masuk ke email admin blog anda, maka contact form yang dibuat sudah siap digunakan pada situs yang anda kelola.

Itulah cara membuat halaman contact form responsife dan elegant pada platform blogspot. Semoga dapat dengan mudah mengikuti tutorial diatas. Jika ada yang kurang dipahami dapat bertanya di kolom komentar.

Source Code : arlinadezgn.com

Belum ada Komentar untuk "Cara Membuat Contact Form Responsive dan Elegant di Blogspot"

Posting Komentar

Terimakasih telah membaca artikel ini, semoga bermamfaat. Komentar yang membangun dan bersifat positif sangat diharapkan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel