Tạo Contact Form Với Hiệu Ứng Ẩn Hiện Cho Blog

Contact Us - Liên Hệ Chúng Tôi. Đó chắc hẳn là thứ không thế thiếu đối với một Blog nói chung, bởi nó là cách mà khách hàng liên hệ tới chúng ta để nói về những việc liên quan đến blog, đôi khi cũng chỉ để kết bạn làm quen,...Đối với các newbie thì làm cái Mẫu Liên Hệ này thường là tạo trang tĩnh và khi những thứ trên đó, còn thủ thuật ở đây Anh Nhím Blog chia sẽ nó không như vậy mà nó thuộc dạng cái widget luôn nằm dưới màn hình ngay góc phải để tiện cho khách hàng liên hệ tới chúng ta một cách nhanh chóng hơn.

Mục lục:

Mục Đích

Thực Hiện

Nâng Cao

Lời Kết

Mục Đích

Vị trí thuận tiện cho khách hàng liên hệ tới chúng ta một cách nhanh chóng hơn.
Mâu liên hệ khá đơn giản, không cầu kì, dể đọc làm cho khác hàng cảm thấy thoải mái hơn
......

Thực Hiện

1. Các bạn đăng nhập Blogger >> Mẫu >> Chỉnh sửa HTML
2. Sau đó các bạn tìm thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>, rồi chèn đoạn code CSS dưới vào trên một trong hai thẻ đóng đó.

CSS/* CSS Contact Form */
#slidingbox{background:#fff;width:100%;max-width:355px;width:100%;position:fixed;overflow:hidden;border:none;right:0;z-index:99;text-align:left;transition:all .4s ease-out}
.slidingbox-title{background:#5996C1;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.slidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#slidingbox-close,a#slidingbox-close{margin-right:15px}
.slidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.slidingbox-container{border:1px solid #ddd;float:left;width:100%;height:auto;padding:10px}
.slidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.slidingbox-container >div >span{font-size:14px}
#ContactForm1{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:5px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:300px;height:120px;margin:5px 0;padding:5px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color:#444;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {background:#5996C1;color:#fff;border:1px solid #5996C1;width:100px;height:40px;line-height:30px;cursor:pointer;font-weight:700;font-size:13px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover{background:#fff;color:#5996C1}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:300px;margin-top:35px;}
.show{bottom:-375px}
.hide{bottom:0}

3. Sau đó các bạn tìm thẻ đóng </body> rồi chèn đoạn code sau vào trước nó

JS<script type='text/javascript'>
//<![CDATA[
// Contact Us
$(document).ready(function(){var i=$("#slidingbox"),s=$("#slidingbox-close"),o=$("#slidingbox-maximize"),l=$("#slidingbox-minimize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>

4. Sau đó các bạn tìm thẻ mở <body> hoặc thẻ mở <body rồi chèn doạn code sau vào dưới nó

HTML<div class='show' id='slidingbox'>
<div class='slidingbox-title slidingbox-www'>
<span style='float:left;margin:0 15px;'>Contact Us</span>
<span><a href='javascript:void(0);' id='slidingbox-close' title='close'>&#215;</a></span>
<span><a href='javascript:void(0);' id='slidingbox-maximize' title='maximize'>+</a></span>
<span><a href='javascript:void(0);' id='slidingbox-minimize' title='minimize'>&#8722;</a></span>
</div><div class='slidingbox-container'>
<form name='contact-form'>
Name<br/>
<input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<br/>Email Address*
<br/><input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<br/>Content*<br/>
<textarea cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<br/><input id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<br/><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></div></div>

5. Lưu mẫu lại 6. Lúc này các bạn đừng vui vì chưa xong đâu

Vì Các bạn phải vào Blogger >> Bố Cục >> Thệm tiện ích >> Tiên ích khác >> Biểu mẫu liên hệ

7. Sau đó nhập tiêu đề và nhấn Lưu >> Lưu Sắp xếp. Vậy là xong

Demo
click to view

Nâng Cao

Để Thay đổi các chữ Name, Email Address, Content, Contact Us

- Các bạn tìm và thay thế các từ đó ở trong đoạn code HTML, đoạn code mà các bạn phải chèn sau thẻ mở <body> hoặc <body ấy

Để thay đổi màu các tiêu để chứa chữ Contact Us

- Ngay trong cái đoạn code đầu tiên các bạn phải chèn ở thẻ đóng ]]></b:skin> hoặc </style> ấy các bạn tìm dòng .chslidingbox-title{background:#5996C1 và rồi thay đổi cái #5996C1 thành mã màu của bạn

Vào đây lấy mã màu

Thay đổi cái màu nút Send

- Tìm dòng #ContactForm1_contact-form-submit {background:#5996C1; rồi thay đổi cái #5996C1 thành màu bạn muốn

Thay đổi màu khi rê chuột và nút thì cái chữ Send sẽ đổi màu. Nên đặt cùng màu ở trên

- Tìm dòng #ContactForm1_contact-form-submit:hover{background:#fff;color:#5996C1} và thay đổi cái #5996C1 thành màu bạn thích. (KO thay đổi cái background)

Thay đổi cái màu viền của cái nút Send

Ngay tại dòng thay đổi màu của cái nút Send, các bạn men theo dòng đó sẽ nhìn thấy cái border:1px solid #5996C1 , cái #5996C1 chính là màu của nó.

Lời Kết

Vậy là mình đã hướng dẫn các bạn , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.