CHÈN CONTACT FORM VÀ TẠO TRANG LIÊN HỆ CHO BLOGSPOT

Một nhu cầu thiết yếu đối với mỗi blogger khi làm blog đó chính là sự chuyên nghiệp trong suy nghĩ của độc giả mà Contact Form là 1 thứ khó có thể thiếu :D Trong bài viết này mình sẽ hướng dẫn các bạn chèn Contact Form và tạo trang liên hệ cho Blogspot.

Chèn Contact Form vào blog

Từ giữa năm 2013 thì Google đã thêm widget Contact Form chính thức vào Blogspot, vì vậy việc thêm tiện ích này không có gì là khó khăn nữa. Để sử dụng, bạn cần đăng nhập vào Blogger, trong tab Layout, các bạn chọn Add a gadget, trong cửa sổ mới hiện lên, bạn chọn More Gadgets, chọn Contact Form và nhấnSave để lưu.
contact form 1
contact form 2
Quay trở lại trang chủ và bạn sẽ thấy Contact Form xuất hiện:
contact form 3
Tuy nhiên tùy vào nhu cầu thì sẽ có nhiều bạn không muốn Contact Form xuất hiện trên sidebar hay footer vì có thể làm ảnh hưởng đến thẩm mỹ mà chỉ muốn tạo trang liên hệ thôi, nhưng việc thêm contact form là điều cần thiết để có form liên hệ trong trang contact. Vì vậy, bạn có thể điều chỉnh việc xuất hiện của contact form bằng cách sau: Vào menu Page, tạo 1 trang mới với với title và content gì cũng được, ở cột bên phải các bạn điều chỉnh như hình dưới nhá (dành cho những bạn không thích Google index thừa :D )
contact form 4
Nhấn Save để lưu trang A này lại. Trong menu Template, chọn Edit HTML, trong giao diện code, các bạn chọn Jump to widget và chọn ContactForm1, bạn sẽ được đưa đến vị trí của Contact Form, chọn mũi tên để hiện thị đầy đủ widget, bạn sẽ thấy code của Contact Form giống như dưới:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' 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>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
Trong code trên bạn tìm đến <b:includable id=’main’> và thêm đoạn code sau vào phía dưới thẻ trên:
01
<b:if cond='data:blog.url == "URL"'>
Ở đoạn code trên, bạn thay URL bằng page URL của page A mà bạn tạo ở phía trên. Sau đó, tìm đến</b:includable> (cũng của đoạn code của widget Contact Form phía trên) và thêm </b:if> vào phía trên thẻ</b:includable>. Nhấn Save Template để lưu lại mẫu cho blog.
Cặp câu lệnh điều kiện phía trên sẽ làm cho Contact Form chỉ xuất hiện ở page A mà không xuất hiện ở bất cứ trang nào khác trong blog, điều này sẽ phù hợp với những bạn lo lắng về thẩm mỹ cho blog. Xin nhắc lại 1 lần nữa là nếu không thêm widget Contact Form thì đến khi tạo trang Liên hệ thì form liên hệ trong trang đó sẽ không thể hoạt động :D

Tạo trang liên hệ cho blog

Sau khi đã tạo widget Contact Form và điều chỉnh vị trí xuất hiện của widget này thì các bạn đến bước tạo trang Liên hệ cho blog.
Các bạn tìm đến menu Page và tạo 1 trang mới (nếu blog đã có trang liên hệ rồi thì không cần tạo mới nữa mà bạn có thể Edit trang cũ của bạn). Chuyển qua tab HTML và chèn code sau vào:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form name="contact-form">
<p></p>
Name
<br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text">
<p></p>
Email
<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>
Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea class="contact-form-email-message" cols="25" 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: 222px; 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>
Nhấn Save hoặc Update để lưu trang liên hệ lại. Sau đó các bạn quay lại menu Template > Edit HTML, tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau vào phía trên:
01
02
03
04
05
06
07
08
09
10
.contact-form-name,.contact-form-email {
  max-width: 200px;
  width: 100%;
}
 
.contact-form-email-message {
  max-width: 500px;
  width: 100%;
  height: 200px;
}
Đoạn CSS trên có thể điều chỉnh kích thước của Contact Form phù hợp với blog. Nhấn Save để lưu Template lại.
Tà tà.. Chúng ta đã hoàn thành việc chèn Contact Form và thêm trang Liên hệ cho blog. Sau đây là phần Test Email trả về của mình :D
Một lưu ý nhỏ đó là Email trả về sẽ nằm trong tab Social hay Xã hội của Gmail nhé (Lúc đầu mình đợi mệt ơi là mệt vì trong Inbox chính và hộp Spam không có mail :D )

Không có nhận xét nào:

Đăng nhận xét

cảm ơn bạn đã đọc bài viết!
-hãy viết nội dung dễ đọc,tránh lời lẽ thô tục
-vui lòng không spam comment hoặc comment nặc danh
-mọi thắc mắc nếu chưa được giải đáp kịp thời xin liên lạc qua số 0167 561 3351
Thanks You!

MUA HÀNG: YAHOO: cuahangtemplate -
BACK TO TOP