Cách gửi biểu mẫu mà không cần làm mới trang trong WordPress

gửi một hình thức mà không cần làm mới trang


Bạn có muốn ngăn trang của mình làm mới khi khách truy cập gửi biểu mẫu không? Theo mặc định, toàn bộ trang tải lại khi nhấp vào nút gửi biểu mẫu. Và đó là khi dữ liệu được nhập trong biểu mẫu được chuyển và lưu trữ trong máy chủ.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách kích hoạt trình Ajax trên các biểu mẫu WordPress của bạn và ngăn trang tải lại.

Tại sao kích hoạt gửi biểu mẫu Ajax trong WordPress

Gửi biểu mẫu Ajax đặc biệt hữu ích nếu bạn muốn nhúng một biểu mẫu trong cửa sổ bật lên theo phương thức. Nếu không bật tính năng gửi biểu mẫu AJAX, toàn bộ trang sẽ cần làm mới, dẫn đến việc đóng cửa sổ bật lên. Bằng cách đó, người dùng có thể bỏ lỡ thông báo xác nhận quan trọng giúp họ tham gia.

Khi bật biểu mẫu AJAX, người dùng của bạn có thể thấy thông báo xác nhận khi gửi biểu mẫu trên cùng một trang mà không cần tải lại.

nộp mẫu ajax

Để cho phép gửi biểu mẫu ajax trên trang web WordPress của bạn, chúng tôi khuyên bạn nên WPForms, plugin hình thức tốt nhất cho WordPress.

Bước 1: Tạo biểu mẫu mới

Để bắt đầu tạo biểu mẫu của bạn, trước tiên bạn phải cài đặt plugin WPForms trên trang web WordPress của bạn.

Không chắc thế nào? Không vấn đề gì. Bạn có thể chuyển qua hướng dẫn của chúng tôi về cách cài đặt plugin WordPress để sắp xếp tất cả.

Khi plugin được cài đặt và kích hoạt, hãy truy cập trang tổng quan WordPress của bạn và điều hướng đến WPForms »Thêm mới. Bây giờ bạn sẽ được chuyển hướng đến một trang nơi bạn có thể chọn một mẫu cho biểu mẫu của mình.

WPForms cung cấp 7 mẫu biểu mẫu khác nhau để lựa chọn. Hãy để chúng tôi chọn Mẫu liên hệ đơn giản tùy chọn cho hướng dẫn này và sau đó thêm trường tải lên tệp vào biểu mẫu.

Thiết lập mẫu WPForms

Bây giờ bạn sẽ thấy trình tạo biểu mẫu trên màn hình của bạn. Ở phía bên trái màn hình của bạn, bạn có Thêm trườngTùy chọn trường chuyển hướng. Bạn có thể sử dụng các tab này để định cấu hình biểu mẫu liên hệ của mình.

xóa một trường từ wpforms

WPForms giúp bạn dễ dàng thêm các trường vào biểu mẫu của mình bằng cách kéo và thả. Bạn cũng có thể thay đổi vị trí của các trường bằng cách kéo và thả. Nếu bạn muốn loại bỏ một lĩnh vực, điều đó cũng dễ dàng. Chỉ cần di con trỏ qua trường không mong muốn và nhấp vào xóa bỏ biểu tượng sẽ xuất hiện ở góc trên cùng bên phải của trường.

Phía dưới cái Tùy chọn trường tab, bạn có thể thay đổi trường nhãn Nhãn, thay đổi định dạng của trường tên, thay đổi kích thước phông chữ và bật hoặc tắt nhãn và nhãn phụ. Bạn cũng có một tùy chọn để kích hoạt logic điều kiện Lựa chọn.

Khi bạn đã hoàn tất việc tạo biểu mẫu của mình với trình tạo biểu mẫu, hãy nhấp vào tiết kiệm nút, vì vậy những thay đổi của bạn vẫn còn nguyên.

Bây giờ, chúng tôi đã tạo ra một biểu mẫu liên hệ đơn giản, hãy để thêm tính năng tải tệp lên nó.

Để thêm tính năng tải lên tệp, tất cả những gì bạn phải làm là nhấp vào trường Tải lên tệp trong bảng điều khiển bên trái. Ngoài ra, bạn có thể kéo trường biểu mẫu Tải lên tệp và thả nó vào vị trí ưa thích của bạn trong trình tạo biểu mẫu.

hình thức tải lên tập tin

Bước 3: Kích hoạt đệ trình biểu mẫu Ajax

Khi các thay đổi của bạn được lưu, nhấp vào Cài đặt tab ở bên trái của trình tạo trang của bạn. Bạn sẽ thấy một số tùy chọn ở đây. Đi đến Chung Lựa chọn. Dưới đây, bạn sẽ thấy một số lĩnh vực. Tại đây bạn có thể thay đổi tên của biểu mẫu của bạn, thêm mô tả biểu mẫu, thay đổi văn bản nút, v.v..

Nếu bạn cuộn xuống dưới màn hình, bạn sẽ thấy một vài hộp kiểm. Bạn có thể chọn hộp kiểm cho biết Cho phép gửi biểu mẫu Ajax. Hoàn thành quá trình bằng cách nhấp vào Tiết kiệm nút ở góc trên bên phải màn hình của bạn.

cho phép gửi biểu mẫu ajax

Bây giờ đi đến Thông báo tab bên dưới tab Chung chuyển hướng. Tùy chọn này sẽ thông báo cho bạn mỗi khi ai đó gửi biểu mẫu của bạn. Vì vậy, trong trường 1, hãy nhập địa chỉ email của quản trị viên hoặc bất kỳ ai chịu trách nhiệm nhận email. Bạn cũng có thể nhập chủ đề Email, tên người gửi, địa chỉ của người nhận và tin nhắn của chính bạn.

Sau khi thực hiện, hãy chắc chắn rằng bạn lưu các thay đổi. Bạn cũng có thể đặt thông báo xác nhận mà khách truy cập sẽ nhận được sau khi họ nhấn nút gửi.

cài đặt xác nhận mẫu tải lên

Bước 4: Xuất bản biểu mẫu của bạn với đệ trình Ajax

Bước cuối cùng là xuất bản biểu mẫu kích hoạt trình Ajax của bạn trên trang web của bạn. Đối với điều đó, đi đến trang mà bạn muốn biểu mẫu xuất hiện.

Bạn có thể bắt đầu bằng cách đi đến Trang »Thêm mới trên bảng điều khiển WordPress của bạn. Bây giờ thêm một tiêu đề vào Trang của bạn. Trên trình soạn thảo văn bản của trang của bạn, nhấp vào Thêm hình thức Lựa chọn. Một cửa sổ mới sẽ bật lên trên màn hình của bạn.

hình thức nhúng wpforms

Nhấp vào mũi tên thả xuống và chọn hình thức vừa được tạo. Bây giờ bấm vào Thêm hình thức cái nút. Bạn sẽ thấy mã nhúng được phản ánh trên trình soạn thảo văn bản của trang của bạn. Bạn có thể kiểm tra biểu mẫu trông như thế nào bằng cách nhấp vào Xem trước nút ở phía bên phải màn hình của bạn.

Sau đó bạn có thể nhấp vào Công bố nút để cuối cùng để cho hình thức đi trực tiếp.

Điều đó thật dễ dàng, không phải là nó?

Bây giờ bạn có thể muốn theo dõi số lần nhấp vào nút mà biểu mẫu liên hệ của bạn nhận được. Để làm điều này, hãy xem hướng dẫn của chúng tôi về liên kết theo dõi và nhấp vào nút.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map