Hướng dẫn how do i create a google form using html code? - làm cách nào để tạo biểu mẫu google bằng mã html?

Ảnh của Sai Kiran Anagani trên unsplash

Google Form là một dịch vụ tuyệt vời để tạo các biểu mẫu và khảo sát. Ngoài ra, cung cấp một cách dễ dàng để lưu trữ và xử lý dữ liệu trực tiếp trong Google Sheets mà không gặp nhiều rắc rối với lập trình phía máy chủ. Quan trọng nhất là mọi thứ đều miễn phí! Nhưng điều gì sẽ xảy ra nếu bạn không muốn biểu mẫu của bạn trông giống như một biểu mẫu Google? Hoặc muốn thiết kế nó một cách sang trọng hơn ?? Làm thế nào về việc thiết kế biểu mẫu HTML tùy chỉnh của riêng bạn và liên kết nó với tờ Google? 😌oogle form is an excellent service for creating forms and surveys. Also, provides an easy way to store and handle data directly in google sheets without much trouble with server-side programming. Most importantly everything is for FREE! But what if you don’t want your form to look like a google form? Or want to design it in a more classy way?? How about designing your own custom HTML form and link it to the google sheet? 😌 😌

Có một số cách khác được liệt kê trên internet nhưng tôi không thấy bất kỳ cách nào hữu ích vì những lý do sau:

  • Quá lộn xộn và khó thực hiện
  • Không ai trong số họ thực sự làm việc cho tôi 😩

Hãy bắt đầu hướng dẫn về cách thực hiện điều này trong hai bước đơn giảntwo simple steps…

Bước 1: Thiết kế bố cục biểu mẫu HTML tùy chỉnh theo nhu cầu của bạn

Thực hiện theo năm bước đơn giản sau để tạo bố cục biểu mẫu HTML của bạn, nơi sẽ sẵn sàng gửi dữ liệu của nó đến Google Sheet:

  • Thêm dòng này bên trong thẻ ... của bạn. Điều này là cần thiết cho tập lệnh ứng dụng Google hoạt động mà chúng tôi sẽ sử dụng để liên kết các biểu mẫu HTML với Google Sheets.
  • Thêm bố cục biểu mẫu của bạn [mã] bên trong thẻ div với ID Form Form
  • Đối với mỗi thẻ , hãy thêm một lớp dữ liệu hình thức, ví dụ:
  • Gọi chức năng send_data[], khi nhấp vào nút gửi, ví dụ: Submit
  • Thêm mã JavaScript bên dưới ngay trên để cho biểu mẫu của bạn gửi dữ liệu lên tập lệnh ứng dụng Google.

Một ví dụ về biểu mẫu HTML được hiển thị ở đây, thu thập tên, email, tuổi, công ty và số liên lạc cho người dùng khác nhau.

Mẫu mẫu:

Bước 2: Chuẩn bị tờ Google để nhận dữ liệu từ biểu mẫu của bạn

Điều này liên quan đến một số nhấp chuột đơn giản và tài liệu sao chép-dán. Tôi chỉ đơn giản là tạo một video YouTube để bạn có thể theo dõi các bước.

  • Sử dụng mã HTML của bạn được viết trong Bước 1 cho index.htmlFile.
  • Sử dụng mã dưới đây cho Code.gs

Xin chúc mừng!! Bạn đã tạo thành công biểu mẫu HTML của riêng mình có thể gửi dữ liệu của nó đến Google Sheet

Tất cả các phương pháp này rất dễ thực hiện và trong một vài cú nhấp chuột. Không có chương trình hoặc kiến ​​thức HTML/CSS cần thiết. Khi biểu mẫu của bạn đã sẵn sàng, hãy nhấp vào Gửi gửi tại Top-Stright để đưa ra các tùy chọn gửi:

Cài đặt

Sau đó, chọn một trong ba tùy chọn được liệt kê bên cạnh "Gửi qua ..." - email hoặc liên kết hoặc nhúng HTML. Ngoài ra, bạn có thể chọn chia sẻ biểu mẫu Google của mình với đối tượng Facebook hoặc Twitter của mình. Bạn có thể nhấp vào các biểu tượng ở trên cùng bên phải của cùng một hộp bật lên "Gửi".

