Ads Home1

Membuat Widget Contact Form Responsive dengan Style Flat Design di Blogger

http://www.xcodeplus.net/2018/01/membuat-widget-contact-form-responsive.html



Apa itu Contact Form ?

Umumnya Contact Form atau yang jika diterjemahkan ke dalam bahasa indonesia artinya yaitu Formulir Kontak, Widget ini berfungsi agar para surfers internet dapat berkomunikasi melalui email dengan penulis website/blog yang ia kunjungi.


Kenapa Kita Harus Memasang Contact Form di Blogger ?

Tujuan dari pemasangan widget formulir kontak adalah agar pengunjung suatu website/blog dapat menyampaikan sebuah pesan, baik itu pesan mengenai pertanyaan yang datang dari konten yang ia sedang baca. Dengan demikian, pada saat seorang pemilik website tersebut tidak sedang online maka informasi tersebut sangat berguna untuk pemilik website tersebut agar selalu dapat berinteraksi dengan customernya. Tentu ini sangat penting jika website yang Anda bangun merupakan website e-commerce ? 

Keuntungan lainnya yang kita dapat dari pemasangan widget ini adalah website/blog kita terlihat profesional, artinya Anda benar-benar serius dalam membangun sebuah website


Sudah Ada Contact Form dari Blogger, Kenapa Kita Harus Memasangnya yang Lain ? 

Anda benar, memang sudah ada Contact Form default dari blogger, kita hanya tinggal menambahkan widget tersebut dengan mudah. Tapi, Bagaimana dengan desainnya ? Apakah terlihat modern ? Bagi Anda yang mementingkan User Interface yang baik, tentu Anda akan buru-buru memberikan sentuhan ke widget tersebut. 

Tujuannya tidak lain agar tampilan website kita terlihat baik di mata pengunjung. Bagaimana bisa tampilan website kita yang keren dan menarik, akan tetapi hanya untuk contact form saja tampilannya terlihat biasa-biasa saja ini tentu tidak berimbang, bukan ?

Karna alasan tampilan contact form bawaan dari blogger terlihat tidak modern, saya akhirnya membuat contact form sendiri dengan tampilan flat design dan tentunya widget ini responsive. Disini saya membuatnya dengan HTML dan CSS berikut ini fitur yang di dapat dari contact tersebut:

1.  Terintregasinya dengan FontAwesome, tampilan yang diberikan menjadi mewah.
2.  Script CSS yang telah di Minify, sehingga tidak membuat blog loadnya lama. 
3.  Design yang Responsive
4. Contact Form dengan Night mode, menjadikan contact form ini menyesuaikan dengan template apapun.
5.  Flat Design yang menarik, pewarnaan yang diberikan terlihat smooth tidak mencolok.
6.  100% Free..
7.  Dan sebaginya..

Berikut di bawah ini tampilan dari contact form tersebut:

http://www.xcodeplus.net/2018/01/membuat-widget-contact-form-responsive.html
Gambar 1.1 - Tampilan Contact Form


Live demonya disini


Saya Suka, Bagaimana Saya Memasangnya pada Blog saya ?

Dalam pemasangannya tidaklah sulit, sangat mudah asalkan Anda benar-benar mengikuti langkah-langkahnya dengan baik. Oke pertama-tama hal yang harus Anda lakukan adalah melakukan backup template Anda terlebih dahulu ini bertujuan agar tidak ada terjadinya kemungkinan template yang Anda gunakan menjadi tidak beraturan.


Tahap 1. Backup Template Blogger Anda

http://www.xcodeplus.net/2018/01/membuat-widget-contact-form-responsive.html
Gambar 1.2 - Backup Template


Tahap 2. Masih di menu Tema lalu klik Edit HTML, pada form HTML tekan CTRL - F cari tag <head>

Tahap 3. Letakan script di bawah ini tepat di bawah tag <head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>


http://www.xcodeplus.net/2018/01/membuat-widget-contact-form-responsive.html
Gambar 1.3 - Menyisipkan script Bootstrap/FontAwesome

Catatan: Jika script di atas tidak dapat pasang pada template Anda, lakukan konversi/parse terlebih dahulu kode di atas disini.
   

Tahap 4. Masih di form HTML tekan CTRL - F cari kode tag </b:skin>

Tahap 5. Letakan script di bawah ini tepat di atas tag </b:skin>

#message-bg{background:#fffeef;color:#585858;padding:10px;text-align:center;border:1px solid #F3F3F3}div#xcodeplus_contact_form{padding:0;border-radius:0;color:#f2545b;font-size:15px;font-weight:700;background:0 0;font-family:sans-serif}div#xcodeplus_contact_form .wrap-me{margin:0 auto;display:block;padding:30px 20px;background:#212121;border-radius:10px;max-width:550px;width:100%!important;border-top:3px solid #e82727;border-left:2px solid #e82727;border-right:2px solid #e82727;border-bottom:4px solid #e82727;box-sizing:border-box}div#xcodeplus_contact_form .wrap-me:before{content:'\f086';position:absolute;font-family:FontAwesome;font-weight:700;margin-top:-75px;margin-left:-35px;left:50%;display:inline-block;font-size:48px;width:80px;height:80px;background:#f2545b;border-radius:50px;text-align:center;color:#fdfdfd;box-sizing:border-box;border:5px;line-height:70px}#ContactForm1_contact-form-email,#ContactForm1_contact-form-email:active,#ContactForm1_contact-form-email:hover,input#ContactForm1_contact-form-name{padding:6px;margin-top:6px!important;max-width:100%;height:45px;width:100%;color:#f2545b;border:1px solid #e82727;border-radius:10px;line-height:1em;min-height:31px;background:#181818;font-family:sans-serif;margin-bottom:15px}.contact-form-email-message,.contact-form-email-message:active,.contact-form-email-message:hover{padding:6px;margin-top:6px!important;max-width:100%;height:150px;width:100%;border:1px solid #e82727;border-radius:10px;color:#f2545b;line-height:1em;min-height:80px;background:#181818;font-family:sans-serif;margin-bottom:10px}#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{outline:0;background:#FFF!important;color:#f2545b;border-color:#ecebeb!important;transition:all .3s ease-in-out!important;margin-left:5px}.contact-form-button-submit:hover{color:#FFF;background:#fc0202!important}.contact-form-button-submit{background:#e82727;display:table;font-size:17px;margin:0!important;border-radius:10px!important;max-width:100%;width:100%;min-width:100%;height:40px;float:left;letter-spacing:.5px;font-family:sans-serif;font-weight:400;cursor:pointer;outline:0!important;color:#FFF;border:0 solid #fff!important;text-align:center;padding:0 0 0 15px;text-transform:capitalize;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out}.contact-form-button-submit.focus,.contact-form-button-submit:focus{border-color:#FFF;box-shadow:none!important}.contact-form-error-message-with-border .contact-form-success-message{background:#e70707;border:0 solid #fafafa;bottom:0;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#fff;font-size:12px;font-weight:700;padding-bottom:10px;line-height:19px;margin-left:0;opacity:1;position:static;text-align:center}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:active,.contact-form-button-submit.disabled:hover{opacity:.9}.contact-form-error-message-with-border,.contact-form-success-message-with-border{line-height:35px;font-size:20px;opacity:1;position:static;font-weight:400;text-align:center}.contact-form-error-message-with-border{background:#fdfdfd;border:1px solid #e82727;border-radius:0!important;bottom:0;box-shadow:none;color:##e82727;margin-left:0;height:35px;margin-top:45px}.contact-form-cross{height:14px;margin:5px;vertical-align:-8.5%;float:right;width:14px;border-radius:50px;border:0!important;cursor:pointer}.contact-form-success-message-with-border{background-color:#f2545b;border:1px solid #fff;border-radius:10px;color:#FFF;margin-left:0;height:35px;margin-top:45px}div#xcodeplus_contact_form span.email-bg,div#xcodeplus_contact_form span.name-bg{background-color:none;display:inline-block;max-width:550px;line-height:21px;width:100%;color:#f2545b;padding:3px 5px 3px 39px;margin:0;box-sizing:border-box;height:30px;border:0 solid #E4E0E0}div#xcodeplus_contact_form span.name-bg:before{content:'\f007';background-color:#f2545b}div#xcodeplus_contact_form span.email-bg:before{content:'\f0d5';background-color:#f2545b}div#xcodeplus_contact_form span.email-bg:before,div#xcodeplus_contact_form span.message-bg:before,div#xcodeplus_contact_form span.name-bg:before{font-family:FontAwesome;text-align:center;margin:-4px 0 0;font-weight:400;padding:0;line-height:27px;width:28px;height:28px;display:table;position:absolute;margin-left:-40px!important;border:0 solid rgba(0,0,0,.1);border-radius:100px;border-right:0!important;color:#FFF}div#xcodeplus_contact_form span.message-bg{background-color:none;display:inline-block;max-width:550px;height:30px;line-height:21px;width:100%;border:0 solid #E4E0E0;color:#f2545b;padding:3px 5px 3px 39px;box-sizing:border-box;margin:0 0 4px}div#xcodeplus_contact_form span.message-bg:before{content:'\f086';background-color:#f2545b;text-align:center}div#xcodeplus_contact_form span.send-bg{display:inline-block;border-radius:10px;background:#e82727;float:left;max-width:35%;height:40px;width:100%;min-width:30%;margin-top:15px;margin-left:22px;transition:all .4s ease-in-out!important}div#xcodeplus_contact_form span.send-bg::before{content:'\f1d8'}div#xcodeplus_contact_form span.clear-bg:before,div#xcodeplus_contact_form span.send-bg::before{font-family:FontAwesome;background-color:#181818;text-align:center;font-weight:400;margin-left:-90px;padding:0;line-height:40px;height:42px;width:45px;position:absolute;border:0 solid #fff;border-radius:10px 0 0 10px!important;display:inline-block;border-right:0!important;color:#FFF}div#xcodeplus_contact_form span.clear-bg{display:inline-block;float:none;margin-top:15px;height:40px;border-radius:10px!important;max-width:40%;width:100%;margin-left:70px}div#xcodeplus_contact_form span.clear-bg:before{content:'\f021';height:40px}input.contact-form-button.contact-form-button-submit.clear-button:hover{background-color:#fc0202!important;height:40px}div#xcodeplus_contact_form .clear-button{color:#FFF;border:0 solid #FFF!important;background-color:#e82727;border-radius:10px!important;max-width:90%;width:90%;min-width:90%;float:right;display:table;height:40px;text-align:center}div#ContactForm1{display:none!important}


