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

Tài liệu
[Blogspot Tutorial] Tạo phần liên hệ cho Blogger
Chuyên mục
Người đăng
Đăng vào
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.

Hiện có bình luận