Tuyên bố miễn trừ trách nhiệm: Bài viết này sử dụng bảng tính API sản phẩm của chúng tôi, mà người dùng của chúng tôi nói là cách dễ nhất để lưu dữ liệu biểu mẫu Web/HTML cho Google Sheets. Nó có một tầng miễn phí hào phóng.
Nếu bạn giống như chúng tôi và thường tạo các trang web nơi không có gì cần một máy chủ và cơ sở dữ liệu ngoại trừ một vài biểu mẫu, thì bạn cũng phải thất vọng với tất cả các công việc thêm bạn phải làm để chỉ lưu dữ liệu từ một vài trường.
Bước 1: Đặt biểu mẫu liên hệ trong tệp HTML hoặc thông qua biểu mẫu Google
Được rồi, nếu bạn không biết bất kỳ HTML nào, thì đây có thể là một đường cong học tập dốc. Ví dụ nhỏ nên bạn nên Google thuật ngữ mà bạn không hiểu và nó có thể có ý nghĩa.
Hãy để tạo ra một biểu mẫu trong HTML. Nó có một hình thức liên hệ cơ bản và không chứa bất kỳ kiểu dáng nào.
Mẫu sẽ trông như thế này
Mã đầy đủ cho biểu mẫu liên hệ và cách xử lý việc gửi bên dưới.
Mở một tệp trống trong trình chỉnh sửa văn bản bạn sử dụng để lập trình, sao chép và dán mã bên dưới và lưu tệp bằng tiện ích mở rộng [.html]. Chúng tôi đã lưu của chúng tôi dưới dạng contactform.html
Chúng tôi sẽ đi qua phần HTML bây giờ và phần JavaScript sau.
Mẫu liên lạc có 4 trường..
Hãy chú ý đến thuộc tính tên của các thẻ. Đây sẽ là các tiêu đề cột của bảng tính của chúng tôi, chúng tôi lưu dữ liệu vào và chúng phải khớp với nhau.
Chúng tôi sẽ đặt tên cho bốn thẻ đầu vào như sau. Các dòng đề cập đến dòng mã:
- full_name, dòng 29 Đây sẽ là một trường văn bản có tên đầy đủ của ngườiThis will be a text field with the full name of the person
- Email, dòng 33 Đây sẽ là một trường văn bản với email của ngườiThis will be a text field with the email of the person
- Tuổi, dòng 37 Ném38 Đây sẽ là một trường lựa chọn radio với hai tùy chọn tuổi. 18 trận35 và 35+. Chúng tôi sẽ biểu thị chúng trong thuộc tính giá trị của các trường radioThis will be a radio selection field with two age options. 18–35 and 35+. We will denote them in the value attribute of the radio fields
- tin nhắn, dòng 42 Đây sẽ là một khu vực văn bản sẽ chứa thông báo các loại ngườiThis will be a text area that will contain the message the person types
Tất cả bốn thẻ sẽ ở bên trong một thẻ [dòng 26] mà chúng tôi sẽ đưa ra một thuộc tính ID của MyForm. Không cung cấp cho nó bất kỳ ID nào khác vì việc gửi dữ liệu vào chức năng bảng tính mà chúng tôi sẽ viết sau này trong JavaScript phụ thuộc vào nó.myForm. Do not give it any other id as the data submission to spreadsheet function that we will write later in the Javascript is dependent on it.
Cuối cùng, thành phần chính của chúng tôi sẽ là [dòng 47] sẽ gửi dữ liệu. Trong thuộc tính title của nó, chúng ta sẽ chỉ định dạng con hàm [].SubForm[].
Một lần nữa, không đặt cho chức năng một tên khác vì chúng tôi sẽ viết chức năng chính xác này sau này trong JavaScript để xử lý việc gửi dữ liệu.
Bước 2: Chuẩn bị bảng tính của bạn rằng dữ liệu sẽ được lưu vào
Phần này đơn giản
- Mở một bảng hiệu Googles trống
2. Viết các tiêu đề cột bằng [các] tên của các thẻ
Mỗi lần ai đó gửi dữ liệu, nó sẽ lưu trong cột thích hợp. Bước này là siêu quan trọng, vì vậy hãy đảm bảo các tiêu đề này giống hệt như tên của các thẻ đầu vào ở trên.
Bước 3: Lấy URL API của bạn từ bảng tính API
1. Đăng ký tài khoản
- Nhấp vào Đăng ký vào thanh Navbar
- Đăng ký bằng email và mật khẩu của bạn
2. Tải lên tệp bạn đã tạo ở bước 2 bằng cách nhấp vào trên Google Google Sheets
3. Sao chép URL API cho tệp của bạn trong tab Tạo
Sao chép URL API cho tệp của bạn và lưu nó ở đâu đó tiện dụng. Chúng tôi sẽ sử dụng điều này trong JavaScript dưới đây để gửi dữ liệu.
Nếu nút riêng được bật, thì liên kết sẽ siêu dài và chứa khóa truy cập và bí mật cho API này. Nút riêng của chúng tôi tắt bên dưới nên liên kết ngắn. Nó có thể sử dụng mà bạn muốn sử dụng. Nếu bạn muốn làm cho nó riêng tư, bạn sẽ cần phải mua một tài khoản và mã sẽ trông giống như sau.
Bước 3: Định cấu hình JavaScript để gửi dữ liệu từ biểu mẫu
Chúng tôi sẽ sử dụng Ajax để gửi biểu mẫu. Một lần nữa, nếu bạn không quen thuộc với JavaScript, JQuery hoặc Ajax, thì đó có thể là một đường cong học tập dốc.
Chúng tôi sẽ bao gồm mã HTML đầy đủ ở đây một lần nữa. Phần JavaScript nằm trong các thẻ [dòng 5 trận23].
1. Thêm jQuery từ CDN [dòng 5 trận8]
Chúng tôi cần đảm bảo thư viện jQuery đầy đủ được bao gồm trong HTML của chúng tôi để sử dụng AJAX.