Bạn muốn xây dựng một biểu mẫu liên hệ AJAX trong WordPress? Biểu mẫu AJAX cho WordPress cho phép người dùng gửi biểu mẫu mà không cần tải lại trang. Điều này cho phép bạn tăng cường sự tương tác của người dùng và cung cấp một trải nghiệm gửi biểu mẫu tốt hơn cho người dùng của bạn. Trong bài viết này, Vietnix sẽ hướng dẫn bạn cách tạo biểu mẫu AJAX cho WordPressvới hướng dẫn từng bước.
Bước 1: Cài đặt plugin WPForms3
Bước đầ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, xem hướng dẫn từng bước của Vietnix về cách cài đặt plugin WordPress.
WPForms là plugin tạo biểu mẫu WordPress tốt nhất trên thị trường. Nó cho phép bạn dễ dàng tạo các biểu mẫu được hỗ trợ bởi Ajax.
Sau khi kích hoạt, bạn cần truy cập trang WPForms > Settings để nhập mã giấy phép của bạn.
Sau khi nhập mã giấy phép (License key), bạn sẽ có thể nhận các cập nhật tự động và cài đặt các add-on.
Bây giờ bạn đã sẵn sàng để tạo các biểu mẫu AJAX đẹp trong WordPress.
Chương trình khuyến mãi Mua Hosting Rinh Tên Miền
Bước 2: Tạo mẫu đầu tiên của bạn
Hãy tiến hành tạo mẫu đầu tiên của bạn.
Đơn giản chỉ cần truy cập trang WPForms > Add New trong khu vực quản trị WordPress. Bạn sẽ được yêu cầu cung cấp tiêu đề cho mẫu của bạn và chọn một mẫu gốc làm điểm khởi đầu.
Trong hướng dẫn này, chúng ta sẽ tạo một mẫu liên hệ. Tuy nhiên, bạn có thể tạo bất kỳ loại mẫu nào khác mà bạn cần.
WPForms sẽ tải mẫu của bạn với các trường cơ bản đã được thêm vào. Bạn chỉ cần nhấp chuột vào bất kỳ trường nào trong mẫu để chỉnh sửa.
Bạn cũng có thể thêm bất kỳ trường mẫu mới nào từ cột bên trái bằng cách nhấp chuột vào nó.
Trường mới sẽ xuất hiện ở cuối mẫu của bạn, ngay trên nút Submit.
Bạn có thể dễ dàng kéo và thả các trường mẫu để di chuyển chúng lên và xuống trong mẫu.
Sau khi đã hoàn thành chỉnh sửa mẫu, bạn có thể tiến hành bước tiếp theo.
Bước 3: Bật tính năng gửi biểu mẫu AJAX trong WordPress
WPForms không bật tính năng gửi biểu mẫu AJAX theo mặc định. Bạn sẽ cần bật nó thủ công cho biểu mẫu của mình.
Đơn giản chỉ cần chuyển sang tab “Settings” trong trình tạo biểu mẫu. Trong tab cài đặt chung, nhấp vào công tắc bên cạnh tùy chọn “Enable AJAX form submission.”
Tiếp theo, chúng ta sẽ thiết lập hành động tiếp theo sau khi gửi biểu mẫu.
Trước tiên, chuyển sang tab “Confirmation” trong cài đặt. Đây là nơi bạn thông báo cho người dùng biết rằng bạn đã nhận được biểu mẫu của họ.
WPForms cho phép bạn làm điều đó theo nhiều cách khác nhau. Ví dụ, bạn có thể chuyển hướng người dùng đến một URL, hiển thị cho họ một trang cụ thể hoặc đơn giản là hiển thị một thông báo trên màn hình.
Vì chúng ta đã bật chức năng AJAX cho biểu mẫu, việc chuyển hướng người dùng đến một trang khác sẽ làm mất mục đích tạo một biểu mẫu AJAX.
Bạn cần chọn tùy chọn thông báo và chỉnh sửa nội dung thông báo xác nhận. Hãy thoải mái sử dụng thanh công cụ định dạng trên trình soạn thảo hoặc thêm một hoặc hai liên kết để cho người dùng biết nên đi đến đâu tiếp theo.
Sau đó, bạn có thể cấu hình cách bạn muốn nhận thông báo về việc gửi biểu mẫu.
Chuyển sang tab Notifications trong cài đặt biểu mẫu và cấu hình các thiết lập email thông báo.
Khi bạn hoàn tất, bạn có thể lưu biểu mẫu và thoát khỏi trình tạo biểu mẫu.
Bước 4: Thêm biểu mẫu AJAX trong WordPress
WPForms giúp bạn dễ dàng thêm biểu mẫu vào các bài viết, trang và tiện ích bên trong WordPress.
Đơn giản chỉ cần chỉnh sửa bài viết hoặc trang mà bạn muốn thêm biểu mẫu và chèn block WPForms vào khu vực nội dung.
Sau đó, bạn cần chọn biểu mẫu mà bạn vừa tạo từ các cài đặt của block.
WPForms sẽ ngay lập tức tải trước xem trước biểu mẫu trong trình soạn thảo nội dung.
Bây giờ bạn có thể lưu hoặc xuất bản nội dung của mình và sau đó truy cập trang web của bạn để kiểm tra chức năng AJAX của biểu mẫu.
Dưới đây là cái nhìn nhanh về biểu mẫu liên hệ được hỗ trợ bằng AJAX trên trang demo của Vietnix.
Bạn cũng có thể thêm biểu mẫu của mình vào một tiện ích bên trong WordPress.
Để làm điều đó, hãy truy cập trang Appearance > Widgets và thêm block WPForms vào một tiện ích.
Chọn biểu mẫu mà bạn đã tạo trước đó và nhấp vào nút “Update” để lưu cài đặt tiện ích. Bây giờ bạn có thể truy cập trang web của bạn để xem biểu mẫu hỗ trợ AJAX của bạn hoạt động như thế nào.
Nếu bạn đang gặp khó khăn trong việc tối ưu website WordPress của mình và không biết bắt đầu từ đâu, hãy đăng ký sử dụng dịch vụ hosting của Vietnix để được hỗ trợ. Cụ thể, với các gói Business Hosting, WordPress Hosting, đội ngũ chuyên gia của Vietnix sẽ tư vấn cho bạn cách tối ưu tốc độ và hiệu suất website. Nhờ đó, bạn có thể nâng cao trải nghiệm và giữ chân người dùng, từ đó tăng cường tỷ lệ chuyển đổi doanh số từ website. Bên cạnh đó, Hosting WordPress còn được tích hợp các tính năng hữu ích như hỗ trợ cài đặt với 1 click, khu vực thử nghiệm không giới hạn, sao lưu dữ liệu để đảm bảo website hoạt động ổn định và hiệu quả.
Với hơn 11 năm kinh nghiệm trong lĩnh vực cung cấp các dịch vụ lưu trữ số, điện toán đám mây, Vietnix đã phục vụ cho hơn 50.000 khách hàng cá nhân, doanh nghiệp khắp toàn quốc và đã kích hoạt cho khoảng 100.000 dịch vụ. Vietnix tự hào khi nhận được sự giới thiệu dịch vụ từ 97% khách hàng sau khi sử dụng, đó là một minh chứng rõ ràng cho sự hài lòng và chất lượng của Vietnix. Vietnix sẽ không ngừng cải tiến để đáp ứng nhu cầu ngày càng tăng của khách hàng và hi vọng sẽ tiếp tục nhận được sự tin tưởng và ủng hộ từ khách hàng trong thời gian tới.
Mọi vấn đề thắc mắc cần tư vấn, quý khách vui lòng liên hệ:
- Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
- Hotline: 1800 1093.
- Email: sales@vietnix.com.vn.
Lời kết
Vietnix hy vọng bài viết này đã giúp bạn tìm hiểu cách tạo một biểu mẫu liên hệ AJAX cho trang web WordPress của bạn. Bạn cũng có thể muốn xem hướng dẫn của Vietnix về cách tạo một cửa sổ pop-up biểu mẫu liên hệ trong WordPress hoặc những lựa chọn của chuyên gia về các dịch vụ marketing qua email tốt nhất để phát triển doanh nghiệp của bạn.
