Cara Terbaru Menambahkan Formulir Kontak Blog

Cara Terbaru Menambahkan Formulir Kontak Blog

Rara
Kamis, 22 November 2018

kali ini saya memberi tutor Cara Terbaru Menambahkan Formulir Kontak Blog seperti blog saya ini yang mempunyai formulir kontak di bawah halaman


pertama, buka blogger tambahan widget formulir kontak, pada Tata letak > klik  >Tambahkan widget > lalu> widget formulir kontak< jika sudah klik simpan

jika sudah menambahkan widget formulir kontak , tahap selanjutnya nya

klik setelan lalu > Thema > Edit html < lalu tambahkan kode ini dan tambahkan sebelum kode </head>

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

setelah itu lalu tekan tombol simpan tema

tahap selanjutnya klik menu Halaman pada setelan blogger Klik > Halaman Baru dan tambahkan kode dibawah pada html tap,


dan jangan lupa edit menu Pilihan 


<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/AVvXsEi8bCGasgy3cvN3agg0oZxxNTx7I5TP2cZ_Mfn524Lf590j61bzhzT6YS5ceWGUmYwNkX7DfRcOk0uexky1zXUi4HxyvOziOxSOTjYRGqwu-ufd45QGEbukrO4KyYPquQrr2Ksoj4pcMgu7/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>

sekian dari saya gimana muda bukan,  Cara Terbaru Menambahkan Formulir Kontak Blog