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.

Cara Menambahkan Contact Form di Halaman Statis Blog

Pertama sahabat 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 instruksi CSS dibawah ini dan pastekan sempurna diatas instruksi </head>

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

Jika sudah memasang instruksi 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/AVvXsEiNP4p8bp9XfSIH7dU13Om8NgWIk0GlUAiezY8yJxf4Qc4txjqvk-gKvH3uHOxKBrhj_AVBOlZecaCLzo_UP0d6kQccPWVLcjHkik0RmVFkicxoeg7Muo1Sx8VYITivs1VmmuUZ1dp9BkpR/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 instruksi dibawah ini sempurna dibawah instruksi 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 sahabat 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 biar bermanfaat bagi kalian semua.