Gravity Form mang lại khá nhiều tiện ích, nhưng cũng không dễ để developer hiểu và tùy biến nó theo ý mình. Code Tốt trong bài viết này sẽ gợi ý các bạn những cách để xử lý các event handler và customize nó bằng Javascript.
Tại sao chọn Gravity Form?
Nếu bạn đã đọc bài viết trước của mình về Gravity Form, các bạn sẽ thấy nó rất tiện, có nhiều addon và ra mắt cũng đã lâu nên sự ổn định cao và ít bug.
Trong team mình làm việc, đây cũng là addon phổ biến được cài trên nhiều website khách hàng. Bạn có thể làm đủ trò từ tích hợp Stripe payment cho tới tính toán như một đơn hàng. Quả thực rất tiện nếu bạn đọc kĩ và làm theo document của Gravity Form (và tất nhiên, có tiền để mua addon).
Tùy biến Javascript với Gravity Form
Vậy tùy biến ở đây được hiểu là như thế nào? Trong giới hạn bài viết này, ta chỉ quan tâm tới các event handler, tức những thay đổi do Gravity Form tạo ra sau khi người dùng thực hiện tác vụ, như nhập nội dung nhưng bị lỗi, hoặc gửi kết quả thành công.
Mình sẽ chỉ liệt kê các khả năng phổ biến nhất khi bạn tùy biến. Do Gravity Form yêu cầu sử dụng jQuery nên các bạn nên quy ước `const $ = window.jQuery để có tác dụng ở đầu module.
gform_post_render()
Action này được trigger khi Gravity Form load các field render ra, bao gồm cả khi người dùng submit kết quả nhưng không thành công và báo lỗi.
Chẳng hạn, trong ví dụ sau, mình sẽ thêm class vào tất cả các class của field.
$(document).on('gform_post_render', function(){
// code to trigger on AJAX form render
const textFieldEls = el.querySelectorAll('.gfield--input', formEl)
if (textFieldEls.length) {
textFieldEls.map((textFieldEl) => {
textFieldEl.classList.add('is-active')
})
}
})
gform_confirmation_loaded()
Action này được trigger khi Gravity Form hiển thị thông báo thành công khi người dùng submit form.
$(document).on('gform_confirmation_loaded', function(){
const confirmMessageEl = document.querySelector('.js-success-message')
if (confirmMessageEl) {
confirmMessageEl.classList.add('is-visible')
}
})
Đây là một action PHP, nhưng sẽ giúp bạn đẩy phần load script của Gravity Form từ trong <head> xuống cuối trước thẻ </body> giúp cải thiện tốc độ truy cập.
Bạn có thể thêm trong functions.php như sau:
add_filter( 'gform_init_scripts_footer', '__return_true' );
Kết luận
Còn nhiều action và hook khác giúp bạn tùy biến, tuy nhiên yêu cầu cơ bản là bạn phải đọc và nắm rõ document của Gravity Form tại đây. Do bài viết này chỉ nhằm mục đích liệt kê các trigger phổ biến và hay dùng nên mình không mô tả chi tiết hơn.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