Cài đặt

Sau đó, chọn một trong ba tùy chọn được liệt kê bên cạnh "Gửi qua ..." - email hoặc liên kết hoặc nhúng HTML. Ngoài ra, bạn có thể chọn chia sẻ biểu mẫu Google của mình với đối tượng Facebook hoặc Twitter của mình. Bạn có thể nhấp vào các biểu tượng ở trên cùng bên phải của cùng một hộp bật lên "Gửi".

1. Làm thế nào để nhúng Google Mẫu vào email?

Việc nhúng các biểu mẫu Google trong email rất dễ dàng. Tùy chọn này đặc biệt hữu ích nếu bạn muốn làm cho người dùng của bạn gửi/điền vào câu trả lời của họ từ các hộp thư đến của họ.
1. In the "Send Form" pop-up, by default the envelope icon is selected beside "Send via..." options.
2. In the "Email" section, add your email list separated by commas in the "To" field.
3. Write your email subject in "Subject" field.
4. You can compose your message for your users under "Message" section.

Cài đặt

Sau đó, chọn một trong ba tùy chọn được liệt kê bên cạnh "Gửi qua ..." - email hoặc liên kết hoặc nhúng HTML. Ngoài ra, bạn có thể chọn chia sẻ biểu mẫu Google của mình với đối tượng Facebook hoặc Twitter của mình. Bạn có thể nhấp vào các biểu tượng ở trên cùng bên phải của cùng một hộp bật lên "Gửi".
You can choose to include the form in email if you are 100% complete with all the questions that you want to ask. Because, once the form is "included in email" to all your users, you can not add/change your questions in the mid-way.
There is one particular advantage while using this option: your users see your form embedded within the email they receive and submit from there directly. How convenient!
However there are number of disadvantages:
- Won't show yout logo or header images in email, if you have added them to your form.
- Won't really include your form, if you have split your form into many sections.

Cài đặt

Sau đó, chọn một trong ba tùy chọn được liệt kê bên cạnh "Gửi qua ..." - email hoặc liên kết hoặc nhúng HTML. Ngoài ra, bạn có thể chọn chia sẻ biểu mẫu Google của mình với đối tượng Facebook hoặc Twitter của mình. Bạn có thể nhấp vào các biểu tượng ở trên cùng bên phải của cùng một hộp bật lên "Gửi".

Cài đặt

Sau đó, chọn một trong ba tùy chọn được liệt kê bên cạnh "Gửi qua ..." - email hoặc liên kết hoặc nhúng HTML. Ngoài ra, bạn có thể chọn chia sẻ biểu mẫu Google của mình với đối tượng Facebook hoặc Twitter của mình. Bạn có thể nhấp vào các biểu tượng ở trên cùng bên phải của cùng một hộp bật lên "Gửi".

1. Làm thế nào để nhúng Google Mẫu vào email?
Here is how you can get the link to share:
1. In the "Send Form" pop-up, click on the link icon besides "Send via..." options.
2. Click on the URL that starts with "//docs.google.com/forms/...".
3. To copy the link that appears, click Copy or press Ctrl + c [Windows] or ⌘ + c [Mac] on your keyboard.
4. You can choose to "Shorten URL" in which case you will get a simple URL to your form that starts with "//forms.gle/..."

Cài đặt

Sau đó, chọn một trong ba tùy chọn được liệt kê bên cạnh "Gửi qua ..." - email hoặc liên kết hoặc nhúng HTML. Ngoài ra, bạn có thể chọn chia sẻ biểu mẫu Google của mình với đối tượng Facebook hoặc Twitter của mình. Bạn có thể nhấp vào các biểu tượng ở trên cùng bên phải của cùng một hộp bật lên "Gửi".

