Dalam sebuah blog, sangat diharuskan menyediakan tempat untuk menyampaikan pesan. Ini bertujuan agar si pembaca dapat menyampaikan pesan tentang pendapatnya kepada si pemiliki blog. Baik pesan yang berisi mengenai kritik, saran atau hal lainnya.
Yang dimaksud dari menyediakan tempat untuk menyampaikan pesan dari pembaca kepada pemiliki blog adalah memasang formulir kontak di blog. Bentuk dari formulir kontak blog ada banyak macamnya, ada formulir kontak blog yang diletakkan pada halaman statis seperti pada blog ini. Akan tetapi ada juga yang diletakan di bagian pojok kanan/kiri bawah di halaman blog. Formulir tersebut dapat dimunculkan atau disembunyikan.
Pada intinya, formulir kontak adalah salah satu fasilitas yang diberikan oleh pihak blogger untuk menghubungkan antara si pembaca dengan si pemilik blog. Cara menggunakannyapun cukup mudah, pembaca hanya perlu menuliskan nama, alamat e-mail dan pesan yang ingin disampaikan.
Formulir kontak blog responsive di halaman statis
 |
| membuat dan memasang formulir kontak responsive di halaman statis blog |
Cara membuat dan memasang widget formulir kontak blog di halaman statis
Yang harus dilakukan pertama kali adalah masukkan terlebih dahulu widget formulir kontak yang terdapat didalam tata letak > tambahkan gadget > gadget lainnya, kemudian Anda pilih Formulir Kontak.
Kemudian pilih menu tema dan klik edit html.
Masukkan kode-kode berikut ini
Masukkan kode yang ada dibawah ini tepat sebelum kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Kemudian, masukkan kode dibawah ini tepat sebelum kode ]]></b:skin>
#ContactForm1 {
display: none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
width: 300px;
height: auto;
margin: 10px auto;
padding: 10px;
background: #fdfdfd;
color: #666;
border: 1px dashed #ddd;
transition: all 0.5s ease-in-out;
}
#ContactForm1_contact-form-email-message {
width: 450px;
height: 175px;
margin: 10px auto;
padding: 10px;
background: #fdfdfd;
color: #666;
font-family: 'Roboto',sans-serif;
border: 1px dashed #ddd;
transition: all 0.5s ease-in-out;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
background: #fff;
outline: none;
border: 1px dashed #f8a82a;
}
#ContactForm1_contact-form-submit {
font-family: 'Roboto';
font-size: 15px;
width: 101px;
height: 35px;
float: left;
color: #fff;
padding: 0;
margin: 10px 0 3px 0;
cursor: pointer;
background: #aaa;
border: none;
border-radius: 2px;
transition: background 0.4s linear;
}
#ContactForm1_contact-form-submit:hover {
background: #f8a82a;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
width: 450px;
margin-top: 35px;
}(Baca juga:Cara Membuat Kotak Berlangganan Responsive di Blog)
Selanjutnya adalah Anda hanya perlu membuat laman. Pilih menu laman dan pilih HTML, bukan compose! Masukkan kode dibawah ini untuk diletakkan dilaman bagian HTML.
<div dir="ltr" style="text-align: left;" trbidi="on">
Silahkan Anda isi form di bawah ini untuk menghubungi admin. Jika tidak terdapat halangan dan kesibukan lainnya, admin akan langsung membalas pesan yang Anda kirimkan.
<div>
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<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}
form{color:#666}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#4080ff;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;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>
</div>
</div>Jika telah selesai, kemudian klik save. Dan lihat hasilnya.
Untuk contoh hasilnya, Anda bisa lihat menu contact yang terdapat didalam blog ini.
Source: http://www.arlinadzgn.com/2014/11/memasang-formulir-kontak-pada-halaman-statis.html
0 komentar:
Posting Komentar