CARA MEMBUAT CONTACT FORM DI BLOG

Kalium ini aku bakal membagikan mengenai cara mengolah Voeling Form atau Voeling US pada blog.

Membentuk voeling form pada blog sangat gampang, gak perlu mendaftar melalui websait penyedia buat membentuk voeling form.

Kita bakal memakai Widget bawaan yang telah pada sediakan oleh pihak blogger

Memasang voeling form pada blog adalah satu dari contoh yang penting serta berperan seperti media korespondensi resmi serta personal

Baca Pula : MEMBUAT SITEMAP / DAFTAR ISI OTOMATIS DI BLOG

Membentuk Voeling Form

Membentuk Voeling Form atau Voeling US sangatlah penting buat blog ataupun si pembaca akibat apabila pembaca ingin penyampaikan contoh yang tidak ingin pada ketahui banyak orang atau memiliki saran serta kritikan dapat menghubungi melalui Voeling Form atau Voeling US.
Umumnya widget Voeling Form atau Voeling US bawaan blogger Cuma dapat pada pakai buat widget blog saja akan tetapi dengan tutorial yang bakal aku berikan kalium ini kita bakal membentuk Voeling Form pada halaman blog.

Memasang Widget Voeling Form Pada Blog

Pertama tama kita wajib memasang terlebih dahulu widget Voeling Form pada Blog.
Caranya silahkan anda klik rapikan lokasidangt;>Add Widgetdangt;>Voeling Form

Kemudian silahkan anda cari kode misalnya pada pada bawah ini duga duga serta hapus sampai sebagai misalnya pada bawah.
Awalnya kode tadi panjang sampai akhirnya sebagai misalnya pada bawah ini

Hapus bagian ini

</b:includabledangt;
</b:widgetdangt;
</b:sectiondangt;

Simpan template

Memang wajib memasang dulu widget Voeling Form kemudian menghapusnya separuh supaya Widget Voeling Formnya aktif

Baca Pula : CARA MENGHUBUNGKAN BLOG DENGAN MEDIA SOCIAL

Membentuk Halaman Voeling Form

Langkah selanjutnya silahkan anda untuk halaman baru serta pakai mode penulisan dalam mode HTML

Selanjutnya silahkan anda copy schenkkan kode pada bawah ini pada halaman yang bakal pada untuk

.contact-form-box{width:50%;margin:20px automaat;padding:0}
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:100%;height:automaat;margin:5px automaat 15px;padding:10px 10px 10px 30px;color:#777;position:relative;z-index:1;background:#ebebeb;border:1px solid #ccc;border-radius: 4px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.contact-form-names,.contact-form-emails{position:relative!important}
.contact-form-names:before{content:'f007';font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;color:#777;font-size:16px;padding-right:.5em;position:absolute;top:-2px;left:10px;z-index:2}
.contact-form-emails:before{content:'f0e0';font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;color:#777;font-size:16px;padding-right:.5em;position:absolute;top:-2px;left:10px;z-index:2}
#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}
#ContactForm1_contact-form-email-message{width:100%;height:100px;margin:5px automaat;padding:10px 10px 10px 30px;background:#ebebeb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRmZL7plZGZ46KiHOPli2ae2NslR1FvKPrrJ2uVynv_a0qOcr5a9FvGMnQx-LECKPIthjxZK4sw7HD4CNtncxfP1-0-tJ0s_0TZApAxurK0EPXVFB1lKzW3bYlesSffL1RHCwbKMMCDD8C/s1600/pencil.png) no-repeat 10px 10px;color:#777;font-family:Arial,sans-serif;border:1px solid #ccc;border-radius: 4px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#ContactForm1_contact-form-email-message:focus{background:#fffff7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRmZL7plZGZ46KiHOPli2ae2NslR1FvKPrrJ2uVynv_a0qOcr5a9FvGMnQx-LECKPIthjxZK4sw7HD4CNtncxfP1-0-tJ0s_0TZApAxurK0EPXVFB1lKzW3bYlesSffL1RHCwbKMMCDD8C/s1600/pencil.png) no-repeat 10px 10px;outline:0}
#ContactForm1_contact-form-submit{display:block;height:30px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#56585d;box-shadow:0 4px 0 0 #2d2f34;border:1px solid #434446;border-radius:4px;text-shadow:0 1px 0 #37383b;}
#ContactForm1_contact-form-submit:hover{background-color:#4d4f53}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;box-shadow:0 2px 0 0 #2d2f34}
#ContactForm1_contact-form-submit:focus{outline:0}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;}
.contact-form-button-submit{background-image:none!important;border-color:none!important}
@media screen and (max-width:768px){.contact-form-box{width:100%}
}

<br />
<div group="contact-form-box">
<div style="text-align: justify;">
<div style="text-align: center;">
Silahkan isi form pada bawah ini apabila anda memiliki saran, kritikan, ataupun masukan pada kita mengenai wetsartikel yang kita hidangkan pada blog inidanlt;/divdangt;
</divdangt;
<br />
<form name="contact-form">
<span group="contact-form-names">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /></spandangt;
<span group="contact-form-emails">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /></spandangt;
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textareadangt;<br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<br />
<div group="clear">
</divdangt;
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</divdangt;
<div id="ContactForm1_contact-form-success-message">
</divdangt;
</divdangt;
</formdangt;
</divdangt;

Tetap pada mode HTML langsung saja publikasikan serta anda dapat melihat hasilnya misalnya pada demo

Berbagi :