1. Làm thế nào để nhúng Google Mẫu vào email?
Here are the steps:
1. In the "Send Form" pop-up, click on the icon with two pointy brackets besides "Send via..." options.
2. Copy the HTML that appears by clicking Copy button or press Ctrl + c [Windows] or ⌘ + c [Mac] on your keyboard.
3. Your form will appear in your page within an iframe. You have options to adjust the height and width of the iframe. Remember, iframes may cause usability issues. Sometimes, it doesn't fit in the page or looks odd.

Cài đặt

4. Đặt mã vào trang web của bạn nơi bạn muốn hiển thị nó, thường là một nơi nào đó trong phần thân của trang. Bạn có biểu mẫu của bạn được nhúng trong trang web của bạn.
You have your form embedded in your web page.

Cài đặt

Ưu điểm lớn nhất của tùy chọn này là, bạn có thể chia sẻ URL của miền của mình với người dùng. Bạn có tự hỏi người dùng của bạn có thể cảm thấy thoải mái như thế nào trong khi đưa ra phản hồi của họ trong một hình thức được lưu trữ trong miền của bạn, thay vì một hình thức được chia sẻ lỏng lẻo được lưu trữ trong miền Google không? Có nhiều tin tốt hơn nếu bạn muốn củng cố hoàn toàn thương hiệu của bạn trong biểu mẫu của bạn. Đọc để biết về một cách tốt hơn để nhúng biểu mẫu của bạn vào trang web của bạn.

Thưởng! Làm thế nào để nhúng Google Form vào một trang web hoặc blog [không có iframe mà không có thương hiệu Google]?

Chúng tôi có một tùy chọn khác trong đó bạn có thể "thực sự" nhúng biểu mẫu Google của bạn bên trong và làm cho nó trông giống như trang web của bạn. Bạn sẽ cần FormFacade, một tiện ích bổ sung cho các biểu mẫu của Google, để đạt được điều đó. Tương tự như tùy chọn HTML nhúng, FormFacade sẽ cung cấp cho bạn một mã nhúng, điều này sẽ cho phép bạn hiển thị biểu mẫu của mình mà không cần iframe và không có thương hiệu Google Form. Cài đặt Formfacade từ GSUITE Marketplace: 1. Nhấp vào ba dấu chấm ở phía trên bên phải của mẫu Google của bạn.2. Nhấp vào "Tiện ích bổ sung" từ menu.3. Nó mở ra một danh sách các ứng dụng thị trường GSUITE. Trên FormFacade "Ứng dụng tìm kiếm" "FormFacade" .4. Nhấp vào hình thu nhỏ của ứng dụng FormFacade và làm theo các bước cài đặt và ủy quyền để thêm nó vào biểu mẫu Google của bạn
Install Formfacade from GSuite Marketplace:
1. Click on three dots on the top right of your Google Form.
2. Click on "Add-ons" from the menu.
3. It opens up a list of GSuite Marketplace apps. On the "Search apps" bar type "Formfacade".
4. Click on the thumbnail of Formfacade app and follow the install and authorization steps to get it added to your Google Form

Cài đặt

Cài đặt

Cài đặt

Cài đặt