http://www.xcodeplus.net/2018/01/membuat-widget-contact-form-responsive.html
Gambar 1.3 - Menyisipkan script CSS pada template blogger



Tahap 6. Sekarang pergi ke menu halaman, buatlah sebuah halaman baru

http://www.xcodeplus.net/2018/01/membuat-widget-contact-form-responsive.html
Gambar 1.4 - Membuat Halaman Baru



Tahap 7.  Setelah Anda membuat halaman baru, pada form halaman klik mode HTML dan tempatkan kode di bawah ini.

<div id="xcodeplus_contact_form">
    <div class="wrap-me">
    <form name="contact-form">
    <span class="name-bg">Nama </span><br />
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Masukan nama Anda disini..." size="30" type="text" value="" /><br />
    <br />
    <span class="email-bg">Email <span style="color: grey;"><b>*</b></span></span><br />
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Masukan email Anda disini..." size="30" type="text" value="" /><br />
    <br />
    <span class="message-bg">Pesan <span style="color: grey;"><b>*</b></span></span><br />
    <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Ketik pesan Anda disini..." rows="5"></textarea><br />
    <br />
    <span class="send-bg"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /></span>
    <span class="clear-bg"><input class="contact-form-button contact-form-button-submit clear-button" type="reset" value="Batal" /></span>
