Cách hiển thị form trên một dòng trong WordPress dễ dàng

Lượt xem
Home

Hiện nay, việc tối ưu hóa trải nghiệm người dùng trên WordPress luôn được ưu tiên hàng đầu. Một trong những cách hiệu quả để thực hiện điều này là thông qua việc hiển thị form trên một dòng. Phương pháp này không chỉ giúp tiết kiệm không gian màn hình mà còn mang lại vẻ ngoài gọn gàng và chuyên nghiệp cho website. Để dễ dàng thực hiện điều này, hãy cùng Vietnix tham khảo nội dung bài viết sau.

Tại sao nên hiển thị form trên một dòng trong WordPress?

Form trên một dòng sẽ linh hoạt hơn trong việc lựa chọn vị trí đặt, vì chỉ chiếm một dòng duy nhất, không tốn nhiều không gian và dễ dàng kết hợp với nội dung hiện có trên blog WordPress.

Ví dụ: Form đăng ký nhận bản tin thường được hiển thị trên một dòng ở đầu hoặc cuối bài viết. Form này cũng phù hợp với các trang landing page, trang liên hệ và các trang quan trọng khác trên website.

hien thi form tren mot dong trong wordpress
Cách hiển thị form trên một dòng trong WordPress dễ dàng 30

Cách tạo form một dòng trong WordPress

Đầu tiên, bạn cần cài đặt và kích hoạt plugin WPForms. Sau đó, truy cập trang WPForms > Add new trong sidebar WordPress dashboard và đặt tên cho form. Tiếp theo, bạn cần chọn template form.

Hướng dẫn cài đặt plugin WordPress

Ở đây, Vietnix sẽ chọn template “Opt-In Form“, bạn chỉ cần di chuột qua template và nhấp vào button “Use Template“.

Chọn template form
Chọn template form

Thao tác này này sẽ mở trình xây dựng form WPForms. Bạn sẽ thấy template đã chọn trước đó đã được tích hợp sẵn các field như tên và email, cùng với button gửi đi.

Trình chỉnh sửa kéo thả WP Forms
Trình chỉnh sửa kéo thả WP Forms

Bạn có thể dễ dàng chỉnh sửa hoặc sắp xếp lại thứ tự các mục bằng cách nhấp vào và kéo thả trong cột bên trái.

Bảng chỉnh sửa form
Bảng chỉnh sửa form

Sau khi tùy chỉnh xong các field, bạn có thể hiển thị form trên một dòng duy nhất bằng cách chuyển đến mục Settings > General trong form builder và nhấp vào menu “Advanced“.

Chuyển đên cài đặt Advanced của form
Chuyển đên cài đặt Advanced của form

Sau đó, nhập “inline-fields” vào ô “Form CSS Class“. Điều này sẽ áp dụng class CSS cho form. Vì WPForms đã tích hợp style cho class “inline-field“, form của bạn sẽ tự động được hiển thị một cách tinh tế trên một dòng duy nhất.

Thêm inline CSS class
Thêm inline CSS class

Để form gọn hơn, bạn có thể ẩn label của các field. Để làm điều này, hãy nhấp vào một field để mở cài đặt. Trong tab “Advanced“, hãy bật công tắc “Hide Label“.

Ẩn label của form
Ẩn label của form

Cuối cùng, hãy làm theo các bước tương tự cho tất cả các label của các field. Trong tab “Advanced“, bạn có thể nhập văn bản vào ô “Placeholder“. Điều này sẽ giúp người dùng hiểu mục đích của mỗi field.

Thêm Placeholder cho form
Thêm Placeholder cho form

Sau khi chỉnh sửa form hoàn tất, đừng quên nhấn button “Save” để cập nhật thay đổi.

Cách hiển thị form trên một dòng trong WordPress

Chỉ cần mở trang muốn chèn form một dòng và nhấn button “Add block (+)” để truy cập menu block.

Thêm block WP Form
Thêm block WP Form

Để thêm form trên một dòng vào website, hãy nhấp vào block “WP Forms” và chọn form đã tạo trước đó từ danh sách thả xuống.

Chọn Form đã tạo trước đó
Chọn form đã tạo trước đó

Sau khi chọn form, plugin sẽ hiển thị phiên bản xem trước trong trình chỉnh sửa nội dung. Nhấp vào button “Update” hoặc “Puslish” để kích hoạt form của bạn. Vậy là bạn đã hoàn tất việc hiển thị form trên một dòng trong WordPress một cách dễ dàng.

Ví dụ về form một dòng
Ví dụ về form một dòng

Ngoài những thông tin có trong bài về cách hiển thị form trên một dòng trong WordPress, bạn có thể tham khảo:

Lời kết

Vietnix hy vọng bài viết này đã giúp bạn tìm hiểu cách hiển thị form trên một dòng trong WordPress. Bạn cũng có thể xem thêm về các bài viết khác của Vietnix như cách thêm login form vào WordPress sidebar đơn giản nhất hoặc cách tạo multi-page form trong WordPress đơn giản, giúp tối ưu hơn trong quá trình tạo form. Chúc bạn thành công!

Chia sẻ lên

Theo dõi trên

Logo Google new

Đánh giá

5/5 - (95 bình chọn)

Hoàng Vui

Kết nối với mình qua

Icon Quote
Icon Quote
Đăng ký nhận tin
Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix

Bình luận