Thứ Hai, 20 tháng 1, 2014

Tạo Form liên hệ qua email trong Blogspot

From liên hệ (Contact) qua mail trong Blogspot, đây là một tiện ích mới được bổ xung trong blogspot để thêm được tiện ích này các bạn có thể là theo các bước sau:


Bước1:  Đăng nhập Blogger > Bố cục > Thêm tiện ích > Tiện ích khác > Biểu mẫu liên hệ (Xem lần lượt các hình 1, 2, 3)





Bước 2. Nhấn Mẫu -> Chỉnh sửa HTML 

 Đến đây bạn có thể chọn 1 trong 2 cách sau:

+ Cách 1: Tìm đoạn ]]></b:skin>; paste đoạn css sau:


#ContactForm1 {  Display: none;  }

Sau đó Save template


+ Cách 2: Nhấp Chuyển đến tiện ích-&gt; ContactForm1 


Nhấp chuột vào mũi tên phía đầu dòng tiện ích có id='ContactForm1' như hình


Xóa hết dòng đó sau đó paste đoạn code sau:
<b:widget id='ContactForm1' locked='false' title='Liên Hệ' type='ContactForm'>
    <b:includable id='main'>
 </b:includable>
  </b:widget>
Nhấn Lưu Mẫu

 Bước 3: Nhấn Trang - > Trang mới  - > Trang trống để tạo trang liên hệ mới



Chọn ở chế độ Html paste đoạn code sau:

 <Br/>
<b>+ SĐT:</b> 01688383113<br />
<br />
<b>+ Yahoo:</b> Phamhuanmko<br />
<br />
<b>+ Sky:</b> Phamhuan_mko<br />
<br />
<b>+ Face:</b> facebook/Phamhuanmko <br />
<br />
Hoặc Có thể liên hệ qua <b>Mail</b> Theo Mẫu<br />
<br />
<form name="contact-form">
<p></p>
<span style="color: red;">Name</span>
<br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text">
<p></p>
<span style="color: red;">Mail</span>
<span style="font-weight: bolder;">*</span>
<br>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text">
<p></p>
<span style="color: red;">Nội Dung</span>
<span style="font-weight: bolder;">*</span>
<br>
<textarea
class="contact-form-email-message" cols="100"
id="ContactForm1_contact-form-email-message" name="email-message"
rows="5"></textarea>
<p></p>
<input
class="contact-form-button contact-form-button-submit"
id="ContactForm1_contact-form-submit" value="Send" type="button">
<p></p>
<div style="text-align: center; max-width: 200px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>


 Để được from liên hệ giống Liên Hệ Của Mình

Các bạn có thể thay thế phần chữ đỏ bằng thông tin của bạn!

Ngoài ra để Mẫu thêm nổi bật, cân đối bạn có thể thêm 1 số css trước thẻ ]]></b:skin>;
như:

   .contact-form-name,.contact-form-email {

max-width: 200px;

width: 100%;

}
.contact-form-email-message {

max-width: 500px;

width: 100%;

height: 150px;

}

About ""

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit, augue quis mattis gravida, est dolor elementum felis, sed vehicula metus quam a mi. Praesent dolor felis, consectetur nec convallis vitae.

Đăng nhận xét

Breaking

 
Copyright © 2013 Nguyễn Tuấn Trung
Related Posts Plugin for WordPress, Blogger... Lên đầu trang