<br />
<div style="float:right;margin-right:35%; margin-top:10%;font-size:12px;font-family:sans-serif;"><a href="http://www.xcodeplus.net/" target="_blank">Design by xcodeplus.net</a></div>
    <br />
    <div style="max-width: 100%; text-align: center; width: 100%;">
    <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
    </div>
    <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
    </div>
    </div>
    <br/>
    </form>
    </div>
    </div>


http://www.xcodeplus.net/2018/01/membuat-widget-contact-form-responsive.html
Gambar 1.5 - Meletakan script kode HTML


Tahap 8. Setelah semuanya dilakukan dengan benar, silakan klik Publikasikan.

Oke semuanya telah Anda lakukan, jika berhasil tampilan yang diberikan seperti pada contact form di atas.

Bagaimana Cara Menggunakan Contact Form ini ?

Dalam menggunakan Contact Form ini tidaklah berbeda sama saja seperti Contact Form default milik blogger. Berikut di bawah ini beberapa gambar yang menunjukan penggunaan widget tersebut.


Pada tahap ini kita akan mengirimkan sebuah email kepada seseorang, melalui contact form yang kita buat di blogger, pesan yang kita sampaikan yaitu "Hello World!".


http://www.xcodeplus.net/2018/01/membuat-widget-contact-form-responsive.html
Gambar 1.6 - Mengirimkan pesan melalui Widget Contact Form di blogger


Di bawah ini gambar yang menunjukan proses berhasilnya pengiriman email melalui blogger.


http://www.xcodeplus.net/2018/01/membuat-widget-contact-form-responsive.html
Gambar 1.7 - Proses berhasilnya pesan yang dikirim

Terlihat pada gambar di atas, adanya keterangan yang menunjukan bahwa email yang dikirim melalui gadget formulir kontak yang yang ada di blogger. Pesan "Hello World!" ini pun sukses diterima tanpa adanya kesalahan. ini membuktikan bahwa widget yang kita pasang bekerja dengan semestinya.
 
Catatan:
Mungkin bisa saja ada seseorang pengujung yang jahil dalam mengirimkan email berupa spam ke email Anda. tapi jangan khawatir lakukan pengaturan spam di penganturan email Anda. Bagi Anda yang menggunakan email gratis seperti gmail, google telah membuat pengaturan spam yang baik secara otomatis jadi Anda tidak usah khawatir tentang itu. 

Oke well, semoga apa yang saya buat kali ini bermanfaat untuk Anda. Dan saya sangat berterimakasih kepada Anda yang telah menghargai credits yang Ada dengan tidak menghapusnya maupun menggantinya. Enjoy!.





C# (dibaca: C Sharp) merupakan bahasa pemrograman generasi baru yang mewah, kaya akan fitur, dan dapat digunakan untuk membuat beraneka raga program/aplikasi di berbagai bidang. C# mendukung beberapa paradigma pemrograman: imperatif, deklaratif, fungsional, serta pemrograman berorientasi objek. C# termasuk dalam keluarga C, dan fitur-fiturnya banyak diadopsi dari Java dan C++. C# menggunakan pustaka (library) yang terdapat dalam .NET Framework, kelengkapan di dalam pustaka .NET Framework menjadikan proses pengembangan program/aplikasi menggunakan C# relatif lebih mudah dan cepat jika dibandingkan dengan C++ dan Java.


No comments:

Kami menerima masukan dari anda jika memang ada pembahasan yang keliru dan kami sangat senang jika anda dapat berkontribusi untuk menyempurnakan postingan kami. Anda dapat mengirimkan email ke : hari18.muhammad@gmail.com

Jika postingan ini bermanfaat jangan lupa share postingan ini. Kami sangat merekomendasikan untuk anda yang membutuhkan informasi tentang computer stuff silakan subscribe blog kami dapatkan informasi terupdate dari kami secara gratiss. Terimakasih!

Powered by Blogger.