Cách tạo một khung liên hệ chuyên nghiệp cho blogger

Môt mẫu contact form chuyên nghiệp giúp khách hàng có cái nhìn thiện cảm cho website của các bạn. Bài này mình sẽ chia sẽ với các bạn cách tạo mẫu liên hệ chèn vào trang tĩnh hay cuối bài đăng chuyên nghiệp như một công ty thực thụ

Các bạn có thể tham khảo thêm mẫu demo như sau: Demo contact form

Cách làm như sau:

• Các bạn tạo một trang tĩnh bằng cách mở một Page mới
• Chuyển sang khung soạn thảo Html rồi chèn code bên dưới vào

<style>
#main-wrapper{width:100%}
#sidebar-wrapper,.comments{display:none;}
#main-wrapper .bcreative-inner{border:0px;}
.page-contact {
  padding: 35px 0;
}
h2.post-title.entry-title {
  text-align: center;
}
</style>
<div class="col2 pull-left">
<div class="tl-col-inner custom-contact-form">
<div class="contact-us-form">
<form name="contact-form">
<div class="form-hint">
Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<div class="form-hint">
Your Email: <em>*</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<div class="form-hint">
Subject:</div>
<input class='contact-form-subject' id='ContactForm1_contact-form-email' name='subject' value="Subject"  size='30' type='text' onblur='if (this.value == "") {this.value = "Subject";}' onfocus='if (this.value == "Subject") {this.value = "";}'/>
<div class="form-hint">
Your Message: <em>*</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "Leave Your Message..";}" onfocus="if (this.value == "Leave Your Message..") {this.value = "";}" value="Leave Your Message.."></textarea> 
<input class='button red' type='reset' value='Clear'/> 
<input class="button green" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 500px; text-align: center; width: 100%;">
<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>
</div>
</div>
<div class="col2 pull-right">
<div class="tl-col-inner contact-address">
<div class="Contact-info">
<h2>Nice to Hear From You</h2>
<p class="contact-text">Suspendisse ut interdum lectus. Integer ac neque faucibus, venenatis nisl quis, pellentesque lacus. Integer et ipsum sit amet dui ultrices hendrerit. Pellentesque leo massa, suscipit a felis non, posuere convallis velit. Sed tincidunt lacinia velit et aliquam.</p>
 <div class="contact-social">
 <ul class="tl-colored-social icon-rounded icon-zoom list-unstyled list-inline"> 
       <li><a href="#"><i class="fa fa-twitter"></i></a> </li> 
       <li><a href="#"><i class="fa fa-facebook"></i></a> </li>   
       <li> <a href="#"><i class="fa fa-instagram"></i></a> </li>
       <li> <a href="#"><i class="fa fa-google-plus"></i></a> </li> 
       <li> <a href="#"><i class="fa fa-youtube"></i></a> </li> 
    </ul>
</div>
<h2>Contact Information</h2>
<p><strong><i class="fa fa-map-marker"></i> Our Location</strong><br />
31-33B Tan Thuan St, Tan Thuan EZ, East Tan Thuan Ward 11, District 7, Ho Chi Minh City, Vietnam.</p>
<p><strong><i class="fa fa-phone"></i> Phone Number</strong><br />
+84 935 815 989<br />
+84 935 815 989</p>
<p><strong><i class="fa fa-envelope-o"></i> Email Adress</strong><br />
we@gmail.com<br />
oursupport@gmail.com</p>
</div>
 </div>
 </div>

Đến đây các bạn chỉ việc lưu lại là có một biểu mẫu liên hệ tuyệt đẹp cho blog rồi nhé. Chúc các bạn làm thành công