Tạo form đăng ký cho blogspot

Xin chào các bạn, mình sẽ hướng dẫn cách thay form đặt hàng trên website blogspot của mình, áp dụng cho tất cả các mẫu, biểu mẫu đặt hàng, form liên hệ.

Trước tiên bạn nhìn vào form đặt hàng có bao nhiêu ô (trường), ví dụ hình dưới đây là 5 ô cần tạo (có bao nhiêu ô thì tạo bấy nhiêu trường). Vì mỗi mẫu có thể là 1 form (giỏ hàng) khác nhau

Mẫu 1: Tạo 5 ô

Mẫu 2: Tạo 7 ô

Mẫu 3: Tạo 6 ô 

Mình sẽ tạo các ô như sau:
1. Họ tên
2. Địa chỉ
3. Số ĐT
4. Email (có hoặc không, theo mẫu trên thì không có email)
5. Sản phẩm mua
6. Ghi chú

Lưu ý: Tất cả để là Trả lời ngắn, hoặc đoạn (không cần bắt buộc). không check, không gì hết.. để là đoạn ngắn hoặc dài.

Xem mẫu mình tạo: Tại đây

Sau khi tạo xong, các bạn nhấn qua TAB câu trả lời

Tiếp theo nhấn vào dấu + mình tô màu vàng, nó mở ra 1 link excel

Các bạn nhấn vào Công cụ -> Trình sửa tập lệnh

Ra 1 link mới, các bạn copy đoạn code sau dán đè lên đó

function guiBieuMau(e)
{
  // Thay thế bằng địa chỉ email của bạn
  var email = “”;
  // Tiêu đề của email được gửi về
  var subject = “Đơn đặt hàng tại……”;
  // Không rành thì đùng đụng vào code ở dưới nhé
  var s = SpreadsheetApp.getActiveSheet();
  var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];  
  var message = “”;  
  // Lấy ra những thông tin nào có dữ liệu điền vào
  for ( var keys in columns ) {
    var key = columns[keys];
    if ( e.namedValues[key] && (e.namedValues[key] != “”) ) {

      message += key + ‘ :: ‘+ e.namedValues[key] + “nn”;
    }
  }
  // Dùng MailApp service của Google Apps Script để gửi về email của bạn.
  MailApp.sendEmail(email, subject, message);

}

Các bạn copy ở đây: 

Các bạn thay email của bạn vào đó. Sau đó nhấn lưu

Tiếp theo nhấn vô biểu tượng đồng hồ

Các bạn chọn như hình

Nhấn vô chữ Thông báo chọn Ngay lập tức, sau đó nhấn lưu, nó yêu cầu xét các quyền, bạn chọn ok… nhấn lưu và quay lại form ban đầu 

Nhấn vô biểu tượng con mắt mình tô màu vàng, nó sẽ ra link form, các bạn test thử xem nó có gửi về email chưa. Mình test thử và vô email kiểm tra

Email đã nhận thông báo.

Như vậy các bạn đã tạo xong form đặt hàng… Tiếp theo mình hướng dẫn thay form đặt hàng trên web.

Trên blog các bạn vô tìm tên là giỏ hàng hoặc thanh toán nằm ở Trang hoặc bài viết tùy theo mẫu của mình. (các mẫu landingpage nằm trực tiếp trong giao diện, form ô tô nằm trong giao diện)


Tab HTML

Nếu css nó lộn xộn bạn ctrl + A copy toàn bộ nó rồi vô trang http://jsbeautifier.org/ dán để sắp xếp lại css cho đẹp, dễ nhìn. xong bạn copy ngược lại dán đè vào chỗ cũ.

Link mình tô vàng là link form của bạn mới tạo

Copy link tô màu vàng thế vô link trong giỏ hàng (chừa phần /viewform lại), tiếp theo trên form này bạn nhấn Ctrl + U

Kéo hết xuống dưới bạn sẽ thấy các con số tương ứng với các ô bạn đã tạo

Con số này để làm gì, các bạn sẽ lấy nó thay vào các entry.số giỏ hàng (thanh toán, biểu mẫu)

Các bạn thay các con số tương ứng với bên giỏ hàng.. (sản phẩm mua tương ứng với tổng đơn hàng)

Theo thứ tự: Họ tên, địa chỉ, số ĐT, Sản phẩm, Ghi chú

Xong lưu lại và lên web test đặt hàng

Update mẫu form báo giá: 

<div class="row">
    <div class="col-sm-12">
        <form action="https://docs.google.com/forms/d/e/1FAIpQLSflv7IPYDFQ6KvI2tssK550h8jtpUIgYvtshjDjmwuszs7PEQ/formResponse" method="POST" class="baogia form-inline" role="form" onsubmit="return emptycart()" style="display: block;" target="hidden_iframe">
        <div class="form-group">
        <input type="text" class="form-control nhap" name="entry.471773610" required title="Vui lòng nhập họ tên" id="ho-ten" placeholder="Họ và tên" title="Vui lòng nhập họ tên" />
        <input type="text" class="form-control nhap" name="entry.1140568797" required  title="Vui lòng nhập số điện thoại" pattern="[0-9]{10,11}" id="sdt" placeholder="Số điện thoại"  />
        <input type="text" class="form-control nhap" name="entry.955895413"  required title="Vui lòng nhập đúng email" pattern="[^ @]*@[^ @]*" id="diachimail" placeholder="Email"  />
        </div>
        <button type="submit" class="dangky btn btn-primary">Đăng ký</button>
        </form>
        <div class="hidden-message alert-box success" style="display: none; font-size: 16px;">
            Cảm ơn quý khách đã đăng ký. Chúng tôi sẽ gửi báo giá trong thời gian sớm nhất!</div>
            <iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){}" style="display: none;"></iframe>
                    </div>
            </div>
    

<script type="text/javascript">
    var submitted = false;

    function emptycart() {
        submitted = true;
        $('.baogia').toggle();
        $('.hidden-message').show();
    }

</script>
<style>
    .success {
        padding: 5px 0;
        margin-bottom: 10px;
        background: #E4F1C9;
        border: 1px solid #A5BD71;
        font-size: 11px;
        font-family: Arial, Helvetica, Sans Serif;
        text-align: center;
    }
</style>