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

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](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](http://4.bp.blogspot.com/-NrCHsWf05e8/VAp-mweLCyI/AAAAAAAACqw/cnlIHxPTNz0/s1600/google-drive-tao-bieu-mau.png "Tạo biểu mẫu trên Google Drive")](http://4.bp.blogspot.com/-NrCHsWf05e8/VAp-mweLCyI/AAAAAAAACqw/cnlIHxPTNz0/s1600/google-drive-tao-bieu-mau.png)
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](http://3.bp.blogspot.com/-OEDf7nv8MrQ/VAp-sNyPTpI/AAAAAAAACq4/dS_on5YVRQg/s1600/google-drive-tao-bieu-mau-lien-he-ten.PNG "Thêm trường Tên vào biểu mẫu")](http://3.bp.blogspot.com/-OEDf7nv8MrQ/VAp-sNyPTpI/AAAAAAAACq4/dS_on5YVRQg/s1600/google-drive-tao-bieu-mau-lien-he-ten.PNG)
Đị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](http://1.bp.blogspot.com/-Mxrz8j974ss/VAp-wLkM-vI/AAAAAAAACrA/bdwlpR9N5S8/s1600/google-drive-tao-bieu-mau-email.PNG "Thêm trường Email vào biểu mẫu")](http://1.bp.blogspot.com/-Mxrz8j974ss/VAp-wLkM-vI/AAAAAAAACrA/bdwlpR9N5S8/s1600/google-drive-tao-bieu-mau-email.PNG)
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](http://3.bp.blogspot.com/-s7mcSKkuoPQ/VAp-zteXnmI/AAAAAAAACrI/aykWb_hEGqY/s1600/google-drive-tao-bieu-mau-sdt.PNG "Thêm trường Số Điện Thoại vào biểu mẫu")](http://3.bp.blogspot.com/-s7mcSKkuoPQ/VAp-zteXnmI/AAAAAAAACrI/aykWb_hEGqY/s1600/google-drive-tao-bieu-mau-sdt.PNG)
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](http://3.bp.blogspot.com/-ZLATBsq4A5w/VAp-29g3bmI/AAAAAAAACrQ/usOnynismEA/s1600/google-drive-tao-bieu-mau-loi-nhan.PNG "Thêm trường Lời Nhắn vào biểu mẫu")](http://3.bp.blogspot.com/-ZLATBsq4A5w/VAp-29g3bmI/AAAAAAAACrQ/usOnynismEA/s1600/google-drive-tao-bieu-mau-loi-nhan.PNG)
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](http://4.bp.blogspot.com/-qj5Lube_7wY/VAqFA6nALCI/AAAAAAAACrc/adQ8_nbC6H4/s1600/ma-doan-bieu-mau-lien-he.PNG "Sao chép source code form")](http://4.bp.blogspot.com/-qj5Lube_7wY/VAqFA6nALCI/AAAAAAAACrc/adQ8_nbC6H4/s1600/ma-doan-bieu-mau-lien-he.PNG)
Ở đâ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](http://1.bp.blogspot.com/-ED3tCx_D8hk/VAqG4_01r_I/AAAAAAAACrk/MzCmUT-wIKk/s1600/form-lien-he.PNG "Form liên hệ cơ bản")](http://1.bp.blogspot.com/-ED3tCx_D8hk/VAqG4_01r_I/AAAAAAAACrk/MzCmUT-wIKk/s1600/form-lien-he.PNG)
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](http://1.bp.blogspot.com/-94UzjWnEiwU/VAqHIG8A2xI/AAAAAAAACrs/9u5D2WXlAPE/s1600/form-lien-he-css.PNG "Form liên hệ đã căn chỉnh")](http://1.bp.blogspot.com/-94UzjWnEiwU/VAqHIG8A2xI/AAAAAAAACrs/9u5D2WXlAPE/s1600/form-lien-he-css.PNG)
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”.

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   
Phụ trách thiết kế : Mr.Mika 
Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 
Phụ trách kỹ thuật và kinh doanh : Mr. Sơn
Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com