Thông form mình vào backend của Google Form

DEVELOPER

Khi bạn chưa có server để lưu trữ form của khách gửi, nhưng vẫn muốn chức năng này cho web tĩnh của mình, thì có thể dùng biện pháp ký sinh trên Google Form. Khách gửi bằng form trên web của mình, nhưng thông tin lại bay đến form trên google form (cũng của mình -____-)

Bước 1/3: Tạo form html

  <input type="text" placeholder="nickname" required>
  <input type="text" placeholder="link fb">
  <input type="text" placeholder="điều muốn gửi gắm" required>

Bước 2/3: Tạo form trên google

Đi tới https://docs.google.com/forms

Đặt cái tên cho dễ nhớ sau này có nhiều form còn phân biệt

Nhập tên trường vào rồi nhấn dấu cộng để thêm các trường tiếp theo

Nhập xong nhấn hình con mắt để mở chế độ xem với tư cách khách rồi copy cái url lúc đó

Bước 3/3: Thông giữa 2 form

lấy cái url ở trên paste vào attribute action của thẻ 

 trong file html ban nãy. Lưu ý chỗ viewform thì xóa đi và thay thế bằng formResponse?embedded=true. Cái chuỗi này cho phép mình submit google form từ một cửa sổ khác. Nếu ai quên ko copy cái này thì cứ mỗi lần muốn Gởi form sẽ bị redirect đến trang google form rồi nhấn nút Gởi ở đó thay vì nút Gởi của mình.

<form action="https://docs.google.com/forms/d/e/1FAIpQLSfza57-CPqpBBuLb9nYKjGLpiZP2-Wigh2KNGedfJepLtU8kw/formResponse?embedded=true">

Nhấn F12 để inspect rồi dò dẫm đến từng input field để cóp cái name=entry rồi paste vào các thẻ  tương ứng

Các bước tiếp theo nếu ai muốn nhanh và không cần hiểu thì trực tiếp fork cái pen này, chỉ việc sửa action và name entry là thành của bạn:

Ai muốn hiểu thì đọc tiếp.

Như bình thường thì khi gửi xong form nó sẽ thông báo thành công như này

Vậy thì chả lộ hết.

Để giấu đi mọi dấu vết của google form, ta paste cái này vào trong thẻ form

target="frametanghinh"

Paste cái này vào dưới thẻ form

<iframe name="frametanghinh" style="display: none;"></iframe>

Chúng ta đang lợi dụng chức năng target có sẵn. Các lựa chọn phổ biến là như sau:

• target="_blank" thì cái thông báo thành công đó sẽ bật ra ỏ cửa sổ mới
• target="_self" (mặc định) thì sẽ hiện ỏ chính cửa sổ hiện tại (vậy còn dở hơi hơn cái blank ở trên vì nó đóng mất nội dung trang web html của chúng ta)
• target="tên một cái iframe nào đó ta tự tạo": nhét cái thông báo vào một iframe tự chế, đặt ỏ đâu tùy ý không quan trọng vì chúng ta ẩn cmn đi rồi. Hahaha. Bằng display:none ấy

Tuy nhiên không có thông báo thành công thì cũng dở vì người dùng không biết form được gửi đi hay chưa. Vậy ta sẽ tạo một thông báo fake... Hiện ra sau khi người dùng nhấn button Gởi. Thêm dòng sau vào dưới cái frametanghinh lúc nãy:

"thanhcong"

style="display:none"> Tâm hự của bạn đã được gửi đi! Refresh trang để gởi tâm hự khác.

Ban đầu dòng thông báo đó bị display:none nhưng khi form được submit thì 1 function được kích hoạt để dòng thông báo được display:block. Thêm cái này vào file javascript:

function khiguidi(){
document.getElementById("thanhcong").style.display = "block";  
}

Thêm cái sau vào trong thẻ 

:

onsubmit="khiguidi()"

Lưu ý là Chúng ta dùng onsubmit cho form chứ không dùng onclick cho cái nút Gửi. Bởi vì ngay cả khi khách không nhập gì họ vẫn có thể click nút gửi ầm ầm và ta không muốn thông báo thành công hiện ra chỉ vì như vậy. Nhưng onsubmit thì khác, một form chỉ được submit đi khi các input required (bắt buộc) phải được điền vào.