Cara Membuat Contact Form Simpel Pada Blog

NgeBlog Kuy! - Mungkin beberapa bagi para sobat blogger Contact Form sangatlah penting untuk mengkritik blog atau lain nya, Saya akan memberikan cara membuat contact form simpel dan berikut ini adalah screenshot dari laman Contact Saya.

Baca juga : Cara Mengetahui Kode HTML Dari Warna

Langkah-langkah cara membuatnya sebagai berikut.

• Buka dashboard blog
• Klik Laman dan klik Laman baru
• Copy kode di bawah ini

<div class="post-body entry-content" id="post-body-668156029595311882">
Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.<br />
<br />
<br />
<form id="kontak-arman" name="contact-form">
<br />
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><br />
<br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /><br />
<br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />  <br />
<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}
form{color:#666}
#kontak-arman{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;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}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style><br />
<div class="clear">
</div>
</div>

• Kemudian simpan laman

Jika semua langkah-langkah di atas sudah Anda ikuti, cobalah Anda melihat laman yang Anda barusan buat tadi. Sekian dari artikel Cara Membuat Contact Form Simpel Pada Blog semoga artikel ini sangat bermanfaat bagi kalian semua, Termiakasih sudah berkunjung ^^.

Tweet

Subscribe to receive free email updates: