Cara Menciptakan Widget Contact Form Super Keren

Cara Membuat Widget Contact Form Super Keren - Lagi-lagi soal contact form nih sob, jika pada pos sebelumnya aku share cara memasang contact form di halaman statis kali aku akan share cara menciptakan contact yang keren banget deh pokoknya. Jujur saja aku gres lihat contact form buat blogspot yang sekeren ini. Saya ucapkan terima kasih buat kang ismet melalui blognya ww.bloggertut.com, yang telah menciptakan widget ini. Sebelum masuk ke cara pembuatan nya, silahkan teman lihat live demonya :

Demo 1  Demo 2

Widget contact form ini mempunyai dua pilihan warna, Dark background dan Light background, tinggal teman sesuaikan saja dengan warna blog sobat. Dan untuk penempatanya, akan kita letakkan di halaman single post, bukan pada sidebar. Baiklah, berikut ini cara pembuatanya :

Untuk membuatnya silahkan ikuti langkah mudahnya:

Langkah 1 : Tambahkan Widget Formulir Kontak

Seperti biasa caranya, namun klik dulu Gadget Lainnya, gres Tambahkan Widget Formulir Kontak.





Widget ini jangan dihapus, nantinya akan kita sembunyikan dengan CSS. Penghapusan widget akan menjadikan form tidak berfungsi.

Langkah 2 : Buat Halaman Baru

Simpan isyarat di bawah ini pada mode HTML jangan Compose :

<div id="contact_wrap"> <h3> Hubungi Kami</h3> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" 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="Pesan" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <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> </div>  <style type="text/css"> /* Menyembunyikan elemen dalam postingan */ #comments, #blog-pager, .breadcrumbs, .post-footer{display:none} </style>

Langkah 3 : Tambahkan CSS (Untuk merubah Tampilan)

Untuk mempercantik tampilan, dan sekaligus menyembunyikan Contact form pada Widget di sidebar, simpan CSS dibawah ini di atas ]]></b:skin>

Light Background

/* CSS Contact Form Light Theme by BloggerTut.com */ #ContactForm1{ display:none; } #contact_wrap { margin: auto; width: 321px; height: 380px; padding: 25px; border-radius: 1em; border-top:1px solid #dbdbdb; border-right:1px solid #b2b2b2; border-left:1px solid #dbdbdb; border-bottom:1px solid #9d9d9d; background-color:#cccccc; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc'); background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); box-shadow: 1px 1px 5px #ccc; } #contact_wrap h3{ color: #e8f3f9; font-family:Georgia; font-size: 20px; font-style:italic; font-weight:bold; margin: 0 -36px 20px -36px; padding: 12px; text-align: center; text-shadow: 2px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; position: relative; } #contact_wrap h3:before { content: ' '; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #333 transparent transparent transparent; } #contact_wrap h3:after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #333; } #ContactForm1_contact-form-name{ width: 270px;  height:auto; margin: 5px auto;  padding: 10px 10px 10px 40px; background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-DYovWJzTV0ulNbiU48TT3HGSU-IAgX57mO5upFU67EISMlUB0Ckx_GTfJK3N2aAzvSCuFeTyhBFKS6Qe-DvkM5X5feiVveanLovZ68EFOprKyiUn0t_rgCxrnMZoTUsF-g4eMDqc0OE/s1600/user.png)no-repeat 10px center;  color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-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; } #ContactForm1_contact-form-email{ width: 270px;  height:auto; margin: 5px auto;  padding: 10px 10px 10px 40px; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWYG4zB9dTwADi3BgbBCiDApgnlpzajLI2dDBH0M-kIlFe4GXlF5gKAdUVaQtFk3ygULGE7-w4wrBVhn0RkA06poHEGI2A9ADZIw2bROjQWy89dviXcmJsHSnH9d9m5UJmP1l6OIB0Fhc/s1600/pen.png)no-repeat 10px center;  color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-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; } #ContactForm1_contact-form-email-message{ width: 270px;  height: 150px;  margin: 5px auto;  padding: 10px 10px 10px 40px; font-family:Arial, sans-serif; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJYGJHXhjoq7iykN8nIO1BehIAS1Xd4rtzpNSOa-uR_KmUX7mk3-XTNHiHYGx5PcBySZrwh_5eb3dwWZUW17gNnq0kDdCpnqwOiWNzDqV4sFsXCOixsYwe5i-WpuSrLLXZTGWDlutQlug/s1600/msg2.png)no-repeat 10px 10px;  color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-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; } #ContactForm1_contact-form-submit { width: 95px;  height: 30px;  float: right;  color: #FFF; padding: 0;  cursor:pointer; margin: 25px 0 3px 0 0; background-color:#005a8a; border-radius:4px; text-shadow: 1px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; border:1px solid #194f6d; } #ContactForm1_contact-form-submit:hover { background:#4c9bc9; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 320px; margin-top:35px; }