Nhận mã HTML sẵn sàng nhúng: Khi bạn đã cài đặt bổ trợ FormFacade, hãy làm theo các bước này để lấy mã HTML để nhúng biểu mẫu Google của bạn vào trang web của bạn mà không cần iframe và không có thương hiệu Google. 1. Nhấp vào biểu tượng câu đố trên thanh trên cùng của biểu mẫu Google của bạn. Đó là nơi bạn sẽ tìm thấy các tiện ích bổ sung mà bạn đã cài đặt.2. Nhấp vào "FormFacade" .3. Trong menu bổ trợ, nhấp vào "Nhúng vào trang web" 4. Đề cập đến CMS của trang web của bạn. Bước này rất quan trọng đối với tiện ích bổ sung để tự động lắp ráp mã nhúng của bạn với mã HTML/CSS phù hợp hơn.5. Nhấp vào "Tiếp theo" và làm theo các bước để nhận mã HTML nhúng.6. Nhúng mã vào trang web của bạn. Và bây giờ, biểu mẫu của bạn sẽ có một cái nhìn phù hợp với chủ đề và màu sắc của trang web của bạn. Ngoài ra, đây là "thực sự" được nhúng trong trang web của bạn và không ở trong iframe. Bạn có thể viết thư cho chúng tôi nếu bạn cần thêm trợ giúp với biểu mẫu của mình. Hãy khác, đừng nói với ai rằng đó là một biểu mẫu của Google. Tôi cá là, sẽ không ai tin bạn!
Once you have Formfacade add-on installed, follow these steps to get the HTML code to embed your Google Form in your website without iframe and without Google branding.
1. Click on the puzzle icon on the top bar of your Google Forms. That's where you will find the add-ons that you installed.
2. Click on "Formfacade".
3. In the add-on's menu, click on "Embed in a webpage"
4. Mention your website's CMS. This step is important for the add-on to automatically assemble your embed code with more appropriate HTML/CSS code.
5. Click on "Next" and follow the steps to get your embed HTML code.
6. Embed the code into your web page. And now, your form will have a matched look with your website's theme and colors. Also, this is "truly" embedded within your web page and not inside a iframe. You can write to us at if you need more help with your form.
Otherwise, don't tell anyone that it is a Google Form. I bet, no one will believe you!

Một bí mật: Bạn có biết rằng bạn đã trả lời biểu mẫu Google trong vài bước trước đây không? Ngoài ra, toàn bộ bài viết này được viết như một phản hồi cho một biểu mẫu Google. Đúng! Bạn có thể "thực sự" nhúng hình thức Google ở ​​bất cứ đâu với FormFacade. Hạnh phúc nhúng!
Yes! You can "truly" embed Google Form anywhere with Formfacade. Happy embedding!

Tôi có thể sử dụng HTML trong các biểu mẫu của Google không?

Google Forms không hỗ trợ mã HTML hoặc định dạng văn bản. Chỉ có một tùy chọn có sẵn để sửa đổi sự xuất hiện của nó và nó được gọi là chủ đề tùy chỉnh. Tuy nhiên, có nhiều cách giải quyết có thể phù hợp với tình huống của bạn.. There is only one option available to modify its appearance and it's called Customize Theme . However, there are many workarounds that can fit your situation.

Làm cách nào để tạo biểu mẫu bằng HTML?

Đây là cách tạo biểu mẫu HTML đơn giản trong sáu bước bao gồm mã..
Chọn một trình soạn thảo HTML. Giống như bạn cần một trình xử lý văn bản để tạo tài liệu văn bản, bạn cần một trình soạn thảo văn bản để tạo mã HTML. ....
Tạo tệp HTML của bạn. ....
Thêm các trường văn bản cơ bản. ....
Thêm các trường bổ sung. ....
Thêm người giữ chỗ. ....
Tùy chỉnh biểu mẫu HTML của bạn với CSS ..

Làm cách nào để tự động tạo biểu mẫu Google?

Xây dựng biểu mẫu Google đầu tiên của bạn cũng có một liên kết đến các biểu mẫu Google trong tài liệu, tờ và slide: Nhấp vào Tệp> Mới> Biểu mẫu để bắt đầu một biểu mẫu trống mới.Hoặc, trong Google Sheets, nhấp vào Công cụ> Tạo một biểu mẫu để bắt đầu một biểu mẫu mới trống được liên kết tự động với bảng tính đó.in Google Sheets, click Tools > Create a Form to start a blank new form that's automatically linked to that spreadsheet.

Làm cách nào để tạo một biểu mẫu Google theo cách thủ công?

Tạo một biểu mẫu mới..
Chọn một tùy chọn: Từ forms.google.com, nhấp vào trống hoặc chọn một mẫu.....
Đặt tên cho biểu mẫu của bạn: Ở góc trên cùng bên trái, nhấp vào mẫu không có tiêu đề hoặc tên mẫu mẫu và nhập tên mới ..
[Tùy chọn] Thực hiện bất kỳ hành động nào sau đây: Thêm mô tả: Theo tên biểu mẫu, thêm văn bản của bạn ..

Bài Viết Liên Quan

Chủ Đề