Cara Menambahkan Contact Form Di Halaman Statis Blog
Cara Menambahkan Contact Form di Halaman Statis Blog - Contact Form ini berperan penting bagi blog sobat, tidak ada Contact Form ini pengunjung akan kebingungan menghubungi sibat (pemilik blog) nah dengan menambah Contact Form pada halaman statis ini akan lebih memudah kan pengunjung misalkan nih ingin bertanya ataupun request artikel lainnya.
Baca Juga : Cara Memberikan Efek Shadow pada Gambar di CorelDraw
Pembuatan Contact Form ini sangat mudah, baiklah eksklusif saja ke caranya..
Cara Menambahkan Contact Form di Halaman Statis Blog
Pertama teman masuk terlebih dahulu ke Blogger > Tata Letak > Tambahkan Gadget > Formulir Kontak tambahkan widget Formulir Kontak terlebih dahulu.
Jika sudah menambahkan Formulir Kontak skip langkah diatas.
Kemudian masuk ke Tema > Edit HTML copy aba-aba CSS dibawah ini dan pastekan sempurna diatas aba-aba </head>
<style type='text/css'> #ContactForm1,#ContactForm1 br{display:none} </style>Jika sudah memasang aba-aba CSS diatas kini masuk ke halaman statisnya Halaman > Halaman Baru tambahkan kodenya dalam mode HTML (Bukan Compose)
Jangan lupa pada setelan halaman untuk hidangan setting pilihan terapkan menyerupai gambar diatas sob.
<form name="contact-form"> <div class='formcolumn1'> <input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /> </div> <div class='formcolumn2'> <input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /> </div> <div class='formcolumn3'> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea> </div> <div class='formcolumn4'> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /> </div> <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"> #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/AVvXsEhDicLuLE8ibYlamyPskFwpd4TKxzFlNIec2WW5HtotpPQN3lVBBoMeCv1T2HXxEpqFV0yg00FnGq1Tray_brFq41dXvw1HjoYVjW7HYvpB3FPokzFyrylj1wwRbYePCzAKO8PfeJLDn-g3/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>Tambahkan juga aba-aba dibawah ini sempurna dibawah aba-aba diatas.
<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.triksimple.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>Ganti yang bercetak warna merah dengan ID Blog teman masing - masing.
Baca Juga : Cara Membuat Table of Contents (TOC) pada Postingan Blog
Oke sekian yang dapat aku jelaskan tentang Cara Menambahkan Contact Form di Halaman Statis Blog Terima Kasih yang sduah berkunjung supaya bermanfaat bagi kalian semua.