Cách tạo biểu mẫu AMP trong WordPress (Cách dễ dàng)

Bạn có muốn tạo các biểu mẫu thân thiện với AMP trên trang WordPress của mình không?

Other :

Accelerated Mobile Pages hay AMP là một dự án của Google giúp các trang web tải nhanh hơn trên thiết bị di động.

Mặc dù AMP mang lại trải nghiệm duyệt web trên thiết bị di động tuyệt vời bằng cách làm cho các trang web của bạn tải nhanh hơn, nhưng nó lại 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 biểu mẫu liên hệ. Vì AMP sử dụng một bộ HTML và JavaScript hạn chế, nó không thể tải các biểu mẫu WordPress của bạn đúng cách trên các trang AMP.

Nhưng may mắn thay, bây giờ có một giải pháp dễ dàng có sẵn. WPForms, plugin biểu mẫu WordPress thân thiện với người mới bắt đầu nhất hiện giúp bạn tạo các biểu mẫu WordPress sẵn sàng cho AMP. Nhóm của họ gần đây đã làm việc với Google để tạo các biểu mẫu AMP dễ dàng cho WordPress.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo các biểu mẫu AMP trong WordPress bằng cách sử dụng WPForms (một cách dễ dàng).

Creating AMP Forms in WordPress (The Easy Way)

Tạo biểu mẫu AMP trong WordPress (Từng bước)

Để sử dụng AMP với WordPress, bạn cần cài đặt và kích hoạt plugin AMP chính thức cho WordPress. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi được kích hoạt, plugin sẽ tự động thêm hỗ trợ Google AMP cho trang web WordPress của bạn.

Tuy nhiên, bạn có thể thay đổi cài đặt AMP cho trang web của mình bằng cách chuyển đến AMP »General từ trang tổng quan của bạn.

AMP for WordPress Settings

Từ trang cài đặt AMP, bạn có thể bật hoặc tắt AMP trên trang web của mình, chọn chế độ trang web cho AMP và chọn các mẫu được hỗ trợ.

Khi bạn đã định cấu hình AMP, bước tiếp theo là tạo một biểu mẫu liên hệ tương thích với AMP trên trang web WordPress của bạn.

Bước 1. Tạo một biểu mẫu WordPress với WPForms

Để bắt đầu, 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 nhỏ của plugin WPForms Pro.

Cả phiên bản Lite và pro của WPForms đều cho phép bạn tạo biểu mẫu liên hệ cơ bản sẵn sàng cho AMP. Trong bài viết của chúng tôi, chúng tôi sẽ sử dụng phiên bản miễn phí cho ảnh chụp màn hình.

Sau khi plugin được cài đặt và kích hoạt, bạn cần chuyển đến trang WPForms »Add New để tạo một biểu mẫu WordPress mới.

Trên màn hình thiết lập biểu mẫu, bạn có thể chọn một mẫu biểu mẫu để bắt đầu nhanh chóng. Bạn có thể chọn Mẫu trống nếu bạn muốn bắt đầu lại từ đầu.

Form Templates WPForms

Tiếp theo, nó sẽ mở trang trình tạo biểu mẫu.

Drag and Drop Form Builder WPForms

Từ đây, bạn có thể thêm hoặc xóa các trường biểu mẫu. Để thêm trường mới vào biểu mẫu của bạn, bạn có thể chỉ cần nhấp vào trường biểu mẫu từ bảng điều khiển bên trái và trường đó sẽ xuất hiện trong bảng điều khiển trình tạo biểu mẫu ở bên phải.

Sau đó, bạn có thể cấu hình các tùy chọn trường. Chỉ cần nhấp vào một trường, và sau đó Tùy chọn Trường sẽ xuất hiện.

Configuring Field Options in WPForms Plugin

Tương tự, bạn có thể tùy chỉnh tất cả các trường khác.

Sau đó, bạn có thể nhấp vào tab Cài đặt để định cấu hình cài đặt biểu mẫu của mình.

WPForms General Settings

Cài đặt chung cho phép bạn thay đổi tên biểu mẫu của mình, gửi văn bản nút, gửi văn bản xử lý nút, bật Honeypot chống thư rác, v.v.

Tiếp theo, bạn có thể nhấp vào tab Thông báo để thiết lập thông báo qua email để thông báo cho bạn khi người dùng hoàn thành biểu mẫu.

WPForms Notification Settings

Tiếp theo, bạn có thể nhấp vào tab Xác nhận để thiết lập thông báo xác nhận được hiển thị khi người dùng gửi biểu mẫu.

WPForms Confirmation Message Settings

Sau khi cấu hình xong, bạn có thể lưu biểu mẫu của mình.

Bước 2. Thêm biểu mẫu AMP của bạn vào một trang

Bây giờ biểu mẫu 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 một trang mới hoặc mở một trang hiện có mà bạn muốn thêm biểu mẫu.

Trên màn hình chỉnh sửa trang của bạn, nhấp vào biểu tượng Thêm khối mới và chọn khối WPForms.

Add WPForms Block to WordPress Page Editor

