Cara Membuat Contact Form Di Halaman Statis - All Tutorial
News Update
Loading...

Senin, 27 Juli 2015

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

12 komentar

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

    BalasHapus
    Balasan
    1. di html mode mang pasangnya jangan compose

      Hapus
    2. 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.

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

    BalasHapus
  3. Yang ini juga hasilnya bagus Kang, ijin nyoba ya Kang

    BalasHapus
    Balasan
    1. Silahkan mas... terimakasih sudah berkunjung.... :-d

      Hapus


EmoticonEmoticon

Notification
This is just an example, you can fill it later with your own note.
Done