Cara Membuat Contact Form Keren Seperti Arlina Design

Cara Membuat Contact Form Keren Seperti Arlina Design

Jika kalian ingin mendaftarkan blog kalian dengan google adsense maka  kalian harus membuat menu seperti sitemap, privacy policy, tos dan terakhir adalah contact form, tapi artikel saya kali ini bukan membahas tentang cara mendaftar blog ke google adsense, melainkan cara membuat contact form yang keren seperti Arlina Design.

Selain digunakan untuk mendaftarkan blog ke google adsense, contact form juga penting untuk berinteraksi dengan orang yang berkunjung ke blog kita. Jadi jika kita tidak membalas komentar dia, mungkin dia akan menghubungi kita dengan lewat contact form.

Ok jadi bagaimana cara membuat menu contact form? Silahkan ikuti cara-cara dibawah ini dengan baik dan benar.

Cara Membuat Contact Form Seperti Arlina Design

Pertama-tama kita masuk ke menu tata letak pada blog kita, dan pilih gadget lalu pilih Formulir Kontak. Setelah itu kita masuk ke menu Tema dan edit HTML, lalu cari kode ini "<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' visible='true'>" dan hapus seperti berikut ini.

 <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' visible='true'>
    <b:includable id='main'>
HAPUS BAGIAN YANG INI
</b:includable>
  </b:widget>
</b:section-contents>

Setalah langkah diatas selesai, maka langkah selanjutnya kita membuat laman untuk contact form itu seperti berikut.

• Masuk pada dasbor blog, klik Laman/Halaman dan buat laman baru
• Setelah itu buat judul laman terserah kalian mau seperti apa, dan publikasian terlebih dulu.
• Lalu edit laman yang tadi, dan pilih mode HTML.
• Copy dan pastekan kode dibawah ini pada lama yang tadi (Ingat menggunakan mode HTML).

<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<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-arlina{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>

Bagaimana, cara membuat contact form seperti Arlina Design mudah bukan, contact form sayapun juga sama seperti itu kalian bisa lihat sendiri.