Cara Membuat Contact Form Di Halaman Statis


Contact form sangat diperlukan dalam sebuah website atau blog, karena fungsinya sebagai media penghubung antara pemilik blog atau website dengan para pengunjung blog yang ingin berhubungan , sehingga komunikasi dapat terjalin, nah sebenarnya secara default contact form ini sudah disediakan oleh blogger, tetapi jika sobat ingin memodifikasinya seperti yang ada pada blog ini, sobat dapat membuatnya dengan cara sebagai berikut:

Cara Membuat Contact Form Di Halaman Statis
Cara Membuat Contact Form Di Halaman Statis

Langkah Ke-1: Masuk ke menu Template>>Edit HTML Tambahkan Kode Css berikut sebelum kode </style> untuk menyembunyikan formulir kontak pada halaman postingan dan halaman muka.

 #ContactForm1 {display:none;} 

Simpan Template sobat

Langkah ke-2: Masuk >> Laman >> Klik Tambahkan Laman Baru >> HTML Mode lalu masukan kode  css dibawah ini

 <form name="contact-form">
<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></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,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;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:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;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 {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;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:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;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;}
</style> 

Klik Publikasikan



Langkah ke-3: Terakhir Kembali ke Laman Tata Letak, sobat harus menambah gadget Contact Form, lihat screenshot

Cara Membuat Contact Form Di Halaman Statis
Cara Membuat Contact Form Di Halaman Statis

Selesai ,dan selamat mencoba.
DEMO
Previous
Next Post »

12 komentar

Click here for komentar
Mangs Aduls
admin
14 Agustus 2015 23.36 ×

yang saya ko jadi tampil semuanya scrip yang saya pasang jadi tampil semua di kotak kontaknya. caranya gimana

Reply
avatar
Antonius SP
admin
14 Agustus 2015 23.43 ×

di html mode mang pasangnya jangan compose

Reply
avatar
Antonius SP
admin
14 Agustus 2015 23.47 ×

ato bisa jadi ada yang kurang waktu mengcopynya tadi jadi ada tags yg tidak tertutup atau tags yg tdk ada pembukanya. coba ulangi lagi mang... bisa kok.

Reply
avatar
Mangs Aduls
admin
15 Agustus 2015 00.37 ×

coba saya ulangi lagi

Reply
avatar
Mangs Aduls
admin
15 Agustus 2015 00.39 ×

nah sekarang sudah sama. terimakasih kang. tadi ada yang tidak tercopy

Reply
avatar
Antonius SP
admin
15 Agustus 2015 01.02 ×

mantappp mang... :-bd

Reply
avatar
Mangs Aduls
admin
18 Agustus 2015 19.33 ×

kang tadi ko ga pungsi ya

Reply
avatar
Antonius SP
admin
19 Agustus 2015 22.00 ×

Langkah ke-3 sudah diikutin blm mang....???

Reply
avatar
28 Agustus 2015 16.45 ×

Yang ini juga hasilnya bagus Kang, ijin nyoba ya Kang

Reply
avatar
Antonius SP
admin
31 Agustus 2015 08.57 ×

Silahkan mas... terimakasih sudah berkunjung.... :-d

Reply
avatar
TheCode-X
admin
12 September 2015 11.42 ×

very nice... thanks om....

Reply
avatar
Thanks for your comment
close