Dark Background

/* CSS Contact Form Dark Theme by BloggerTut.com */ #ContactForm1{ display:none; }  #contact_wrap { margin: auto; width: 321px; height: 380px; padding: 25px; border-radius: 1em; border: #600 solid 1px; border-bottom: #420000 solid 1px; background-color:#983738; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738'); background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%); background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%); background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%); background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%); background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%); } #contact_wrap h3{ color: #fff; font-family:Georgia; font-size: 20px; font-style:italic; font-weight:bold; margin: 0 -36px 20px -36px; padding: 12px; text-align: center; text-shadow: 2px 0 0 #3b5931; -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111; -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111; box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111; background-color: #659156; position: relative; } #contact_wrap h3:before { content: ' '; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #000 transparent transparent transparent; } #contact_wrap h3:after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #000; } #ContactForm1_contact-form-name{ width: 270px;  height:auto; margin: 5px auto;  padding: 10px 10px 10px 40px; background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-DYovWJzTV0ulNbiU48TT3HGSU-IAgX57mO5upFU67EISMlUB0Ckx_GTfJK3N2aAzvSCuFeTyhBFKS6Qe-DvkM5X5feiVveanLovZ68EFOprKyiUn0t_rgCxrnMZoTUsF-g4eMDqc0OE/s1600/user.png)no-repeat 10px center;  color:#d2d2d2; border:1px solid #ce6d6e; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px; } #ContactForm1_contact-form-email{ width: 270px;  height:auto; margin: 5px auto;  padding: 10px 10px 10px 40px; background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWYG4zB9dTwADi3BgbBCiDApgnlpzajLI2dDBH0M-kIlFe4GXlF5gKAdUVaQtFk3ygULGE7-w4wrBVhn0RkA06poHEGI2A9ADZIw2bROjQWy89dviXcmJsHSnH9d9m5UJmP1l6OIB0Fhc/s1600/pen.png)no-repeat 10px center;  color:#d2d2d2; border:1px solid #ce6d6e; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px; } #ContactForm1_contact-form-email-message{ width: 270px;  height: 150px;  margin: 5px auto;  padding: 10px 10px 10px 40px; font-family:Arial, sans-serif; background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiavlcAS5pLOwf9hIj6W6pyLCPDBYPehyphenhyphenNJ1iZYSp4SEbVQqQJ93iPjLQRY_tg0PQUL-VJXC8KISvY60aklhyphenhyphenYXxYLHjPkLan3hxHDyRj7J6Id9_0TXm4SUqGXrXQDfCiIllRkIUWwUNU/s1600/msg.png)no-repeat 10px 10px;  color:#d2d2d2; border:1px solid #ce6d6e; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px; } #ContactForm1_contact-form-submit { width: 95px;  height: 30px;  float: right;  color: #FFF; padding: 0;  cursor:pointer; margin: 25px 0 3px 0 0; background-color:#005a8a; border-radius:4px; text-shadow: 1px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #659156; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#5d894d; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 320px; margin-top:35px; }

Silahkan teman pilih yang Light atau Dark untuk menyesuaikan dengan template sobat.
Baiklah, cukup sekian ya Cara Membuat Widget Contact Form Super Keren ini.
Semoga Bermanfaat

Source

Share this post