Tạo form liên hệ với Google Form (Mẫu)

Tại blog này của mình thì mình có một vài bài viết hướng dẫn cho các bạn cách thức để tạo ra một trang liên hệ với cách thức là lợi dụng tiện ích mặc định của Blogger. Mình cũng có dịp đã giới thiệu đến các bạn một số dịch vụ tao form liên hệ miễn phí và nhiều tính năng để các bạn có thể sử dụng. Phân lớn người nghĩ việc tạo form liên hệ với Google Form này thì không tốt cho lắm, vì nó chỉ có một vài giao diện để lựa chọn và không cho chỉnh sửa giao diện nữa, ngoài ra thì phải thủ công vào Spreadsheets để xem tin nhắn từ khách truy cập.

Những suy nghĩ đó thì đã từng đúng thôi, mình đã kiểm nghiệm một vài thủ thuật tạo form trên blog của mình và nó hoạt động khá tốt, bằng việc tạo biểu mẫu với Google Form thứ nhất là nó có rất nhiều tính năng, thứ nhì bạn hoàn toàn có thể lấy nó về dưới dạng HTML để sử dụng và căn chỉnh giao diện, bạn có thể xem qua 2 trang hiện tại mà mình đang sử dụng là "Bài đăng của bạn" và "Gửi thắc mắc". Việc quan tróng nhất đây mình sẽ hướng dẫn cho bạn khi người dùng gửi vào form liên hệ thì nó sẽ tự động gửi mail về hòm thư của bạn.

Hướng dẫn tạo biểu mẫu đơn giản

Mấy ngày trước đây mình tính có một bài viết hướng dẫn đầy đủ chi tiết về cách tạo form trên Google Drive, nhưng mà ngẫm một hồi thì lượng tính năng nó nhiều quá, nếu viết mà hướng dẫn đầy đủ hết thì cũng phải hơn 3000 từ là ít, thế thời gian thì hạn chế, cộng thêm vào đó lười quá nên thôi, quyết định hướng dẫn đơn giản về cách tạo form liên hệ thôi, còn các bạn muốn tìm hiểu thêm thì để từ từ mình sẽ có bài đó hoặc video hướng dẫn cho lẹ.

Câu hỏi đầu tiên Google Form nó nằm ở đâu vậy? Đây là tính năng có trong Google Drive giúp bạn tạo ra một biểu mẫu (form) dùng để các bạn khảo sát, thu thập ý kiến hoặc liên hệ từ ai đó. Do đó việc đầu tiên là bạn hay truy cập vào Google Drive với tài khoản Google của mình qua đường dẫn sau:
https://drive.google.com
tại đây tại phần sidebar bên trái, bạn sẽ thấy nút "Tạo", click chọn vào nó và chọn xuống "Mẫu" (cái này mình hướng dẫn cho những bạn sử dụng ngôn ngữ Tiếng Việt nhé, bạn nào để tiếng Anh rồi thì từ suy ra nhé)

Tạo biểu mẫu trên Google Drive

Tiếp đến bạn điền vào tên biểu mẫu, câu hỏi và các hình thức mà người dùng có thể trả lời, ví dụ mình tạo ra một dải các câu hỏi và trường để người dùng điền vào như sau (lưu ý là xong một mục thì bấm "Đã xong" và thêm một mục mới nhé)

Tên của bạn - Loại » văn bản - Câu hỏi bắt buộc (Bắt buộc khách truy cập có thể điền rồi mới gửi được)

Thêm trường Tên vào biểu mẫu

Địa chỉ email - Loại » Văn bản - Câu hỏi bắt buộc - Cài đặt nâng cao » Xác thực dữ liệu » Văn bản » Địa chỉ email (Việc này sẽ bắt buộc người dùng điền vào địa chỉ email thì mới gửi được biểu mẫu)

Thêm trường Email vào biểu mẫu

Số điện thoại - Loại » Văn bản - Câu hỏi bắt buộc - Cài đặt nâng cao » Số » Lớn hơn hoặc bằng » 900000000 (Như mình nhớ thì số điện thoại thường lớn hơn số này nên quất đại, nếu sai thì sửa lại nhé)

Thêm trường Số Điện Thoại vào biểu mẫu

Lời nhắn - Loại » Văn bản của đoạn văn - Câu hỏi bắt buộc - Bạn có thể cài đặt nâng cao để quy định số lượng ký tự tối thiểu, ở đây mình không quy định cái đó vì chắc cũng không cần.

Thêm trường Lời Nhắn vào biểu mẫu

