Advertisement

Membuat Contact Form Keren Di Halaman Statis


Kali ini saya akan membuat tampilan widget contact form menjadi lebih menarik dan meletakkannya di halaman statis. Caranya sangat mudah, hanya menghilangkan widget contact yang ada pada blog dan menambahkan css agar membuat tampilan contact form tersebut menjadi lebih menarik untuk dilihat. Berikut adalah step by step untuk Membuat Contact Form Keren Di Halaman Statis :

#1. Buka Dashboard Blogger
#2. Pilih Tata Letak > Add Gadget > Contact Form
#3. Jika widget Contact Form sudah dibuat, kemudian pergi ke Template > Edit Template
#4. Letakkan css berikut di atas ]]></b:skin> atau </style>
#ContactForm1{display:none}
css tersebut berfungsi untuk menghilangkan Contact Form di blog.
#5. Setelah itu Simpan Template
#6. Kemudian buatlah Laman Baru dan kita beri nama dengan "Contact Form" atau "Contact"
#7. Letakkan css dan kode berikut di halaman yang telah dibuat tadi pada mode HTML dan bukan Compose
<form name="contact-form">
<span style="color: #666666; font-family: Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Full Name </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" title='Full Name' value="" />

<br />
<span style="color: #666666; font-family: 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> <br />
<input id="ContactForm1_contact-form-email" name="email" size="25" type="text" title='Email Address' value="" />

<br />
<span style="color: #666666; font-family: Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Message <span style="color: #f56954; font-size: x-small; font-weight: bold;"> (important)</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" title='Message' rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" title='Send' 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:95%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;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:#444;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-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:#0f9ccc}
#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>
Silahkan sesuaikan dengan keinginan anda.
#8. Selesai
Advertisement
Disclaimer : Beberapa artikel di blog ini terkadang berisi informasi dari berbagai macam sumber. Hak cipta berupa gambar, teks, dan link sepenuhnya dimiliki oleh web tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami. Contact

Subscribe to Eliyanto Sarage by Email

Related Post

Related Posts
Disqus Comments