Có một giải pháp khác là dùng Google Docs và chèn mã nhúng vào Website, tuy nhiên bạn biết đấy Form Google lại có nhược điểm là sử dụng giao diện mẫu khiến website của bạn thiếu chuyên nghiệp. Hôm nay mình sẽ giới thiệu các bạn cách Custom Google Form trong website.
Lấy Form và chèn form vào Website
Đầu tiên bạn tạo 1 biểu mẫu bất kỳ, ở đây mình có 1 biểu mẫu về Form đăng ký mua hàng: http://goo.gl/forms/awYI2eEXcY
Sau đó bạn xem mã nguồn trang (Ctrl+U) và tiến hành như sau:
– Copy đoạn code bắt đầu từ thẻ mở <form> đến thẻ đóng </form>
– Loại bỏ toàn bộ thẻ div và các thẻ khác giữ lại các thẻ input. (Đừng lỡ tay xóa các thuộc tính trong thẻ form và inputnhé :D)
– Xóa các thẻ input có type=”hidden”
Kết quả là bạn có 1 form như sau
<form action="...">Bạn chèn form vào website, bạn có thể thêm class cho form và tiến hành trang trí bằng css. Nếu bạn dùng Boostrap lại càng tiện lợi hơn vì nó có hỗ trợ sẵn các mẫu input khá đẹp mắt.
<input ... />
<input ... />
<input ... />
<input ... />
</form>
Tạo xác nhận tùy chỉnh cho form
Nhìn có vẻ ổn rồi đó, tuy nhiên lúc này bạn submit thử xem kết quả là nó tự direct sang trang xác nhận của google (Form trên của mình thì hoạt động rùi nhé). Lúc này bạn tìm thuộc tính target=”_self” trong thẻ form thay bằng target=’hidden_iframe’.
Thêm đoạn code sau vào header của website hoặc ngay trước form
<iframe name="hidden_iframe"Tác dụng của đoạn này là chống direct về google form. Bây giờ bạn thêm 1 dòng sau form ví dụ như
id="hidden_iframe"
style="display:none;"
onload="if(submitted){};"
>
</iframe>
<p class=”notice”>Chúng tôi sẽ liên hệ trực tiếp với bạn qua số điện thoại này</p>
Sau đó bạn thêm đoạn Script sau để tạo xác nhận sau khi người dùng submit form.
<script>Việc còn lại của bạn là style nốt cái h3 nhé.
$( document ).ready(function() {
$("#ss-form").submit(function( event ) {
$("#ss-form").hide();
$(".notice").html("<h3>Chúc mừng bạn đã đăng ký thành công</h3>");
});
});
</script>
Chúc các bạn thành công.
0 nhận xét: