Hướng dẫn tạo Trang liên hệ cho Blogger / Blogspot

BloggerGuide

Tuesday, November 3, 2015

0 comments

Tạo trang liên hệ cho Blogger / Blogspot  với một giao diện đơn giản cho trang liên hệ trong Blog của bạn là điều không thể thiếu để bạn có thể tương tác tốt hơn với người dùng.

Bước 1: Tạo một trang trống rồi sao chép và dán đoạn mã sau đây vào trang đó, còn đối với những bạn có tạo trang liên hệ trước đó rồi thì hãy thay thế đoạn mã trước tại trang đó bạn đoạn mã này.

<form name="contact-form">
<p></p>
Họ và tên
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Địa chỉ Email <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Lời nhắn <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button" value="Gửi" />
<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>

Bước tiếp theo thêm đoạn css căn chỉnh giao diện vào trước thẻ ]]></b:skin> trên phần chỉnh sửa template của bạn.

/* CSS Căn Chỉnh Biểu Mẫu Liên Hệ */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

Bạn nhớ lưu lại toàn bộ và thưởng thức, hy vọng bạn sẽ thích với giao diện này.

Tag : Blog Contact, Blog Design