Tùy chỉnh giao diện Google Form
Cách tùy chỉnh Google Form
Với cách này các bạn có thể tạo ra một form đẹp mắt và quan trọng hơn là không có chữ Powered by Google Docs, làm cho form đăng ký chuyên nghiệp hơn rất nhiều.
Bước 1: Tạo form
Trước đây mình đã có viết một bài về cách sử dụng Google Form, các bạn theo dõi tại đây:
Bước 2: Copy Source code của Form
Giả sử mình muốn thay đổi lại giao diện của form này, mình sẽ phải chuột vào trang khảo sát và chọn View Page Source
Các bạn copy hết đoạn code từ <form action=“…. đến hết form </form> và đoạn Script bên dưới. Ví dụ trong link trên, mình sẽ copy được đoạn souce như thế này:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <form action="https://docs.google.com/spreadsheet/formResponse?formkey=dFNYNC1Xd3JDVDdtNHNyRUQ0Y0J1MkE6MQ&theme=0AX42CRMsmRFbUy1iOGYwN2U2Mi1hNWU0LTRlNjEtYWMyOC1lZmU4ODg1ODc1ODI&ifq" method="POST" id="ss-form"><br><div class="errorbox-good"><div class="ss-item ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_6">Họ và tên</label><label class="ss-q-help" for="entry_6"></label><input type="text" name="entry.6.single" value="" class="ss-q-short" id="entry_6"></div></div></div><br> <div class="errorbox-good"><div class="ss-item ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_7">Số điện thoại</label><label class="ss-q-help" for="entry_7"></label><input type="text" name="entry.7.single" value="" class="ss-q-short" id="entry_7"></div></div></div><br> <div class="errorbox-good"><div class="ss-item ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_8">Email</label><label class="ss-q-help" for="entry_8"></label><input type="text" name="entry.8.single" value="" class="ss-q-short" id="entry_8"></div></div></div><br> <div class="errorbox-good"><div class="ss-item ss-paragraph-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_9">Ý kiến phản hồi</label><label class="ss-q-help" for="entry_9"></label><textarea name="entry.9.single" rows="8" cols="75" class="ss-q-long" id="entry_9"></textarea></div></div></div><br><input type="hidden" name="pageNumber" value="0"><input type="hidden" name="backupCache" value=""><div class="ss-item ss-navigate"><div class="ss-form-entry"><input type="submit" name="submit" value="Submit"></div></div></form><script type="text/javascript"> (function() {var divs = document.getElementById('ss-form').getElementsByTagName('div');var numDivs = divs.length;for (var j = 0; j < numDivs; j++) {if (divs[j].className == 'errorbox-bad') {divs[j].lastChild.firstChild.lastChild.focus();return;}}for (var i = 0; i < numDivs; i++) {var div = divs[i];if (div.className == 'ss-form-entry' &&div.firstChild &&div.firstChild.className == 'ss-q-title') {div.lastChild.focus();return;}}})(); </script></div> |
Bước 3: Dán code vào vị trí bạn muốn hiển thị form.
Ví dụ các bạn muốn gắn form vào Google Site, các bạn chỉnh sửa site, sau đó chọn Insert, kế tiếp chọn HTML Box
Cài đặt HTML Box và dán code vào là xong.
Bước 4: Chỉnh sửa code và thêm CSS
Lúc này tùy mục đích của mỗi người mà chúng ta sẽ tùy chỉnh chiều cao, chiều ngang của form như thế nào.
Chúc các bạn thành công !
http://www.onlineseeding.vn
Ví dụ
http://www.danangcityhotel.com/home/mau-dang-ky-khach-san-da-nang
Trả lờiXóa