Tạo form liên hệ cho blogger

Tạo Form liên hệ là hình thức liên lạc chức năng trên một blog là khá quan trong đối với Blogger, vì một số bạn có như cầu nhận xét, góp ý cho chủ sử hữu blog thông qua các hình thức liên lạc có sẵn trên blog.
Tại Blogger chúng ta không cần phải tạo ra một hình thức liên lạc, bởi vì các bogger đã cung cấp cho chúng ta có thể thêm nó qua các tiện ích và chúng ta có thể thay đổi hình thức liên lạc trên để làm cho nó thú ấn tượng, đẹp hơn...
Trong bài viết này bạn sẽ được hướng dẫn để tùy chỉnh hình thức liên lạc Blogger.

Bước 1: Đăng nhập vào blogger > Bố cục > Thêm tiện ích > Tiện ích khác > Biểu mẫu liên hệ

Bước 2: Vào mẫu > Chỉnh sửa HTML > Tìm kiếm ]]></b:skin> (Ctrl + F) và dán đoạn code dưới đây trước ]]></b:skin>

 /*v form lien he 
----------------------------------------------- */
.ozg-form {
  padding: 10px;
  background: #5DAB07;
  border-radius: 5px;
  color: #fff;
}
.ozg-form h3 {
  margin: -10px;
  padding: 5px;
  background: #437D0F; 
  border-radius: 5px 5px 0 0;
  text-align: center;
}
.ozg-form input[type=text] {
  width: 100%;
  max-width: 100%;
  height: 30px;
  padding: 0 5px;
  background: none;
  border: 1px solid #437D0F;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  box-sizing: border-box;
  font-size: 14px;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ozg-form input[type=text]:hover {
  border-color: #437D0F;
}
.ozg-form input[type=text]:focus {
  border-weight: 1px;
}
.ozg-form input[type=button] {
  background: #437D0F;
  border: none;
  border-bottom: 1px solid #396710;
  cursor: pointer;
}
.ozg-form input[type=button]:hover {
  background: #006FFF;
  border-bottom: 2px solid #396710;
}
.ozg-form input[type=button]:focus {
  outline: none;
}
.ozg-form textarea {
  max-width: 100%;
  background: none;
  border: 1px solid #437D0F;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  font-size: 14px;
  color: #fff
}
.ozg-form textarea:hover {
  border-color: #437D0F;
}
.ozg-form .contact-form-error-message-with-border {
  background: #FF3D35;
  border: none;
  color: #fff;
}

Bước 3: Tìm kiếm <form name='contact-form'>  > dán đoạn code dưới đây lên trên đoạn code từ <form name='contact-form'>...</form>.

Đoạn code thay thế như hình

 <form class='ozg-form' name='contact-form'>
  <h3>LIÊN HỆ</h3>
  <p/>
  <data:contactFormNameMsg/>
  <br/>
  <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='Enter Your Name' size='30' type='text' value=''/>
  <p/>
  <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
  <br/>
  <input class='contact-form-emai' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='example@mail.com' size='30' type='text' value=''/>
  <p/>
  <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
  <br/>
  <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
  <p/>
  <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
  <p/>
  <div style='text-align: center; max-width: 222px; width: 100%'>
    <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
    <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
  </div>
</form>