{tocify} $title = {Mục lục bài viết}
[tintuc]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 
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.
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.
Quay trở lại trang chủ và bạn sẽ thấy Contact Form xuất hiện:
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 )
)
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 != ""'> <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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </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
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
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 )
)
cửa hàng template[/tintuc]
Post a Comment