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ó
<form action="" target="" method="">
Trong này chứa các thẻ input hoặc textarea
<input type="submit" value="Submit"> // Hoặc <button type="submit">Submit</button>
</form>
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
<input name="" type="" value=""/>
+ Loại sử dụng để điền
<input name="" placeholder="" type="text" value=""/>
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:
<input name="" type="radio" value=""/>
+ Loại sử dụng cho hộp kiểm:
<input name="" type="checkbox" value=""/>
+ Loại sử dụng cho số:
<input name="" placeholder="" type="number" value=""/>
+ Loại sử dụng cho ngày tháng:
<input name="" placeholder="" type="date" value=""/>
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ụ
<input name="" placeholder="Họ tên" required="" type="" value=""/>
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:
<input name="" pattern="(\+84|0)\d{9,10}" placeholder="Số điện thoại" required="" type="" value=""/>
Hoặc với địa chỉ email có thể xác thực như sau:
<input name="" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" placeholder="Email" required="" type="" value=""/>
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
<form action="" class="contact-form" target="_self" method="POST">
<div class="form-title">Họ tên (tùy chọn điền)</div>
<div class="form-group">
<input class="input" name="" placeholder="Câu trả lời của bạn..." type="text" value=""/>
<i class="bar"></i>
</div>
<div class="form-title">Giới tính (tùy chọn trắc nghiệm)</div>
<div class="form-group">
<div class="check-box inline">
<input class="radio" id="male" name="" required="" type="radio" value="Nam">
<label for="male">Nam</label>
</div>
<div class="check-box inline">
<input class="radio" id="female" name="" required="" type="radio" value="Nam">
<label for="female">Nữ</label>
</div>
</div>
<div class="form-title">Email (tùy chọn điền)</div>
<div class="form-group">
<input class="input" name="" type="text" required="" value=""/>
<i class="bar"></i>
</div>
<div class="form-title">Địa chỉ (tùy chọn điền)</div>
<div class="form-group">
<input class="input" name="" placeholder="Câu trả lời của bạn..." required="" type="text" value=""/>
<i class="bar"></i>
</div>
<div class="form-title">Số điện thoại (tùy chọn điền)</div>
<div class="form-group">
<input class="input" name="" placeholder="Câu trả lời của bạn..." required="" type="text" value=""/>
<i class="bar"></i>
</div>
<div class="form-title">Chọn các dịch vụ (tùy chọn hộp kiểm)</div>
<div class="form-group">
<div class="form-group">
<div class="check-box">
<input class="checkbox" id="service-1" name="" type="checkbox" value="Dịch vụ 1">
<label for="service-2">Dịch vụ 1</label>
</div>
<div class="check-box">
<input class="checkbox" id="service-2" name="" type="checkbox" value="Dịch vụ 2">
<label for="service-2">Dịch vụ 2</label>
</div>
<div class="check-box">
<input class="checkbox" id="service-3" name="" type="checkbox" value="Dịch vụ 3">
<label for="service-3">Dịch vụ 3</label>
</div>
</div>
</div>
<div class="form-title">Ghi chú (tùy chọn điền)</div>
<div class="form-group textarea">
<textarea name="" placeholder="Câu trả lời của bạn..." value=""></textarea>
<i class="bar"></i>
</div>
<div class="form-group checked">
<input class="checkbox" id="checkbox" name="checkbox" required="" type="checkbox">
<label for="checkbox">Tôi đã đọc và đồng ý với <a href="" title="chính sách và điều khoản trang web" rel="noopener" target="_blank">chính sách và điều khoản trang web</a></label>
</div>
<div class="form-submit">
<button class="theme-button blue" aria-label="Gửi" type="submit">Gửi</button>
</div>
</form>
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 1: Tại giao diện Google Biểu mẫu click chuột vào biểu tượng dấu (Trống) ở hàng Bắt đầu biểu mẫu mới
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
Khi tạo xong các câu hỏi, các bạn bấm vào biểu tượng con mắt ở góc trên củng bên phải để xem trước form, giả sử khi tạo xong ta có một biểu mẫu mới như hình minh họa sau:
Bước 4: Chèn form liên hệ vào blogspot
Đầu tiên bạn sẽ nhúng form liên hệ vào vị trí muốn hiển thị trong blogspot trước, như ví dụ hình minh họa trên bạn sẽ chèn mẫu form như sau:
<form action="" method="POST" target="_self">
<input name="" placeholder="Họ tên" type="text" value=""/>
<input name="" placeholder="Email" type="text" required="" value=""/>
<input name="" placeholder="Địa chỉ" required="" type="text" value=""/>
<input name="" placeholder="Số điện thoại" required="" type="text" value=""/>
<textarea name="" placeholder="Ghi chú" value=""></textarea>
<button type="submit">Gửi</button>
</form>
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ại đây, các bạn nhấn tổ hợp phím Ctrl+F mở thẻ tìm kiếm, các bạn gõ từ khóa <form nhấn enter, tại đây các bạn copy cái link form vào mục action của form liên hệ
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ệ.
Hướng dẫn tìm entry trong Google Form mới
Giả sử sau khi tách và copy xong, ta có được form liên hệ như sau:
<form action="https://docs.google.com/forms/u/2/d/e/1FAIpQLSdtXfzcWjQCkM7XY09CMugtxi1x0GPMCuXKUWIJEI98QppTyg/formResponse" method="POST" target="_self">
<input name="entry.6626062" placeholder="Họ tên" type="text" value=""/>
<input name="entry.1115283297" placeholder="Email" type="text" required="" value=""/>
<input name="entry.612338552" placeholder="Địa chỉ" required="" type="text" value=""/>
<input name="entry.2024468259" placeholder="Số điện thoại" required="" type="text" value=""/>
<textarea name="entry.2055259011" placeholder="Ghi chú" value=""></textarea>
<button type="submit">Gửi</button>
</form>
Đến đây là chúng ta đã hoàn thành các bước tạo mới và chèn google form vào blogspot, tuy nhiên khi ai đó hoàn thành form va nhấn nút Gửi đi, trang sẽ bị chuyển hướng về trang google form mà điều này bạn lại không muốn do đó bạn cần thêm một thẻ iframe để chặn chuyển hướng, thẻ iframe này được chèn trước thẻ đóng </body> trong template, ví dụ:
<iframe name="_iframe" width="0" height="0" border="0" style="display: none;"></iframe>
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.
<div class="form-title">Câu hỏi</div>
<div class="check-box">
<input id="" name="" type="radio" value="Câu trả lời"/>
<label for="">Câu trả lời</label>
</div>
Ví dụ:
<div class="form-title">Câu hỏi</div>
<div class="check-box">
<input id="answer-1" name="question-1" required="" type="radio" value="Câu trả lời 1"/>
<label for="answer-1">Câu trả lời 1</label>
</div>
<div class="check-box">
<input id="answer-2" name="question-1" required="" type="radio" value="Câu trả lời 2"/>
<label for="answer-2">;Câu trả lời 2</label>
</div>
<div class="check-box">
<input id="answer-3" name="question-1" required="" type="radio" value="Câu trả lời 3"/>
<label for="answer-3">;Câu trả lời 3</label>
</div>
Hiển thị
Với câu hỏi dạng này, chỉ cần tạo môt câu hỏi duy nhất ở google form sau đó lấy trường name sử dụng chung ví dụ với 3 thẻ input ở trên đều sử dung chung name="entry.1219559889" và đã là trắc nghiệm chọn một câu trả lời thì cần thêm yêu cầu required=""
+ 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
<div class="form-title">Câu hỏi</div>
<input id="" name="" type="checkbox" value="Câu trà lời"/>
<label for="">Câu trả lời</label>
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ụ:
<div class="form-title">Câu hỏi</div>
<div class="check-box">
<input id="checkbox" name="entry.2024468259" required="" type="checkbox" value="Câu trả lời"/>
<label for="checkbox">Câu trả lời</label>
</div>
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:
<div class="form-title">Chọn dịch vụ</div>
<div class="form-group">
<div class="check-box">
<input id="answer-1" name="" type="checkbox" value=""/>
<label for="answer-1">Dịch vụ 1</label>
</div>
<div class="check-box">
<input id="answer-2" name="" type="checkbox" value=""/>
<label for="answer-2">Dịch vụ 2</label>
</div>
<div class="check-box">
<input id="answer-3" name="" type="checkbox" value=""/>
<label for="answer-3">Dịch vụ 3</label>
</div>
<div class="check-box">
<input id="answer-4" name="" type="checkbox" value=""/>
<label for="answer-4">Dịch vụ 4</label>
</div>
<div class="check-box">
<input id="answer-5" name="" type="checkbox" value=""/>
<label for="answer-5">Dịch vụ 5</label>
</div>
</div>
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:
<div class="form-title">Chọn dịch vụ</div>
<div class="form-group">
<div class="check-box">
<input id="answer-1" name="entry.581661105" type="checkbox" value="Cột 1"/>
<label for="answer-1">Dịch vụ 1</label>
</div>
<div class="check-box">
<input id="answer-2" name="entry.58891711" type="checkbox" value="Cột 1"/>
<label for="answer-2">Dịch vụ 2</label>
</div>
<div class="check-box">
<input id="answer-3" name="entry.1717986809" type="checkbox" value="Cột 1"/>
<label for="answer-3">Dịch vụ 3</label>
</div>
<div class="check-box">
<input id="answer-4" name="entry.1411278763" type="checkbox" value="Cột 1"/>
<label for="answer-4">Dịch vụ 4</label>
</div>
<div class="check-box">
<input id="answer-5" name="entry.12886100" type="checkbox" value="Cột 1"/>
<label for="answer-5">Dịch vụ 5</label>
</div>
</div>
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 script
Sau 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ụ:
<form action="" onsubmit="validate()" method="POST" target="_iframe">
<input name="" placeholder="Họ tên" type="text" value=""/>
<input name="" placeholder="Email" type="text" required="" value=""/>
<input name="" placeholder="Địa chỉ" required="" type="text" value=""/>
<input name="" placeholder="Số điện thoại" required="" type="text" value=""/>
<textarea name="" placeholder="Ghi chú" value=""></textarea>
<button type="submit">Gửi</button>
</form>
<div class="processing hidden">Đang gửi...</div>
<div class="success hidden">Thư của bạn đã được gửi đi!</div>
Trong template, bạn chèn một đoạn script như sau:
<script>//<![CDATA[
function validate() {
document.querySelector('button[type=submit]').disabled = true;
document.querySelector('.processing').classList.remove('hidden');
function one(callback) {
setTimeout(function() {
document.querySelector('.processing').classList.add('hidden');
document.querySelector('.success').classList.remove('hidden');
callback();
}, 4000);
}
function two() {
setTimeout(function() {
location.reload();
}, 3000);
}
one(two);
//]]></script>
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.
hình như Google Forms mấy hôm nay không cho tách name entry ra thì phải anh à
Trả lờiXóatuyệt vời - rất dễ hiểu có điều hiệu ứng form không được bạn ạ
Trả lờiXóahiệu ứng form mình làm không được - giúp mình với được không
Trả lờiXóa