Tạm thời thế thôi nhé, bạn nào muốn thêm gì vào thì tự thêm, có rất rất nhiều tùy chọn bạn có thể thêm vào, tại vì mình ở đây hướng dẫn tạo form liên hệ nên mình nghĩ thế là tương đối đầy đủ rồi, ta tiếp tục thôi. Sau khi hoàn thành bạn bấm vào "Gửi biểu mẫu" tại đây nó sẽ hiện lên một khung nhỏ kèm theo đường link của biểu mẫu đó để gửi cho người dùng. Tới đây bạn có thể xài thẳng cái này, hoặc chọn nhúng lấy thẻ iframe chèn vào blog, nhưng bạn sẽ không có thể tùy chỉnh giao diện của nó được.

Chèn form có thể tùy chỉnh vào Blogger / Blogspot

Tiếp tục với những bạn muốn tùy chỉnh giao diện nó bằng HTML đây, bạn sao chép và truy cập vào đường dẫn biểu mãu mà ngay trên cũng cấp cho bạn vào trình duyệt của bạn, tại đây bạn chuột phải vào trang và chọn "Xem nguồn trang", hoặc bạn có thể nhấn tổ hợp phím "Ctr + U" cho lẹ. Tiếp tục bạn tìm trong cái nùi code khủng khiếp đó và sao chép đoạn mã nằm trong cặp thẻ sau
<form..
............
</form>
thông thường thì đoạn mã này nằm ở dòng 264 đổ xuống.

Sao chép source code form

Ở đây mình hướng dẫn cho Blogger nhé, các bạn nào xài các mã nguồn khác có thể tự linh động suy nghĩ làm theo vì nó đơn giản lắm. Các bạn hãy vào Blogger, tạo một "Trang trông mới" và dán cái đống mã chúng ta vừa sao chép ở trên vào, quên nữa là phải chuyển khung soạn thảo qua HTML nhé.

Tới phần mệt mỏi nhất đây, tại đây bạn sẽ xóa toàn bộ mọi thẻ "div", "ol", "label", "span" luôn. Nhớ xóa kĩ và để ý coi chừng xóa dư hay thiếu nhé, ví dụ sau khi xóa hết toàn bộ đây là đoạn mã mình có được
<form action="https://docs.google.com/forms/d/1HPmKaxAXUa3Q4h_NzvsKlm2P1QydhX7xwaWIcQZprYE/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">
Tên của bạn *
<input type="text" name="entry.1310909256" value="" class="ss-q-short" id="entry_1310909256" dir="auto" aria-label="Tên của bạn  " aria-required="true" required="" title=""> 
Địa chỉ email * 
<input type="email" name="entry.993095260" value="" class="ss-q-short" id="entry_993095260" dir="auto" aria-label="Địa chỉ email  Phải là địa chỉ email hợp lệ" aria-required="true" required="" title="Ph&#7843;i l&agrave; &#273;&#7883;a ch&#7881; email h&#7907;p l&#7879;"> 
Số điện thoại * 
<input type="number" name="entry.564133062" value="" class="ss-q-short" id="entry_564133062" dir="auto" aria-label="Số điện thoại  Phải là một số lớn hơn hoặc bằng 900,000,000" aria-required="true" required="" step="any" min="9.0E8" aria-valuemin="9.0E8" title="Ph&#7843;i l&agrave; m&#7897;t s&#7889; l&#7899;n h&#417;n ho&#7863;c b&#7857;ng 900,000,000"> 
Lời nhắn *
<textarea name="entry.573936214" rows="8" cols="0" class="ss-q-long" id="entry_573936214" dir="auto" aria-label="Lời nhắn  " aria-required="true" required=""></textarea> <input type="hidden" name="draftResponse" value="[,,&quot;-560026760820713014&quot;] "> <input type="hidden" name="pageHistory" value="0"><input type="hidden" name="fbzx" value="-560026760820713014"> <input type="submit" name="submit" value="G&#432;&#777;i" id="ss-submit" class="jfk-button jfk-button-action "> </form>

đùng sao chép nó nhé vì nó không giống với cấu trúc form bạn tạo đâu, ở đây mình show cho bạn thấy thôi. Bạn cũng có thể xóa toàn bộ "id" và "class" hoặc tự đặt lại theo ý của bạn nhưng mình để yên luôn tận dụng nó cho css vì lười quá. Bây giờ đoạn mã trên chỉ còn lại mô tả và các phần để người dùng nhập thông tin thôi. Giao diện nó sẽ thường trông như thế này

Form liên hệ cơ bản

nhìn kinh dị quá phải không nào, bây giờ mình có đoạn CSS chỉnh sơ lại giao diện nó như trang của mình đây, bạn có thể sử dụng nó hoặc tự viết lại cho đẹp hơn nhé. Bạn chèn đoạn css sau vào dưới đoạn mã tại trang mà bạn tạo
<style type="text/css">
form#ss-form input { padding: 10px; width: 226px; }
form#ss-form select { padding: 10px; width: 250px; }
form#ss-form textarea { padding: 10px; width: 600px; }
input#ss-submit { width: 70px!important; }
</style>
xong thì xuất bản hoặc cập nhật trang của bạn. Nhìn nó đơn giản mà bớt kinh dị hơn lúc này

Form liên hệ đã căn chỉnh

cái này còn tùy thuộc vào CSS mặc định của mỗi trang thì nó mỗi khác nữa nhé.

Tới đây thì người dùng có thể gửi thông tin một cách bình thường nhưng nó sẽ chuyển sang một trang mới, nó báo là gửi thằng công vào Google Form đó, bạn nào không muốn khách truy cập biết là mình sử dụng Google Form thì bạn có thể làm cách sau. Bạn tìm trong thẻ mở "form" bạn sẽ thấy đoạn mã này
target="_self" onsubmit=""
thứ tự có thể khác hoặc khong cùng chỗ, bạn hãy thay thế chúng bằng đoạn mã này.
onsubmit="submitted=true;" target="hidden_iframe"
Tiếp đến có 2 lựa chọn là một hiện khung thông báo đã gửi thành công, và hai là chuyển sang một trang mới báo thành công.

Đối với lựa chọn đầu tiên là hiện thông báo gửi thành công, thì bạn chèn đoạn mã này ngay trên thẻ "form" của bạn
<script type="text/javascript">
var submitted=false;
</script><iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){alert('Gửi thành công!');}" style="display: none;"></iframe>

Đối với lựa chọn thứ hai, thì thay vì chèn đoạn mã trên thì bạn chèn đoạn này
<script type="text/javascript">
var submitted=false;
</script><iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){window.location='ĐỊA CHỈ URL THÔNG BÁO THÀNH CÔNG';}" style="display: none;"></iframe>
chỉ thay đổi một chút xíu bằng Javascript thôi, đơn giản phải không nào, bạn có thể làm cho cả chữ gửi thành công hiện ở chân trang nữa chỉ với một ít hiểu biết bằng Javascript.

Cuối cùng nhận email khi có người gửi biểu mẫu chắc để phần bài viết sau mấy bạn nhé, nó dài quá làm tới đây thì chắc mấy bạn cũng mệt lả rồi. Như vậy thì ngay bài viết sau mình sẽ hướng dẫn các bạn nhận email từ Google Spreadsheets nhé. Google Spreadsheets là file tự tạo nơi lưu trữ toàn bộ dữ liệu của khách truy cập khi điền vào biểu mẫu, nó là một dạng như Microsoft Excel online vậy, nó sẽ tự phân chia tiêu đề theo từng cột kèm theo câu trả lời. Thôi mời các bạn đón xem ở phần kế tiếp "Nhận email khi có người gửi Google Form".

