Bạn đang muốn tạo một contact form sử dụng AJAX trên WordPress?
Contact form sử dụng AJAX cho phép người dùng gửi form mà không cần tải lại trang. Điều này cho phép bạn tăng mức độ tương tác của người dùng trong khi vẫn giữ được trải nghiệm gửi form truyền thống.
Vấn đề này khá quan trọng ở các website thương mại điện tử khi người chủ muốn thu thập ý kiến người dùng mà không phải chuyển hướng sự chú ý của họ.
Bạn cũng có thể sử dụng tính năng AJAX tương tự cho nhưng form khác trên website của mình. Ví dụ, một form đăng nhập sẽ cho phép người dùng đăng nhập mà không cần tải lại trang.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn từng bước cách để tạo contact form sử dụng AJAX.
AJAX là gì và tại sao nên sử dụng nó cho form của bạn?
AJAX , viết tắt của Asynchronous Javascript and XML, là một kỹ thuật lập trình JavaScript cho phép các nhà phát triển chuyển tải dữ liệu mà không cần tải lại một trang.
Nó được sử dụng phổ biến nhất trong các web form cho phép người dùng gửi dữ liệu form mà không cần tải lại trang. Điều này làm cho việc gửi form dễ dàng và nhanh chóng, giúp cải thiện trải nghiệm người dùng tổng thể.
Các ứng dụng web như Gmail và Facebook sử dụng phổ biến kỹ thuật này để giữ tương tác người dùng đồng thời khiến mọi thứ hoạt động một cách mượt mà.
Bạn cũng có thể sử dụng AJAX cho các form WordPress của mình.
Chúng ta hãy xem làm thế nào để dễ dàng tạo một form liên hệ trên WordPress sử dụng AJAX trong 4 bước đơn giản.
4 bước tạo form sử dụng AJAX trên WordPress
1. Cài đặt Plugin WPForms
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPForms . Để biết thêm chi tiết, hãy đọc bài viết của chúng tôi hướng dẫn cài đặt plugin WordPress .
WPForms là plugin tạo form WordPress tốt nhất trên thị trường. Nó cho phép bạn dễ dàng tạo các form hỗ trợ AJAX.
Sau khi kích hoạt, bạn cần truy cập trang WPForms » Settings để nhập license key.
Sau khi nhập license key, bạn sẽ được cập nhật tự động và cài đặt các tiện ích addon bổ sung.
Bây giờ bạn đã có thể tạo các form AJAX trong WordPress.
2. Tạo Form đầu tiên
Hãy truy cập WPForms » Add New trong bảng điều khiển admin WordPress. Bạn sẽ được yêu cầu cung cấp một tiêu đề cho form của bạn và chọn một template làm điểm bắt đầu.
Trong hướng dẫn này, chúng tôi sẽ tạo một contact form . Tuy nhiên, bạn có thể tạo bất kỳ loại form nào mà bạn cần.
WPForms sẽ load sẵn vào form của bạn một vài field cơ bản, bạn có thể trỏ và click vào bất kỳ field nào để chỉnh sửa nó.
Bạn cũng có thể thêm field mới từ cột bên trái bằng cách click vào tên field. Field mới sẽ xuất hiện ở dưới cùng của form, ngay phía trên nút Submit.
Bạn có thể dễ dàng kéo và thả các field để di chuyển chúng lên và xuống trong nội bộ form.
Khi bạn đã hoàn thành việc chỉnh sửa form, bạn có thể chuyển sang bước tiếp theo.
3. Bật tính năng gửi form AJAX
Theo mặc định, WPForms không cho phép gửi form bằng AJAX. Bạn cần phải tự kích hoạt nó cho template của bạn.
Chỉ cần chuyển sang tab Settings trong trình tạo form và tích vào hộp bên cạnh tùy chọn Enable AJAX form submission.
Đánh dấu vào ô nói trên sẽ bật chức năng AJAX cho form hiện tại.
Bây giờ hãy thiết lập những gì xảy ra sau khi gửi form.
Đầu tiên, chuyển sang tab Confirmation trong phần cài đặt. Đây là nơi bạn thông báo cho người dùng của mình rằng bạn đã nhận được thông tin mà họ gửi.
WPForms cho phép bạn làm điều đó theo những cách khác nhau. Ví dụ: bạn có thể chuyển hướng người dùng đến một URL khác, hiển thị cho họ một trang nào đó hoặc chỉ đơn giản là hiển thị một thông báo thành công trên màn hình.
Do chúng tôi đã kích hoạt chức năng AJAX cho form, bạn không nên chọn chuyển hướng người dùng sang trang khác.
Bạn cần chọn mục Message và chỉnh sửa thông báo xác nhận. Bạn có thể sử dụng thanh công cụ định dạng trên trình chỉnh sửa hoặc thêm một vài link đến trang tiếp theo để người dùng có thể click vào.
Sau đó, bạn có thể thiết lập cách bạn muốn được thông báo về việc có một form mới được gửi.
Hãy chuyển sang tab Notifications trong cài đặt form và cấu hình cài đặt email thông báo.
Khi đã hoàn tất, bạn có thể lưu form của mình và thoát khỏi trình tạo form.
4. Thêm form AJAX của bạn vào WordPress
WPForms giúp bạn có thể dễ dàng thêm các form vào bài viết, page và sidebar của WordPress.
Tất cả những thứ cần làm là chỉnh sửa bài viết hoặc page, thêm một block WPForms vào nơi bạn muốn.
Sau đó, bạn cần chọn form bạn vừa tạo từ phần cài đặt của block vừa thêm. WPForms sẽ ngay lập tức tải bản preview của form vào trình chỉnh sửa nội dung.
Bây giờ bạn có thể lưu hoặc xuất bản bài viết của mình và sau đó truy cập website để kiếm tra lại các chức năng AJAX.
Bạn cũng có thể thêm form của mình vào sidebar của WordPress. Để làm điều đó, hãy truy cập vào phần Appearance » Widgets và thêm widget WPForms vào sidebar.
Chọn form bạn đã tạo trước đó và nhấp vào nút Save để lưu các cài đặt widget. Sau đó, bạn có thể truy cập website của mình để xem form được hỗ trợ bởi AJAX hoạt động như thế nào.
Chúng tôi hy vọng bài viết này đã giúp bạn học được cách tạo form liên hệ cho WordPress sử dụng AJAX cho website của mình. Bạn cũng có thể tham khảo thêm hướng dẫn tạo cửa sổ pop-up cho contact form trong WordPress của chúng tôi.
Nếu thích bài viết này, hãy đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn nhé. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook để cập nhật các thông tin mới nhất từ CunghocWP.