Breaking News
Loading...

April 30, 2016

Cara Memasang Formulir Kontak di Halaman Statis

Widget formulir kontak untuk blogger memang sangat penting, karena dengan widget ini pengunjung bisa bertanya dan memberikan saran untuk blog anda. Mungkin semua sudah tahu apa fungsi dari widget ini, jadi saya tidak perlu lagi untuk menjelaskannya.

Cara Memasang Formulir Kontak di Halaman Statis

Ya, yang pasti jika widget ini kita letakkan pada sidebar atau samping blog, hal itu akan membuat blog anda menjadi penuh dan juga akan memperlambat loading blog. Lalu bagaimana cara meletakkan widget formulir kontak ini pada halaman statis? Mari ikuti tutorial ini.

Cara Memasang Formulir Kontak di Halaman Statis

1. Silakan anda pasang terlebih dahulu Widget ini pada sidebar blog anda, atau terserah mau diletakkan dimana saja.

Cara Memasang Formulir Kontak di Halaman Statis

2. Cari kode ]]></b:skin> atau </style> tambahkan kode dibawah ini sebelum kode tersebut

#ContactForm1 {display:none;}

Simpan

3. Jika sudah kita langsung menuju menu Laman dan buat Laman Baru dan masukkan kode dibawah ini pada tab HTML bukan Compose

<form name="contact-form">
Name
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<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 {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;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:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;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>

4. Agar tampilannya tidak berantakan silahkan lihat dibagian sebelah kanan, ada bacaan Pilihan, dan ganti menjadi Tekan "Enter" untuk baris baru

Cara Memasang Formulir Kontak di Halaman Statis

5. Selesai, setelah itu coba anda lihat hasilnya.

Bagaimana? apakah masih bingung? jika ya.. Silakan anda tanyakan lagi kepada saya pada kolom komentar yang telah disediakan. Semoga tutorial ini bermanfaat untuk anda, terima kasih telah berkunjung.

Artikel Terkait

Blog ini dibuat atas ketertarikan dan minat kami dengan website dan juga sebagai media sosial berbagi Info Menarik serta Hiburan lainnya.