41 bình luận

  1. avatar says

    14:37 Ngày 08 tháng 10 năm 2014

    thay: target="_self" onsubmit=""
    bằng gì vậy bạn! cảm ơn bạn trước!

  2. avatar says

    18:39 Ngày 08 tháng 10 năm 2014

    Mình update lại rồi, cảm ơn bạn nhé thiếu xót lâu thế mà không biết luôn :D

  3. avatar Nặc danh says

    21:15 Ngày 13 tháng 10 năm 2014

    Bai viet chat luong day hihi
    (Chen qua link hehe)
    Http://nepmen.com

  4. avatar says

    16:24 Ngày 14 tháng 10 năm 2014

    bạn ơi làm sao để chèn file mp3 vào blog mà ko sử dụng host phụ, bạn có cách nào mà khi mình click vào ảnh(nút loa) thì nó phát ra âm thanh không, vì mình muốn viết một bài về từ vựng tiếng anh và khi click vào thì nó đọc từ vựng đó :v

  5. avatar says

    22:37 Ngày 14 tháng 10 năm 2014

    ak cậu ơi làm sao để làm được Log In bằng Facebook và Google+ trên thanh menu giống trang này thế DEMO

  6. avatar says

    17:12 Ngày 15 tháng 10 năm 2014

    Cái này chắc để mình viết bài hướng dẫn luôn, dạo này bận mù đầu luôn không có thời gian online trả lời comment luôn :D

  7. avatar says

    17:12 Ngày 15 tháng 10 năm 2014

    XÀi Blogger mà thêm cái khung này vào có ích lợi gì đâu bác @_@

  8. avatar says

    18:53 Ngày 15 tháng 10 năm 2014

    ok cám ơn bạn, đặt gạch hóng bài viết tiếp theo của bạn :v

  9. avatar says

    18:55 Ngày 05 tháng 12 năm 2014

    Bạn ơi cho mình hỏi, khi hiện ra bảng thông báo Gửi Thành Công, mình nhấn nút OK thì làm sao cho trang refesh lại? Cảm ơn bạn

  10. avatar says

    20:25 Ngày 05 tháng 12 năm 2014

    Bạn thêm đoạn này trước thẻ đóng if nhé location.reload();

  11. avatar says

    21:04 Ngày 05 tháng 12 năm 2014

    Bạn có thể ghi đoạn code cụ thể hơn không, mình áp dụng chưa được

  12. avatar says

    14:26 Ngày 06 tháng 12 năm 2014

    <script type="text/javascript">
    var submitted=false;
    </script><iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){alert('Gửi thành công!');location.reload();}" style="display: none;"></iframe>
    Còn không bạn sử dụng cách thứ 2 thêm
    alert('Gửi thành công!')
    vào trước cái window.location và đặt lại địa chỉ chính nó.

  13. avatar says

    20:15 Ngày 06 tháng 12 năm 2014

    Cảm ơn bạn Lâm rất nhiều, mình đã làm được rồi. Thủ thuật này đối với mình quá tuyệt vời :)

  14. avatar says

    16:28 Ngày 15 tháng 12 năm 2014

    Lầm làm ơn post lại đoạn code trước khi sửa để mình so sánh theo kịp
    cái đoạn đó Lam post với dạng tấm ảnh thiếu đoạn nên không theo kịp, đang rất cần, Cảm ơn Lâm.

  15. avatar says

    20:33 Ngày 15 tháng 12 năm 2014

    Đoạn đó rất dài mình nghĩ post vài đây rất mất diện tích bạn ơi, đơn giản chỉ là cặp thẻ form thôi mà.

  16. avatar says

    23:15 Ngày 07 tháng 01 năm 2015

    mình làm được rồi nhưng bố cục nó nhảy tùm lum à bạn ơi
    DEMO

  17. avatar says

    08:08 Ngày 08 tháng 01 năm 2015

    Thêm thẻ <br/> vào sau mỗi thẻ đóng input nha, tại khung soạn thảo bên mình thì mình sử dụng Enter xuống dòng.

  18. avatar says

    11:11 Ngày 08 tháng 01 năm 2015

    bạn ơi còn đối với nút tick vào thì làm sao vậy bạn,cập nhật thêm đi bạn :v

  19. avatar says

    21:12 Ngày 08 tháng 01 năm 2015

    Tất cả tùy chọn bên trong google Form có đầy đủ hết mà T_T

  20. avatar says

    21:21 Ngày 08 tháng 01 năm 2015

    không ý mình là xóa thẻ nào nếu mình thêm mấy mục đó vào ấy :v

  21. avatar says

    21:24 Ngày 08 tháng 01 năm 2015

    Như mình nói trên bài viết thôi xóa toàn bộ mọi thẻ "div", "ol", "label", "span".

  22. avatar says

    07:53 Ngày 11 tháng 01 năm 2015

    Anh mở gmail lên đi ạ...

  23. avatar says

    13:58 Ngày 11 tháng 01 năm 2015

    Anh nhớ là anh bảo em nhiều lần về vấn đề này rồi mà =.=. Bản quyền template đó của người ta, anh không bao giờ support những vấn đề hỗ trợ xóa copyright của trang web.

  24. avatar says

    08:42 Ngày 18 tháng 02 năm 2015

    Bạn làm giúp mình một cái giống kslhoidap của bạn được không

  25. avatar says

    21:39 Ngày 20 tháng 02 năm 2015

    Cái này chắc bạn phải tự thân vận động thôi vì thủ thuật thì mình chia sẻ đủ rồi. Còn giao diện thì mình không share được :D

  26. avatar says

    18:21 Ngày 30 tháng 03 năm 2015

    Lâm Kiều ơi khi người dùng gửi thông tin rồi thì mình vào mail để nhận à? Hay vào driver?

  27. avatar says

    20:31 Ngày 30 tháng 03 năm 2015

    Cuối bài mình có để link về bài Nhận email khi có người gửi Google Form đó, là nó tự gửi nội dung về mail luôn không cần phải vào Google Drive chi nữa.

  28. avatar says

    22:38 Ngày 16 tháng 04 năm 2015

    bạn có thể hd thêm chỗ cặp thẻ style để có 1 trang đẹp k, mình muốn trang trí nó thêm phần sinh động nhưng k rành về code lắm

  29. avatar says

    19:49 Ngày 17 tháng 04 năm 2015

    Về cái ý tưởng làm đẹp thì mình không có rồi, bạn có thể show demo rồi mình hỗ trợ cho bạn chứ mình tự design thì bó tay :D

  30. avatar says

    21:08 Ngày 23 tháng 05 năm 2015

    Bạn ơi chỉ mình cách hiện lên bấm OK và nó refesh về trang chủ đc không bạn ???

  31. avatar says

    21:10 Ngày 23 tháng 05 năm 2015

    Bạn đặt url trang chủ của bạn vào cái script cuối cùng là được mà.

  32. avatar says

    22:57 Ngày 23 tháng 05 năm 2015

    Bạn có thể chỉ mình đoạn cụ thể hơn không ??? Mình ko biết đưa vào đâu cả ! thank bạn

  33. avatar says

    21:16 Ngày 04 tháng 08 năm 2015

    mình không hiểu đoạn tìm đoạn code form ..... form. Mình tìm ko ra, mà mình nhìn đoạn code bạn tìm bên trên và đoạn code bên dưới sau khi bạn xóa các thẻ nó ko giống nhau. hic híc. bạn hướng dẫn cụ thể được không, thanks bạn, bài viết bạn rất hay

  34. avatar says

    19:32 Ngày 06 tháng 08 năm 2015

    Bạn có thể bấm Ctr + F tìm <form là thấy ngay cái thẻ nó nằm đâu. Cái đoạn code trên và dưới nó giống nhau mà :D. Mình xóa toàn bộ chỉ chừa lại thẻ "input" ở trong form thôi.

  35. avatar says

    06:37 Ngày 12 tháng 08 năm 2015

    Cảm ơn bạn rất nhiều. Nhờ hướng dẫn của bạn mình đã làm xong biểu mẫu đặt hàng cho blog của mình. Thực sự rất cảm ơn bạn ! :)

  36. avatar says

    19:24 Ngày 20 tháng 04 năm 2016

    Hi Lâm Kiều ..Mình đã hoàn thành xong cái survey cho mọi người, và mình gửi bằng email cho từng cá nhân và điều đặc biệt là mình quên cho mọi người điền tên vào form. Google chỉ tra cho mình kết quả phân tích mà mình thì quên điền tên vào bảng survey. Bây giờ mình có thể check xem bảng survey này là của ai đến từ hộp mail nào k ?? Nếu bạn biết cho mình lời khuyên . Cam ơn bạn

  37. avatar says

    00:19 Ngày 25 tháng 08 năm 2016

    ad có thể lam cho em không am làm lỗi ạ. phí e lo dc hết cảm ơn ad. tùy biến gaio diejn lại thoi

  38. avatar says

    12:15 Ngày 14 tháng 09 năm 2016

    Lâm Kiều ơi, giúp mình chút. mình muốn hiện cái popup là link hoặc hình ảnh khi ấn vào thì làm thế nào vậy bạn. Cảm ơn bạn trước nhé

  39. avatar says

    12:20 Ngày 14 tháng 09 năm 2016

    à mình bổ sung thêm, nó hiển thị giống như link này này bạn http://namloan.blogspot.com/2016/03/tao-cua-so-popup-don-gian-dung-script-cho-blogspot.html

  40. avatar says

    12:40 Ngày 14 tháng 09 năm 2016

    Mình chưa hiểu ý bạn lắm, blog đó có hướng dẫn rồi mà bạn :D

  41. avatar says

    08:21 Ngày 15 tháng 09 năm 2016

    Như hướng dẫn của bạn, đoạn code ở phần này

    1 là đưa ra thông báo 2 là load trang mới

    Bạn xem giúp mình, giờ mình muốn thay đổi thành hiện ra popup thông báo như demo của trang này http://demonamloan.blogspot.com/2016/03/demo-tao-popup-cho-lien-ket-trong.html thì sửa phần code trên như thế nào. Cảm ơn bạn

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.