Hướng dẫn cách tạo form liên hệ ở trang tĩnh blogspot

Form liên hệ là phần cần thiết trong website và năm vừa rồi google hỗ trợ thêm tính năng add widget contact form vào template nhưng khó tùy biến thêm vào trang tĩnh nên bài viết này sẻ giúp bạn thêm form liên hệ ở trang tĩnh của blogspot.
tạo form liên hệ ở trang tĩnh blogspot

Thêm form liên hệ ở trang tĩnh blogger

Thực ra thì vài hôm trước có một bạn hỏi về cách thêm form liên hệ ở trang tĩnh như thế nào nên mình post bài này để nhiều người có thể áp dụng cách này cho blog của họ.

Bạn có thể xem demo trực tiếp tại đây

Bắt đầu >> Bạn chỉ cần thêm đoạn code sau vào trang tĩnh nói mà bạn muốn hiển thị form liên hệ. Nhớ là viết ở chế độ HTML
<style scoped="scoped" type="text/css">
.contact-form-box{width:50%;margin:20px auto;padding:0;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none}
#ContactForm1_contact-form-email-message{width: 95%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0px 1px 0px #de5135;} #ContactForm1_contact-form-submit:hover {background-color:#f5785f;}
#ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;}
#ContactForm1_contact-form-submit:focus{outline:none}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left}
@media screen and (max-width: 768px){ .contact-form-box{width:100%;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;}
}
@media screen and (max-width: 480px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}
}
</style>
<div class="contact-form-box">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30"
type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30"
type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message"
placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4764656151717031237';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4764656151717031237','//www.tips24h.net/','4764656151717031237'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '4764656151717031237', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>
Chú ý đặc biệt: Bạn cần thay đổi ID 4764656151717031237 cho phù hợp với blog của bạn.

Cách xác định ID blogspot


Chỉ cần bạn đăng nhập vào trang bảng điều khiển blogger và nhìn lên url bạn sẻ thấy ngay ID blog của bạn là gì, hãy coppy ID ấy và thay vào form trên.

Hướng dẫn tạo form liên hệ ở trang tĩnh blogspot

Hy vọng tut nhỏ tạo form liên hệ ở trang tĩnh blogspot này sẻ giúp ích cho các bạn.
Donate MoMo: 034.34.38.599
Bài đăng mới hơn Bài đăng mới hơn Bài đăng cũ hơn Bài đăng cũ hơn

Bài đăng khác

29 nhận xét

Khi Comment hãy click vào "Thông báo cho tôi" để theo dõi phản hồi mới nhất từ admin
  1. Chà chà sản phẩm ra lò liên tục nhỉ

    Trả lờiXóa
    Trả lời
    1. :D chắc sắp tới học thêm về xml để làm cái template mới dc, html với css ok rồi, còn js thì hơi yếu cày js với xml nữa là oke :p

      Xóa
  2. mình đã làm thành công chó blog của mình thanks bạn rất nhiều, chúc ban thành công và chia sẻ nhiều bài viết bổ ích |o|

    Trả lờiXóa
  3. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  4. người ta gửi cho mình sao không thấy đâu bạn nhỉ

    Trả lờiXóa
  5. Mình muốn tạo form phản hồi trực tiếp tại blogspot thì phải làm như thế nào ? bạn có thể chỉ giúp mình với được không?thanks

    Trả lờiXóa
    Trả lời
    1. Phản hồi trực tiếp là như thế nào bạn? mình thấy dùng form kiểu bài viết khá hay mà.

      Xóa
    2. Bạn tạo 1 widget HTML/JavaScript và dán nó vào là được

      Xóa
  6. cảm ơn bạn nhé, mình đã thử và thành công. :-bd
    Cơ mà bạn giúp mình cái này, blog của mình là blog kinh doanh nhóm gồm 2 người, cái trang liên hệ của mình sẽ có ảnh và thông tin của 2 người 2 bên. Và bên dưới cũng là 2 cái form như trên, 1 cái bên trái và một cái bên phải thì sửa thế nào nhỉ? Mình cảm ơn trước nhé

    Trả lờiXóa
  7. cho hỏi mình muốn tạo thêm mấy dòng message nữa được không?

    Trả lờiXóa
  8. bạn ơi sao cái khung liên hệ của mình không giống như trong demo

    Trả lờiXóa
    Trả lời
    1. Lúc trước e sửa thay đổi http://www.tips24h.net/p/contact.html mà chưa update bài viết :v

      Xóa
  9. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  10. người ta gửi cho mình sao không thấy đâu vậy bạn? Mình thử gửi rồi mà không thấy nhân được email của người gửi.

    Trả lờiXóa
    Trả lời
    1. Nhớ thay ID của bạn nhé. bạn còn để id nên mình có nhận dc email của bạn gửi đấy @@,

      Xóa
    2. MIOnh doi ID luon roi, Nhung vao gmail cung hok thay?

      Xóa
    3. MÌnh chả biết nhưng mình nhận khá nhiều kiểu email test. nó gửi vào họp thư của mình

      Xóa
  11. Thư style nhận dc https://lh4.googleusercontent.com/-254deqF4pMs/VgS7S0KhkdI/AAAAAAAAAEA/yDFG-CPMry8/w803-h213-no/unnamed.png

    Trả lờiXóa
  12. rất tuyệt vời. Cám ơn bạn

    Trả lờiXóa
  13. rất tuyệt vời. Cám ơn bạn

    Trả lờiXóa
  14. lưu xong rồi mình Gán vào đâu để thấy được menu liên hệ vậy b?

    Trả lờiXóa
    Trả lời
    1. Tạo page liên hệ rồi mở chế độ soạn thảo html xong làm theo các bước trên là nó hiện

      Xóa
  15. Mình muốn thêm dòng điện thoại nữa thì làm sao bạn ?. Thanks bạn.

    Trả lờiXóa
  16. Chào bạn,mình muốn thay mục email bằng điện thoại thì chỉnh sửa thế nào vậy

    Trả lờiXóa