Ghi lại phản hồi mẫu liên hệ trên trang web của bạn một cách dễ dàng!
Chúng tôi thường tìm thấy các hình thức liên hệ trên danh mục đầu tư hoặc trang web của công ty. Họ phục vụ như một phương tiện giữa công ty và xã hội. Sẽ tuyệt vời như thế nào nếu chúng tôi có thể liên kết biểu mẫu trên trang web của chúng tôi với Google Forms và lấy dữ liệu trong một bảng tính cập nhật động? Blog này đưa bạn qua một loạt các bước để đạt được điều tương tự. Tôi thấy phương pháp này thực sự dễ dàng và dễ dàng vì vậy chúng tôi đi đây.
Điều kiện tiên quyết về việc giữ cho mã biểu mẫu HTML cơ bản của bạn đã sẵn sàng trước khi bạn bắt đầu hướng dẫn này.
Tôi đã tạo một biểu mẫu HTML mẫu để bắt đầu. Tôi đã chọn bảng kiểu và định dạng từ codepen tuyệt vời này. Tôi muốn cảm ơn người sáng tạo vì tác phẩm tuyệt đẹp này. Nó hiện trông giống như thế này -
Mẫu tiếp xúc mẫuBắt đầu nào. Đầu tiên, hãy tạo một biểu mẫu Google có cùng trường với biểu mẫu HTML của bạn. Ngay cả đánh dấu các trường bạn muốn được gắn thẻ ’bắt buộc. Nó sẽ trông giống như thế này.‘required’. It would look something like this.
Bây giờ nhấp vào biểu tượng mắt ở phía trên bên phải của biểu mẫu của bạn. Điều này sẽ tạo ra một bản xem trước của biểu mẫu của bạn. Hãy chắc chắn rằng nó có kết thúc URL của nó với ‘…/viewform’eye icon at the top right of your form. This will generate a preview of your form. Make sure it has its URL ending with ‘…/viewform’
Bây giờ nhấn ctrl+u trên trang này để xem mã nguồn. Sau đó nhấn ctrl+fSo rằng bạn có thể tìm kiếm một cụm từ trong trang đó. Bây giờ cụm từ chúng tôi muốn tìm kiếm là form action. Kết quả sẽ cung cấp cho bạn một thẻ với một URL kết thúc bằng ‘…/formResponse’. Sao chép URL này và lưu nó ở đâu đó để sử dụng trong tương lai [có thể trong tệp .txt].on this
page to see the source code. Then press ctrl+fso that you can search for a phrase in that page. Now the phrase we want to search is form action . The results should give you a tag with a URL ending with ‘…/formResponse’. Copy this URL and save it somewhere for future use [maybe in a .txt file].
Cuộn xuống cùng một trang và bạn sẽ thấy một cái gì đó như thế này. Sao chép các số này [theo cùng một thứ tự] cùng với URL trên.
Hãy quay lại Index.html của bạn và sửa đổi thành phần biểu mẫu của bạn một chút. Bây giờ chúng tôi sẽ thêm thuộc tính name vào từng trường đầu vào của chúng tôi và cung cấp cho chúng giá trị tương ứng với các số chúng tôi thấy ở trên. Như vậy. Lưu ý cách chúng tôi đã viết name = “entry.number” cho mỗi trường. Hãy chắc chắn rằng mỗi trường đầu vào của bạn cũng có ID.
Bây giờ sao chép và dán mã sau vào thẻ trước khi đóng thẻ . Thêm URL …/formResponse trước khi được đề cập vào URL biến bên dưới. Ở đây, chúng tôi đang sử dụng Ajax để gửi biểu mẫu của chúng tôi. Đừng quên cập nhật các số trường với những gì Google Form của riêng bạn tạo ra. Bạn thậm chí có thể thêm thông báo cảnh báo để hiển thị nếu biểu mẫu của bạn được gửi hay không.your own google form generates. You can even add alert messages to show if your form is submitted or not.
Bước cuối cùng là trả về kết quả của chức năng này khi gửi biểu mẫu. Nó có thể được thực hiện bằng dòng mã sau bạn cần thêm khi mở thẻ ctrl+u0 của bạn.
ctrl+u1
Và chúng tôi đã hoàn thành! Hình thức của chúng tôi nên được lên và chạy. Bạn có thể tạo bảng tính Google và xem tất cả các câu trả lời và số liệu thống kê ở một nơi.
Vì vậy, đây là cách chúng tôi tạo một biểu mẫu liên hệ đầy đủ chức năng trong HTML bằng AJAX. Hy vọng bạn đã học được điều gì đó mới từ hướng dẫn nhỏ này. Cảm ơn bạn.Link to HTML File: Tại đây
Link to HTML file: here
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!