Sau đó, bạn có thể thấy tiện ích WPForms được thêm vào màn hình chỉnh sửa trang của bạn. Bạn chỉ cần chọn biểu mẫu bạn đã tạo trước đó và tiện ích con sẽ tải nó ngay lập tức trong trình chỉnh sửa trang.

Add Contact Form to WordPress Page with WPForms

Tiếp theo, bạn có thể xuất bản hoặc cập nhật trang của mình.

Đó là tất cả! Bạn không cần phải cấu hình bất kỳ thứ gì khác. Plugin WPForms Lite sẽ thêm hỗ trợ AMP đầy đủ vào biểu mẫu của bạn ngay bây giờ.

Nếu bạn muốn xem nó trông như thế nào, thì bạn 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 trên máy tính của mình bằng cách thêm / amp / hoặc /? Amp vào cuối URL trang của bạn. Ví dụ: https://www.example.com/contact/?amp.

Thêm reCAPTCHA của Google vào Biểu mẫu AMP của bạn

Theo mặc định, WPForms bao gồm honeypot chống thư rác để bắt và chặn thư rác. Ngoài ra, bạn có thể sử dụng reCAPTCHA của Google để giảm gửi thư rác.

Để sử dụng Google reCAPTCHA với các biểu mẫu AMP, bạn cần đăng ký trang web của mình cho Google reCAPTCHA v3 và nhận các khóa API của Google.

Truy cập trang web reCAPTCHA của Google và nhấp vào nút ‘Bảng điều khiển dành cho quản trị viên’ ở góc trên cùng bên phải của trang.

Visit Google reCAPTCHA website

Sau đó, bạn cần đăng nhập bằng tài khoản Google của mình. Sau khi hoàn tất, bạn sẽ thấy trang ‘Đăng ký trang web mới’.

Register a New Site for Google reCAPTCHA

Đầu tiên, bạn cần nhập tên trang web của mình vào trường Nhãn. 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 Tên miền.

Add Domain Name and Owner for Google reCAPTCHA

Phần Chủ sở hữu hiển thị địa chỉ email của bạn theo mặc định. Bạn cũng có thể thêm một email khác nếu bạn muốn.

Tiếp theo, bạn cần chấp nhận Điều khoản dịch vụ của reCAPTCHA để tiếp tục. Ngoài ra, hãy chọn hộp kiểm ‘Gửi cảnh báo cho chủ sở hữu’, hộp kiểm này sẽ cho phép Google thông báo cho bạn về các vấn đề như định cấu hình sai và lưu lượng truy cập đáng ngờ trên trang web của bạn.

Accept Google reCAPTCHA Terms of Service

Sau khi hoàn tất, bấm vào nút Gửi.

Tiếp theo, bạn sẽ thấy một thông báo thành công cùng với khóa trang web và khóa bí mật để thêm reCAPTCHA trên trang web của bạn.

reCAPTCHA Keys

Bây giờ bạn có các khóa API của Google để thêm reCAPTCHA vào biểu mẫu của mình. Tuy nhiên, cần có một điều chỉnh nữa để đảm bảo khả năng tương thích của AMP với reCATCHA. Nhấp vào liên kết ‘Đi tới Cài đặt’ ở đó.

Tiếp theo, bạn sẽ thấy cài đặt reCAPTCHA một lần nữa với hộp kiểm ‘Cho phép khóa này hoạt động với các trang AMP’. Chỉ cần chọn hộp và nhấp vào nút Lưu bên dưới.

Allow reCAPTCHA to work on AMP Pages

Bây giờ bạn đã có các khóa API của Google để thêm reCAPTCHA trên các biểu mẫu AMP, bạn cần mở trang WPForms »Cài đặt» reCAPTCHA trong trang tổng quan WordPress của mình.

WPForms reCAPTCHA Settings WordPress

Trên màn hình này, bạn cần chọn tùy chọn reCAPTCHA v3 và dán khóa trang web và khóa bí mật. Sau đó, nhấp vào nút Lưu Cài đặt.

Giờ đây, reCAPTCHA của Google đã được thêm vào WPForms, bạn có thể kích hoạt nó trong các biểu mẫu của mình nếu cần. Đi tới WPForms »Tất cả các biểu mẫu và chọn biểu mẫu mà bạn muốn bật reCAPTCHA.

Edit a Form Created with WPForms

Khi màn hình thiết lập biểu mẫu xuất hiện, hãy nhấp vào tab Cài đặt và chọn phần Cài đặt chung. Ở dưới cùng, bạn có thể thấy hộp kiểm ‘Bật reCAPTCHA của Google v3’.

Enable Google v3 reCAPTCHA in WPForms

Chọn hộp và sau đó lưu biểu mẫu của bạn bằng cách nhấp vào nút Lưu ở góc trên cùng bên phải.

Sau đó, bạn có thể truy cập lại trang liên hệ của mình và xem biểu mẫu AMP với reCAPTCHA đang hoạt động.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tạo biểu mẫu 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 biểu mẫu tuân thủ GDPR trong WordPress.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook

Free Download Cách tạo biểu mẫu AMP trong WordPress (Cách dễ dàng) :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Download Instructions

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress