Mẫu contact chèn trực tiếp vào bài đăng blogger

Để chèn một contact form trên blogger, cách đơn giản nhất mà ai cũng biết đó là vào phần lay-out và chèn thêm một widget mới có tên ContactForm. Ở bài này mình sẽ hướng dẫn các bạn tạo một mẫu contact mở rộng có thể chèn trực tiếp vào bài đăng blogger

Trước hết các bạn xem mẫu demo mình đã tạo ở đây nhé:  https://www.bietko.com/p/lien-he-voi.html
Các bạn làm theo 3 bước như sau:
-Thứ nhất: Thêm một widget contact form từ lay-out của blogger

Các bạn nhớ tíck chọn vào dấu trên nhé
-Kế tiếp:   Tạo một page mới đặt tên theo các bạn tùy chọn cho dễ nhớ như contact hày liên hệ với chúng tôi. Sau đó chuyển sang chế độ soạn thào Html và paste code bên dưới vào

<div style="text-align: center;">Liên hệ/ yêu cầu thiết kế/ lập dự án công trình với chúng tôi</div>

<form name="contact-form">

  <label>Tên của bạn</label>

  <input id="ContactForm1_contact-form-name" aria-label="Nhập tên của bạn" autocomplete="off" dir="ltr" spellcheck="false" type="text" name="name" placeholder="Nhập tên của bạn..." required="" value="">

  <label>Địa chỉ email</label>

  <input type="email" id="ContactForm1_contact-form-email" aria-label="Nhập địa chỉ email" autocomplete="off" dir="ltr" spellcheck="false" name="email" placeholder="Nhập địa chỉ email..." required="" value="">

  <label>Nội dung</label>

  <textarea id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Nhập nội dung..." required=""></textarea>

  <input id="ContactForm1_contact-form-submit" aria-label="Gửi email" type="button" value="Gửi email">

  <div id="ContactForm1_contact-form-error-message"></div>

  <div id="ContactForm1_contact-form-success-message"></div>

</form>

<br />

(1) Ghi rõ họ tên và số điện thoại liên lạc (nếu có)<br />

(2) Địa chỉ email cần ghi chính xác để có thể nhận phản hồi lại<br />

(3) Nội dung liên hệ ngắn gọn, nếu cần hỗ trợ cần thêm liên kết ảnh đính kèm<br />

<style type="text/css">

.ContactForm {

    display:none!important

}

form[name=contact-form] label:after {

    padding-left: 3px;

    font-size: 12px;

    vertical-align: text-bottom;

}

form[name=contact-form] label:nth-of-type(1):after {

    content: "(1)";

}

form[name=contact-form] label:nth-of-type(2):after {

    content: "(2)";

}

form[name=contact-form] label:nth-of-type(3):after {

    content: "(3)";

}

form[name=contact-form] input[type=text], form[name=contact-form] input[type=email], form[name=contact-form] textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid rgba(0,0,0,0.12);

    transition: border-color .3s;

    border-radius: 4px;

    box-sizing: border-box;

    margin-top: 6px;

    margin-bottom: 16px;

    resize: vertical;

    outline: none;

    font-size: 15px;

}

form[name=contact-form] input[type=button] {

    background: transparent;

    border: 1px solid rgba(0,170,255,.2);

    border-radius: 4px;

    color: #00aaff;

    padding: 8px 10px 8px 5px;

    letter-spacing: .007px;

    white-space: nowrap;

    transition: border-color .3s;

    font-size: 15px;

    outline: none;

    cursor: pointer;

}

form[name=contact-form] input[type=text]:hover, form[name=contact-form] input[type=email]:hover, form[name=contact-form] textarea:hover, form[name=contact-form] input[type=button]:hover {

    border-color: #0af;

    transition: border-color .3s;

}

</style>

Các bạn lưu page này lại. Và nhớ ghi lại Page id của trang

- Bước cuối:  Vào chỉnh sửa template chọn Chuyển đến tiện ích ContactForm1, thêm đoạn sau trong <b:widget..., để widget chỉ hoạt động tại trang liên hệ.

<b:widget cond='data:blog.pageId == &quot;5383490038187241731&quot;' id='ContactForm1' locked='false' title='Biểu mẫu liên hệ' type='ContactForm' version='1'>

Tiếp tục sửa đoạn <b:includable id='content'>...</b:includable> thành <b:includable id='content'/> xong lưu mẫu lại.

Đến đây thì chúc mừng bạn đã tạo xong mẫu contact để chèn trực tiếp vào trang tĩnh hay bài đăng rồi nhé
Phần mở rộng:  Đối với bạn nào rành về chỉnh sửa code trong html, muốn tạo một nút liên hệ để trỏ về trang đã tạo ở trên thì tham khảo thêm code bên dưới để chèn nhé

<a expr:href='data:blog.canonicalHomepageUrl + &quot;p/lien-he.html&quot;' title='Liên hệ' target='_blank'>Liên hệ</a>