Cara Membuat, Memasang, dan Modifikasi Contact Form (Contact Us) Responsive di Blogger
Contact Us (Kontak Kami) atau Formulir Kontak adalah salah satu media komunikasi antara anda sebagai penulis online (blogger) dengan para pembaca.
Formulir kontak seringkali digunakan sebagai media komunikasi yang bersifat privasi antara anda dengan orang lain.
Contohnya, buat saja halaman statis, masukkan saja kata-kata seperti, “hubungi saya via email: algazaliofficial@gmail.com“, sudah bisa banget.
Nah, kalau dipikir-pikir, cara diatas kan tergolong ribet, tidak efisien, memakan banyak waktu. Untuk menghemat waktu, dan agar User Friendly, semuanya kita jadikan menjadi satu halaman.
Disitu tempat pengisian nama, input alamat email, dan komentar yang akan dikirimkan; dan akan diterima langsung oleh anda, tepat di kotak masuk, bagian sosial dari email anda.
Cek Juga: Cara Membuat Sticky Widget Responsive di Blog
Cara Membuat Contact Form (Contact Us) Responsive di Blogger
Yang uniknya lagi, Formulir Kontak ini sudah di dukung dengan gaya Responsive dan Mobile Friendly, artinya adaptif terhadap berbagai tampilan smartphone.
1. Login to Blogger
2. Static Page > Edit / New Page
3. Copas kode berikut:
<form id=”kontak-seokiller” name=”contact-form”>
<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-seokiller{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’] = ‘8022617659375683714’;BLOG_attachCsiOnload(”); }_WidgetManager._Init(‘//www.blogger.com/rearrange?blogIDx3d8022617659375683714‘,’//tipsseokiller.blogspot.com/’,’8022617659375683714‘);
_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’: ‘8022617659375683714‘, ‘contactFormNameMsg’: ‘Name’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Message’, ‘contactFormSendMsg’: ‘Send’, ‘submitUrl’: ‘https://www.blogger.com/contact-form.do’}, ‘displayModeFull’));
//]]>
</script>
Cek Juga: Cara Menyembunyikan Iklan Adsense ketika Search Form Digunakan
Silakan ubah dan sesuaikan tulisan yang saya warna-merahkan pada kode diatas, dengan kepemilikan atas nama blog anda sendiri. Semoga berguna.
Terimakasih telah membaca di Aopok.com, semoga bermanfaat mulai lah buat iklan gratis di Iklans.com dan lihat juga di situs berkualitas dan paling populer Piool.com, peluang bisnis online Topbisnisonline.com dan join di komunitas Topoin.com.
