Cara Memasang Contact Form Di Halaman Statis Blogger

Cara Memasang Contact Form Di Halaman Statis Blogger - Bosan dengan tampilan contact form bawaan (default)? Jika iya, kamu harus coba pasang contact form keren ini di blogger milikmu. Tampilan yang lebih moderen dan tentunya lebih keren. Langsung saja ikuti panduan saya tentang cara pasang contact form keren di blogger.

Tampilan Contact Form terbaru

Cara Memasang Contact Form Di Halaman Statis Blogger

1. Sangat mudah! Buka Blogger > Halaman > Tambah Halaman Baru > masuk ke HTML mode. Masukkan kode berikut ini.

<form name="contact-form"><div class='formcolumn1'><input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /><br />
</div><div class='formcolumn2'><input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /><br />
</div><div class='formcolumn3'><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea><br />
</div><div class='formcolumn4'><input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br />
</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><br />
<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:#f7f7f7;color:#111;border:1px solid transparent}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#f7f7f7;color:#111;border:1px solid transparent}
#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.1)}
#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/AVvXsEhqrtBULwJCDmk6KAG0RI4EZGIVHUo-fwpdlO69sVexDvh23Xv76eHwyxQWhf9J-lQQT1cX4bsUVnhf6Bvd-NVqDtvxu1NcqhMIO1sXk9fQ61gudKv6hH5nMlyG1jA4UDFhk8BKVcQ-O3K_/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>

SIMPAN!!

Silahkan lihat hasilnya di blog kamu.

Jika ingin melihat Demo, silahkan klik link dibawah ini!

DEMO