Nhiều cụ hay tạo form ở google docs để mời khách hàng đăng ký số điện thoại và Email vào đó nhưng ngặt nỗi mẫu mã của google docs lại hơi đơn điệu và nhiều lúc không theo ý mình. Cháu sẽ hướng dẫn các cụ làm mấy thủ thuật thế này, cháu copy từ website của cháu thôi, các cụ đọc ở đây cũng được không thì cháu lại mang tiếng là câu view:
Chào các cụ, Để tăng tỉ lệ mua hàng hoặc đăng ký dịch vụ của cụ, nhất thiết cụ phải cần một Form liên hệ chuyên nghiệp. Hiện nay có rất nhiều Plugin hỗ trợ cụ tạo Form trong website, các cụ dùng WP thường hay sử dụng Contact Form 7, tuy nhiên hạn chế […]
Chào các cụ,
Để tăng tỉ lệ mua hàng hoặc đăng ký dịch vụ của cụ, nhất thiết cụ phải cần một Form liên hệ chuyên nghiệp.
Hiện nay có rất nhiều Plugin hỗ trợ cụ tạo Form trong website, các cụ dùng WP thường hay sử dụng Contact Form 7, tuy nhiên hạn chế ở chỗ mỗi khi có kết quả gửi về cụ sẽ nhận được 1 Email, và nếu có 1000 khách hàng thì sao, lúc này cụ sẽ vô cùng khó quản lý.
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 cụ 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 cụ thiếu chuyên nghiệp.
Hôm nay mình sẽ giới thiệu các cụ cách Custom Google Form trong website.
Lấy Form và chèn form vào Website
Đầu tiên cụ 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 đó cụ 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é
)
– Giữ lại các thuộc tính required trong input
– Xóa các thẻ input có type=”hidden”
Kết quả là cụ có 1 form như sau
<form action="...">
<input ... required .../>
<input ... required .../>
<input ... />
<input ... />
</form>
cụ chèn form vào website, cụ có thể thêm class cho form và tiến hành trang trí bằng css. Nếu cụ 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.
Lưu ý: Nếu cụ chưa có thư viện Jquery trong header thì cụ có thể thêm thư viện Jquery ngay trước thẻ <form><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"type="text/javascript"></script>
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 cụ submit thử xem kết quả là nó tự direct sang trang xác nhận của google. Lúc này cụ 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 sau form
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){};">
</iframe>
<script>
$(document).ready(function(){ $("#ss-form").submit(function(event){ $("#ss-form").hide(); alert("Cảm ơn cụ đã gửi phản hồi về cho chúng tôi. Chúng tôi sẽ liên hệ lại với cụ"); }); });
</script>
Giải thích:
– Đoạn iframe cho phép cụ ngăn redirect về google form
– Đoạn script có chức năng thông báo cho người dùng khi họ đã gửi form.
Lời kết
Hy vọng qua bài viết này các cụ có thể tạo được một form như ý cho riêng mình.
Chào các cụ, Để tăng tỉ lệ mua hàng hoặc đăng ký dịch vụ của cụ, nhất thiết cụ phải cần một Form liên hệ chuyên nghiệp. Hiện nay có rất nhiều Plugin hỗ trợ cụ tạo Form trong website, các cụ dùng WP thường hay sử dụng Contact Form 7, tuy nhiên hạn chế […]
Chào các cụ,
Để tăng tỉ lệ mua hàng hoặc đăng ký dịch vụ của cụ, nhất thiết cụ phải cần một Form liên hệ chuyên nghiệp.
Hiện nay có rất nhiều Plugin hỗ trợ cụ tạo Form trong website, các cụ dùng WP thường hay sử dụng Contact Form 7, tuy nhiên hạn chế ở chỗ mỗi khi có kết quả gửi về cụ sẽ nhận được 1 Email, và nếu có 1000 khách hàng thì sao, lúc này cụ sẽ vô cùng khó quản lý.
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 cụ 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 cụ thiếu chuyên nghiệp.
Hôm nay mình sẽ giới thiệu các cụ cách Custom Google Form trong website.
Lấy Form và chèn form vào Website
Đầu tiên cụ 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 đó cụ 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é
)– Giữ lại các thuộc tính required trong input
– Xóa các thẻ input có type=”hidden”
Kết quả là cụ có 1 form như sau
<form action="...">
<input ... required .../>
<input ... required .../>
<input ... />
<input ... />
</form>
cụ chèn form vào website, cụ có thể thêm class cho form và tiến hành trang trí bằng css. Nếu cụ 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.
Lưu ý: Nếu cụ chưa có thư viện Jquery trong header thì cụ có thể thêm thư viện Jquery ngay trước thẻ <form><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"type="text/javascript"></script>
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 cụ submit thử xem kết quả là nó tự direct sang trang xác nhận của google. Lúc này cụ 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 sau form
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){};">
</iframe>
<script>
$(document).ready(function(){ $("#ss-form").submit(function(event){ $("#ss-form").hide(); alert("Cảm ơn cụ đã gửi phản hồi về cho chúng tôi. Chúng tôi sẽ liên hệ lại với cụ"); }); });
</script>
Giải thích:
– Đoạn iframe cho phép cụ ngăn redirect về google form
– Đoạn script có chức năng thông báo cho người dùng khi họ đã gửi form.
Lời kết
Hy vọng qua bài viết này các cụ có thể tạo được một form như ý cho riêng mình.
không cần phải cảm ơn nhiều hĩ hĩ.
