Archive Pages Design$type=blogging

Cara Membuat Contact Form Di Halaman Statis

C ontact form sangat diperlukan dalam sebuah website atau blog, karena fungsinya sebagai media penghubung antara pemilik blog atau website ...


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

COMMENTS

BLOGGER: 12
Loading...
Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: Cara Membuat Contact Form Di Halaman Statis
Cara Membuat Contact Form Di Halaman Statis
http://3.bp.blogspot.com/-GuqkYlYXC88/VbcTPncRpwI/AAAAAAAAAG4/eczymI_UOHg/s400/email.jpg
http://3.bp.blogspot.com/-GuqkYlYXC88/VbcTPncRpwI/AAAAAAAAAG4/eczymI_UOHg/s72-c/email.jpg
Simple Tutorial
http://mirandahardy.blogspot.com/2015/07/cara-membuat-contact-form-di-halaman.html
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/07/cara-membuat-contact-form-di-halaman.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago