Bạn đang muốn tạo form AMP trên trang web WordPress của mình?
Accelerated Mobile Page (các trang tăng tốc dành cho thiết bị di động) hoặc AMP là dự án của Google giúp tăng tốc độ tải trang trên thiết bị di động.
Mặc dù AMP cung cấp trải nghiệm duyệt web trên di động tuyệt vời nhưng nó cũng sẽ vô hiệu hóa nhiều tính năng hữu ích trên trang web của bạn
Một trong số đó là các contact form. AMP giới hạn HTML và JavaScript nên nó không thể tải các form WordPress đúng cách trên các trang AMP.
Nhưng bạn không cần phải lo lắng, hiện nay đã có giải pháp giải quyết vấn đề trên. WPForms, plugin form WordPress hữu ích nhất dành cho những người mới bắt đầu sẽ giúp bạn tạo các form AMP. Nhóm của họ gần đây đã làm việc với Google để dễ dàng tạo các form AMP cho WordPress.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo form AMP trong WordPress bằng cách sử dụng WPForms.
Các bước tạo form AMP trong WordPress
Để sử dụng AMP trong WordPress, bạn cần cài đặt và kích hoạt plugin AMP cho WordPress. Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.
Khi đã kích hoạt, plugin sẽ tự động thêm hỗ trợ Google AMP cho trang web WordPress của bạn.
Bạn có thể thay đổi cài đặt AMP cho trang web của mình bằng cách truy cập AMP » General từ bảng điều khiển dashboard.
Từ trang cài đặt AMP, bạn có thể bật/tắt AMP trên trang web, chọn chế độ trang web cho AMP và chọn các template được hỗ trợ.
Sau khi đã định cấu hình AMP, bước tiếp theo là tạo contact form tương thích AMP trên trang web WordPress của bạn.
Bước 1. Tạo form WordPress với WPForms
Đầu tiên, hãy cài đặt và kích hoạt plugin WPForms Lite trên trang web của bạn. Đây là phiên bản lite của plugin WPForms Pro.
Cả hai phiên bản lite và pro của WPForms đều cho phép bạn tạo contact form AMP cơ bản. Trong bài viết này, chúng tôi sẽ sử dụng phiên bản miễn phí cho các ảnh screenshot.
Sau khi cài đặt plugin và kích hoạt, bạn cần truy cập trang WPForms » Add New để tạo một form WordPress mới.
Trên màn hình thiết lập form, bạn cần chọn một template form để bắt đầu. Bạn có thể chọn Blank Form (form trống) nếu muốn bắt đầu từ đầu.
Điều này sẽ đưa bạn đến trang xây dựng form.
Tại đây, bạn có thể thêm hoặc xóa các form field. Để thêm một field vào form, bạn chỉ cần nhấp vào form field từ bảng điều khiển bên trái và nó sẽ xuất hiện trong các trình tạo form ở bên phải.
Sau đó, bạn có thể định cấu hình các tùy chọn field. Chỉ cần nhấp vào một field, tùy chọn Field sẽ xuất hiện.
Tương tự, bạn có thể tùy chỉnh tất cả các field khác.
Sau đó, bạn có thể nhấp vào tab Setting để định cấu hình cài đặt form.
Tại General Settings, bạn có thể thay đổi tên form, gửi nút văn bản, gửi nút xử lý văn bản, bật Honeypot để ngăn thư rác và nhiều thứ khác.
Tiếp theo, nhấp vào tab Notifications để thiết lập thông báo qua email để nhắc bạn khi người dùng hoàn thành form.
Tiếp theo, bạn có thể nhấp vào tab Confirmation để thiết lập thông báo xác nhận sẽ được hiển thị khi người dùng gửi form.
Sau khi định cấu hình xong, bạn có thể lưu form của mình.
Bước 2. Thêm form AMP của bạn vào một trang
Bây giờ form WordPress của bạn đã sẵn sàng, bạn có thể thêm nó vào một trang.
Trước tiên, bạn cần tạo trang mới hoặc mở một trang hiện có mà bạn muốn thêm form.
Trên màn hình chỉnh sửa trang, nhấp vào Add New Block và chọn khối WPForms.
Sau đó bạn sẽ thấy widget WPForms được thêm vào màn hình chỉnh sửa trang của mình. Bạn chỉ cần chọn form đã tạo sẵn trước đó và widget sẽ tải ngay lập tức trong trình chỉnh sửa trang.
Tiếp theo, bạn có thể publish hoặc update trang của mình.
Bạn không cần định cấu hình bất cứ thứ gì khác. Plugin WPForms Lite sẽ thêm AMP vào form của bạn ngay lập tức..
Nếu bạn muốn xem nó trông như thế nào thì có thể mở trang trên điện thoại di động của mình.
Hoặc bạn có thể mở trang trên trình duyệt máy tính để bàn bằng cách thêm /amp/ or /?amp vào cuối URL trang của bạn. VÍ dụ, https://www.example.com/contact/?amp.
Thêm Google reCAPTCHA vào form AMP
Theo mặc định, WPForms honeypot có chức năng chặn và chống thư rác. Ngoài ra, bạn có thể sử dụng Google reCAPTCHA để giảm việc gửi thư rác.
Để sử dụng Google reCAPTCHA với các form AMP, bạn cần đăng ký trang web của mình với Google reCAPTCHA v3 và nhận các khóa Google API.
Sau đó bạn cần truy cập trang web Google reCAPTCHA và nhấp vào nút ‘Admin Console’ ở góc trên cùng phía bên phải trang.
Sau đó, bạn cần đăng nhập bằng tài khoản Google của mình. Sau khi đăng nhập, bạn sẽ thấy trang ‘Register a new site’.
Đầu tiên, bạn cần nhập tên trang web trong nhãn filed. Google AMP chỉ hỗ trợ reCAPTCHA v3, vì vậy bạn cần chọn nó từ các tùy chọn loại reCAPTCHA.
Sau đó, nhập tên miền của bạn trong phần Domains.
Phần Owners hiển thị địa chỉ email của bạn theo mặc định. Bạn cũng có thể thêm email khác nếu muốn.
Tiếp theo, bạn cần chấp nhận Terms of Service (các điều khoản dịch vụ) của reCAPTCHA để tiếp tục. Ngoài ra, hãy chọn ô ‘Send alerts to owners’ để Google gửi thông báo cho bạn về các vấn đề như cấu hình sai hoặc traffic đáng ngờ trên trang web của bạn.
Sau khi hoàn thành, nhấp vào nút Submit.
Tiếp theo, bạn sẽ thấy thông báo thành công cùng với site key và secret key để thêm reCAPTCHA trên trang web của bạn.
Bây giờ, bạn đã có các khóa Google API để thêm reCAPTCHA vào các form của mình. Tuy nhiên, có thêm một điều chỉnh cần thiết để đảm bảo khả năng tương thích AMP với reCATCHA. Bạn cần nhấp vào liên kết ‘Go to Settings’.
Tiếp theo, bạn sẽ thấy cài đặt reCAPTCHA một lần nữa với ô ‘Allow this key to work with AMP pages’. Chỉ cần chọn ô này và nhấp vào nút Save bên dưới.
Bây giờ ban đã có khóa Google API để thêm reCAPTCHA trên các biểu mẫu AMP, bạn cần mở trang WPForms » Settings » reCAPTCHA trong bảng điều khiển dashboard của WordPress.
Trên màn hình, chọn tùy chọn reCAPTCHA v3 rồi dán Site key và Secret key. Sau đó nhấp vào nút Save Settings.
Google reCAPTCHA đã được thêm vào WPForms, bạn có thể bật nó trong các form khi cần. Truy cập WPForms » All Forms và chọn form mà bạn muốn bật reCAPTCHA.
Sau khi màn hình thiết lập form xuất hiện, nhấp vào tab Settings và chọn General Settings. Bạn sẽ thấy ô ‘Enable Google v3 reCAPTCHA’ ở phía dưới.
Kiểm tra và lưu form bằng cách nhấp vào nút Save ở góc trên cùng bên phải.
Sau đó, bạn có thể truy cập lại trang contact của mình để kiểm tra form AMP và reCAPTCHA đang hoạt động.
Chúng tôi hi vọng bài viết này giúp bạn tạo form AMP trong WordPress một cách dễ dàng. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tạo form tuân thủ GDPR trong WordPress.
Nếu thích bài viết này, hãy theo dõi YouTube Channel để xem thêm các video hướng dẫn về WordPress. Bạn cũng có thể tìm kiếm chúng tôi trên Twitter hoặc Facebook.
