Cara Membuat Widget Floating Contact Form di Blogspot

Floating Contact Form widget for Blogger. Ini bermanfaat nantinya untuk kamu pemilik blog/web, misalnya ada yang ingin menghubungi kamu karena tertarik dengan blog kamu, misalnya dia ingin bertanya, ingin berbisnis denganmu atau seringkali juga jika ada yang ingin memasang iklan di blog kamu.

Sebenarnya bisa saja menampilkan email kepada pengunjung sebagai pilihan termudah untuk menghubungi admin blog, tapi berapa orang lebih memilih menyembunyikannya untuk menghindari spam dan hal-hal lain yang tidak diinginkan. Nah kamu bisa memasang contact form ini jika tidak ingin mempublikasikan email kamu.

Widget ini dibuat langsung dari widget default bawaan Blogspot jadi kamu tidak perlu mendaftar di web-web penyedia widget seperti ini. Widget ini letaknya disebelah kiri blog, jika cursor mouse pengunjung diarahkan maka widget ini akan muncul. Tampilannya kamu dapat melihat gambar dibawah ini atau demonya dibawah.

Memasang Widget Contact Form

Kita harus menambahkan widget contact form di widget blog. Caranya, buka halaman layout > Add gadget > Contact Form. Letakkan di sembarang tempat.

Kemudian cari kode seperti dibawah ini dan hapus pada beberapa bagian dan sisakan seperti dibawah ini ( tulisan “hapus bagian ini” itu dihapus juga yah )

  <b:widget id=’ContactForm1′ locked=’false’ title=’Contact Form’ type=’ContactForm’>
    <b:includable id=’main’>
Hapus bagian ini
</b:includable>
  </b:widget>
</b:section>

Nah sekarang simpan template anda.
Lanjutkan dengan menambahkan kode dibawah ini. Caranya : Tata Letak => Tambahkan Gadget => HTML/JavaScript=> Masukan kode dibawah ini:

<!– floating contact form–>
<style>
.form-parent {width:323px;height:auto;background: transparent url(‘https://3.bp.blogspot.com/-gvfHlb6JnY4/VPnwlkELmhI/AAAAAAAAKDU/9lgOeCd279E/s1600/contact-button.png’) no-repeat right 10px;position:fixed;top:150px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.form-parent:hover {left:0;}
.cc-float-form {background:-moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);color:#fafafa;padding:10px;    width:250px;border:2px solid #000;    border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#ContactForm1 {display:none;}
.contact-form-area {background: #222;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset;    -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}
#cc {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a {    color: #777;text-decoration:none;}
</style>
<div class=’form-parent’>
<form name=”contact-form” class=”cc-float-form”>
<p></p>
Name:<br />
<input class=”contact-form-area” id=”ContactForm1_contact-form-name” name=”name” size=”30″ value=”” type=”text” />
<p></p>
Email:
<span style=”color:red;”>*</span><br />
<input class=”contact-form-area” id=”ContactForm1_contact-form-email” name=”email” size=”30″ value=”” type=”text” />
<p></p>
Message: <span style=”color:red;”>*</span><br />
<textarea class=”contact-form-area”  id=”ContactForm1_contact-form-email-message” name=”email-message” cols=”25″ rows=”5″></textarea>
<p></p>
<input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” value=”Send” type=”button” />
<p></p>
<div style=”text-align: center; max-width: 222px; width: 100%”>
<p class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”></p>
<p class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”></p>
</div>
<div id=”cc”>
By <a href=”https://www.blog.anisuka.com/2022/04/floating-contact-form-widget-for-blogspot.html” target=”_blank”>GET IT</a>
</div>
</form>
</div><!–Parent–>
<!–All ends here–>

Simpan dan lihat hasilnya.

DEMO SHOW

Jika nanti ada yang menggunakan widget ini maka otomatis pesan akan dikirim ke email gmail Blogger anda. Oh ya, jika sobat tertarik dengan contact form yang lebih sederhana coba baca ini:

• Membuat contact form sederhana di blog.

Nah sekian postingan untuk saat ini semoga bermanfaat.

Diposkan oleh

Brando Mewo

You Might Also Like: