Bạn vẫn thấy một số blog sử dụng biểu mẫu liên hệ bằng google form thay cho biểu mẫu liên hệ của blog. Đơn giản là vì khi sử dụng google form bạn có nhiều tùy chọn lấy dữ liệu từ người dùng hơn so với contact form mặc định, ngoài ra bạn có thể tùy biến được nhiều thứ ví dụ tạo trắc nghiệm, hộp kiểm…,thay vì phải điền.
Bài hôm nay mình chia thành những phần chính như sau:
1. Cách tạo form liên hệ
Mẫu form liên hệ bắt buộc phải có
Vấn đề chính sử dụng các thẻ input cho những mục đích khác nhau, do đó căn cứ vào loại type="" trong thẻ input để phân loại. Có rất nhiều loại type trong thẻ input nhưng chúng ta chỉ sử dụng một số loại chính. Mẫu thẻ input bắt buộc
+ Loại sử dụng để điền
Lưu ý: type="text" có thể sử dụng thay cho type="tel" (Số điện thoại), type="email" (địa chỉ email) vì chung lại nó đều là dạng điền.
+ Loại sử dụng để trắc nghiệp có từ 2 thẻ input trở lên:
+ Loại sử dụng cho hộp kiểm:
+ Loại sử dụng cho số:
+ Loại sử dụng cho ngày tháng:
Như vậy tùy theo mục đích mà chèn các thẻ input phù hợp, ngoài ra có thể sử dụng required="" trong thẻ input để thêm tùy chọn bắt buộc, ví dụ
Ngoài ra bạn có thêm tùy chọn mở rộng xác thực pattern để điền theo yêu cầu.
Lấy ví dụ với tùy chọn điền số điện thoại bằng số và mã vùng chỉ ở Việt Nam, bạn sẽ thêm:
Hoặc với địa chỉ email có thể xác thực như sau:
Ví dụ về mẫu form bao gồm một số tùy chọn: điền, trắc nghiệm và hộp kiểm
Hiển thị
2. Cách tạo google form
Cách tạo form liên hệ bằng google form rất đơn giản, ai cũng có thể làm được nên tạo mới form trên trình duyệt web của máy tính để dễ tùy biến và chèn vào blog hơn. Đầu tiên để tạo được form, các bạn truy cập liên kết https://docs.google.com/forms/ đăng nhập bằng tài khoản google muốn lưu và quản trị form này trường hợp trình duyệt đang đăng nhập nhiều tài khoản google.
Ở đây có 2 trường hợp khi tạo form mới đó là tạo một form duy nhất sử dụng chung cho tất cả các form khác nhau khi chèn vào blogspot hoặc với mỗi form khi chèn vào blogspot lại tạo một google form mới vì như cách tạo form liên hệ trong phần một mình đã đề cập có nhiều loại type trong thẻ input. Nếu bạn tạo form liên hệ chỉ sử dụng các thẻ input type="text" để điền thông thường nó khác với bạn tạo form dịch vụ có nhiều tùy chọn hộp kiểm type="checkbox" hoặc tạo form trắc nghiệm sử dụng các thẻ input type="radio". Do đó cách ứng dụng làm sao là quyết định ở bạn làm sao chó nó phù hợp.
3. Các bước tạo google form
Bước 2: Tại giao diện tạo form mới, chúng ta có hình như sau:
Trong đó:
Tiêu đề của form
Mô tả biểu mẫu (không bắt buộc phải ghi)
Chọn Trả lời ngắn cho tất cả các câu hỏi chỉ trừ thẻ textarea mới chọn Đoạn
Đặt tên cho câu hỏi
Bấm dấu + để tạo câu hỏi khác
Di chuyển sắp xếp các câu hỏi
Bước 3: xem trước form
Bước 4: Chèn form liên hệ vào blogspot
Với mỗi câu hỏi, sẽ chèn bằng một thẻ input có loại type="text", trừ phần Ghi chú, Nội dung thay bằng thẻ textarea. Nếu bạn muôn câu hỏi nào bắt buộc phải điền thêm trường required="" trong thẻ input
Bước 5: Tách google form
Quay trở lại giao diện xem trước google form, trên máy tính các bạn nhấn tổ hợp phím Ctrl+U hoặc chuột phải vào giao diện chon Xem nguồn trang để tab mới view-source của giao diện xem trước google form
Tương tự, các bạn gõ tìm kiếm từ khóa type="text", copy cái trường name trong thẻ input type="text" để chèn vào trường name trong form liên hệ
Các bạn lưu ý, với mỗi trường name tương ứng với một câu hỏi, các bạn copy lần lượt vào các thẻ input tương ứng của form liên hệ. Riêng trường hợp với câu hỏi dạng Đoạn, các bạn gõ tìm kiếm từ khóa <textarea nhấn enter là ra và cũng copy trường name vào thẻ textarea của form liên hệ.
Giả sử sau khi tách và copy xong, ta có được form liên hệ như sau:
Sau khi chèn xong thẻ iframe, các bạn copy _iframe thay thế cho target="_self" trong form thành target="_iframe".
4. Phần mở rộng
Phần này mở rộng về cách ứng dụng các thẻ input và tạo hiệu ứng submit form bằng script
Sử dụng dụng các thẻ input
2 thẻ input thường hay sử dụng với form dịch vụ, mua bán là 2 loại type="radio" và type="checkbox", về cơ bản chúng đều được sử dụng cho tùy chọn Tích chọn cho các Câu hỏi đã có sẵn Câu trả lời, chỉ khác với type="radio" nhiều câu hỏi chỉ chọn một câu trả lời duy nhất còn với type="checkbox" nhiều câu hỏi sử dụng nhiều hơn một câu trả lời
+ Loại type="radio" sử dụng cho câu hỏi trắc nghiệm nhiều câu hỏi chọn một câu trả lời.
Ví dụ:
Hiển thị
+ Loại type="checkbox" sử dụng cho hộp kiểm có thể chọn hoặc bỏ chọn câu trả lời và với nhiều câu hỏi có thể chọn nhiều câu trả lời
Trường hợp với câu hỏi có một câu trả lời duy nhất thì chỉ cần tạo mới câu hỏi dạng Trả lời ngắn tại google form, ví dụ:
Hiển thị:
Trường hợp với câu hỏi với tùy chọn nhiều câu trả lời, lúc tạo google form thay vì chọn Trả lời ngắn, bạn thay bằng Lưới hộp kiểm
Các bạn thêm các tùy chọn khác nhau ở phần Hàng nhưng chỉ chọn duy nhất một Cột mà thôi, sau đó trong mẫu liên hệ ở blogspot, các bạn thêm các thẻ các input type="checkbox" cho nhiều tùy chọn ví dụ như sau:
Tiếp theo tại tab view-source của trang xem trước google form, gõ tìm kiếm từ khóa _sentinel, nó sẽ có tổng cộng số thẻ input bằng với số tùy chọn lúc bạn tạo mới ở phần Hàng, giả sử bạn tạo 5 tùy chọn nó sẽ có tổng cộng 5 thẻ input. Nhưng bạn lại không quan tâm đến thẻ input này, mà tìm thẻ input đứng ngay trước nó
Tại đây bạn copy các trường name="" thay vào thẻ input tương ứng của mẫu liên hệ trong blogspot, ví dụ sau khi thêm ta có như sau:
Hiển thị
Về giá trị value trong thẻ input, các bạn thay bằng value="Cột 1" cho tất cả các thẻ, vì lúc tạo mới bạn chỉ thêm một cột duy nhất.
Tạo hiệu ứng submit form bằng scriptSau khi form được hoàn thành và gửi đi, để tạo thêm phần chuyên nghiệp bạn nên viết thêm một đoạn script nhỏ bằng javascript hoặc bằng jquery thông báo cho người gửi biết được họ đã gửi form thành công.
Cách làm đơn giản nhất bạn thêm onsubmit="validate()" trong form và thêm 2 thẻ div với các dòng text thông báo nhưng bị ẩn đi sau khi form được hoàn thành mới hiện ra, ví dụ:
Trong template, bạn chèn một đoạn script như sau:
Thêm style cho class .hidden
.hidden{display: none;}
5. Kết luận
Nếu chỉ đọc và làm theo một cách thụ động chưa chắc bạn đã hiểu hết, nhưng trong quá trình làm nhiều lần bạn sẽ dần hiểu ra và có kinh nghiệm nhiều hơn. Về phần giao diện của form thì trên trang codepen đã có sẵn rất nhiều mẫu form được design sẵn rất đẹp, bạn lấy về blog mình thôi. Ngoài ra nếu đọc đến đoạn nào không hiểu, bạn có thể đăng nhận xét để mình giải đáp.