Buat sobat yang belum punya Contac Form pada kesempatan kali ini saya akan membagikan tutorialnya. Langsung saja sobat ikuti tutorilnya :
Masuk Blogger sobat pada dashboard pilih Laman dan buat Laman baru dan buat post di halaman statis, kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose di halaman Posini.
Cara di atas apabila contac form mau di simpan di halaman statis, kalau mau menerapkannya pada widget sobat ikuti langkah-langkahnya di bawah ini :
Masuk Blogger sobat pada dashboard pilih Tata Letak tambah gadget baru dan pilih Html Java Script isi judulnya dan masukan kode di atas pada kotak konten yang di sediakan, untuk lebih jelasnya lihat gambar di bawah.
Nah begitulah cara membuat contac form dari saya, mudah-mudahan tutorialnya dapat membantu sobat dan bermanfaat buat sobat. Terimakasih ,untuk demonya silahkan lihat pada tombol di bawah.
Masuk Blogger sobat pada dashboard pilih Laman dan buat Laman baru dan buat post di halaman statis, kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose di halaman Posini.
<form name="contact-form">
<span><i class="fa fa-pencil-square-o"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; 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">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;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:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>Sitemap
<span><i class="fa fa-pencil-square-o"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; 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">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;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:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>Sitemap
Cara di atas apabila contac form mau di simpan di halaman statis, kalau mau menerapkannya pada widget sobat ikuti langkah-langkahnya di bawah ini :
Masuk Blogger sobat pada dashboard pilih Tata Letak tambah gadget baru dan pilih Html Java Script isi judulnya dan masukan kode di atas pada kotak konten yang di sediakan, untuk lebih jelasnya lihat gambar di bawah.
Nah begitulah cara membuat contac form dari saya, mudah-mudahan tutorialnya dapat membantu sobat dan bermanfaat buat sobat. Terimakasih ,untuk demonya silahkan lihat pada tombol di bawah.
