[Blogspot Tutorial] Tạo phần liên hệ cho Blogger

Chào các bạn, hôm nay  mình sẽ chia sẻ cho các bạn đoạn Code dùng để làm Biểu mẫu liên hệ (Contact Form).
Đầu tiên các bạn cần đăng nhập vào tài khoản Blogger, tạo 1 trang mới ở Blog các bạn đang sử dụng và chèn đoạn Code bên dưới.
<style>.c-form-name, .c-form-email, .c-form-email-message{padding:10px;margin:8px 0 8px 0;border:1px solid #E5E5E5;width:50%;color:#999999;box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;}
.c-form-email-message{width:95%;height:150px;line-height:18px;}
.tb-contact-form-widget input:hover,textarea:hover,input:focus,textarea:focus{border-color:1px solid #C9C9C9;box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;}
.tb-contact-form-widget label{margin-left:10px;color:#999999;}
.cform-button {width:100px;height:40px;background-color:#474E70;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:50%;margin-top:25px;}
</style><br />
<div class="tb-contact-form-widget">
<form name="contact-form">
<div class="name">
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Nhập tên của bạn" size="30" type="text" value="" />
<label for="name">Tên</label>
</div>
<div class="email">
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Địa chỉ email" size="30" type="text" value="" />
<label for="email">E-mail *</label>
</div>
<div style="clear: both;">
</div>
<div class="message">
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Viết nội dung..." rows="5"></textarea>
<br />
<div class="srbtn">
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Gửi" />
</div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
Các bạn có thể xem thử tại đây, tất cả thông tin người dùng gửi sẽ được gửi về Gmail của các bạn.

2 nhận xét:

  1. Hình như còn thiếu cái gì trong đoạn code ấy :D

    Trả lờiXóa
    Trả lời
    1. Cảm ơn anh đã ghé thăm Blog <3 :D dạ đoạn code bị thiếu hay sao anh !?

      Xóa