Cách hiển thị biểu mẫu của bạn trong một dòng duy nhất trong WordPress

Tác giả Network Engineer, T.Một 03, 2022, 09:55:31 CHIỀU

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 1 Khách đang xem chủ đề.

Cách hiển thị biểu mẫu của bạn trong một dòng duy nhất trong WordPress


Bạn có muốn hiển thị biểu mẫu của mình trong một dòng duy nhất không?

Biểu mẫu một dòng cung cấp cho bạn sự linh hoạt hơn với vị trí biểu mẫu. Điều này có nghĩa là bạn có thể dễ dàng thêm biểu mẫu vào các khu vực có lưu lượng truy cập cao của trang web và cải thiện chuyển đổi của mình.

Trong bài viết này, mình sẽ chỉ cho bạn cách hiển thị biểu mẫu của bạn trong một dòng duy nhất trong WordPress một cách dễ dàng.

1. Tại sao lại hiển thị một biểu mẫu dòng đơn trong WordPress?

Biểu mẫu một dòng giúp bạn linh hoạt hơn khi chọn nơi đặt biểu mẫu của mình. Vì kiểu biểu mẫu này chỉ là một dòng duy nhất, chúng không chiếm nhiều không gian và có thể dễ dàng được tích hợp với nội dung hiện có của bạn.

Các biểu mẫu đăng ký nhận bản tin email thường được hiển thị trong một dòng duy nhất ở trên hoặc dưới nội dung bài đăng trên blog. Biểu mẫu một dòng cũng hoạt động tốt trên các trang đích, trang liên hệ và các trang quan trọng khác trên trang web của bạn.

Ngoài việc tạo ra nhiều người đăng ký và khách hàng tiềm năng hơn, bạn có thể biến bất kỳ loại biểu mẫu nào thành biểu mẫu một dòng. Ví dụ: có thể hợp lý khi hiển thị biểu mẫu liên hệ của bạn trong một dòng duy nhất để tiết kiệm không gian trên trang.

Mình sẽ chỉ cho bạn cách hiển thị một dòng đơn trên trang web WordPress của bạn.

2. Tạo biểu mẫu dòng đơn của bạn trong WordPress

Đối với hướng dẫn này, mình sẽ sử dụng plugin WPForms để tạo một biểu mẫu dòng đơn. Đây là plugin tạo khách hàng tiềm năng tốt nhất cho WordPress được hơn 5 triệu trang web sử dụng.


Bạn có thể sử dụng trình tạo kéo và thả để nhanh chóng tạo bất kỳ biểu mẫu nào cho trang web của mình. Thêm vào đó, nó tích hợp với các công cụ tiếp thị email phổ biến để bạn có thể dễ dàng phát triển danh sách email của mình.

Có một phiên bản cao cấp của plugin với nhiều tính năng hơn, nhưng mình sẽ sử dụng phiên bản lite cho hướng dẫn này vì nó cho phép bạn tạo một biểu mẫu đơn giản và kết nối nó với Constant Contact để tạo khách hàng tiềm năng.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin. Để biết thêm chi tiết, hãy xem hướng dẫn dành cho người mới bắt đầu của mình về cách cài đặt plugin WordPress.

Sau đó, đi tới WPForms >> Add New trong bảng điều khiển quản trị WordPress của bạn và đặt tên cho biểu mẫu của bạn. Sau đó, bạn cần chọn mẫu biểu mẫu của mình.

Mình sẽ chọn mẫu 'Opt-In Form'. Chỉ cần di chuột qua mẫu và nhấp vào nút 'Use Template'.


Thao tác này sẽ hiển thị trình tạo biểu mẫu kéo và thả.

Bạn sẽ thấy rằng mẫu mình chọn tự động bao gồm các trường tên và email và nút gửi.


Mọi trường đều có thể được chỉnh sửa bằng cách nhấp vào chúng và thực hiện thay đổi ở cột bên trái.

Bạn cũng có thể kéo và thả các trường để thay đổi thứ tự của chúng.


Khi bạn đã hoàn tất việc tùy chỉnh các trường, bạn có thể hiển thị biểu mẫu của mình trong một dòng duy nhất.

Để thực hiện việc này, hãy đi tới Settings >> General và sau đó nhấp vào tab thả xuống 'Advanced'.


Tiếp theo, nhập 'inline-fields' vào hộp 'Form CSS Class' (không có dấu ngoặc kép).

Điều này sẽ áp dụng lớp CSS đó cho biểu mẫu. Vì WPForms bao gồm tạo kiểu cho lớp 'inline-fields', nó sẽ tự động làm cho toàn bộ biểu mẫu của bạn hiển thị độc đáo trên một dòng.


Sau đó, bạn có thể làm cho biểu mẫu của mình nhỏ hơn nữa bằng cách ẩn các nhãn trường.

Chỉ cần nhấp vào tùy chọn điều hướng 'Fields', sau đó chọn tùy chọn menu 'Advanced' và nhấp vào nút chuyển đổi 'Hide Label' để bật tính năng này.


Sau đó, bạn cần làm điều tương tự cho tất cả các nhãn trường biểu mẫu.

Sau đó, trong cùng phần 'Advanced', bạn có thể nhập văn bản vào hộp 'Placeholder'.

Điều này cho người dùng của bạn biết mỗi trường biểu mẫu dùng để làm gì.


Khi bạn đã hoàn tất việc tùy chỉnh biểu mẫu của mình, hãy đảm bảo nhấp vào nút 'Save' để lưu các thay đổi của bạn. 

Nếu bạn đang sử dụng biểu mẫu của mình để tạo khách hàng tiềm năng, thì bạn có thể kết nối biểu mẫu với nhà cung cấp dịch vụ tiếp thị qua email. Để biết thêm chi tiết, hãy xem hướng dẫn của mình về cách tạo bản tin email đúng cách.

3. Thêm biểu mẫu dòng đơn vào trang web WordPress của bạn

Bây giờ, đã đến lúc thêm mẫu đơn dòng vào trang web của bạn. Bạn có thể thêm nó vào bất kỳ khu vực trang, bài đăng hoặc widget nào.

Mình sẽ thêm nó vào một trang hiện có, nhưng quá trình sẽ tương tự nếu bạn thêm nó vào một khu vực khác của blog WordPress của mình.

Chỉ cần mở trang mà bạn muốn hiển thị biểu mẫu một dòng, nhấp vào biểu tượng khối thêm 'Plus' và tìm kiếm 'WPForms'.


Sau đó, nhấp vào khối 'WPForms' để thêm nó vào trang web của bạn.

Thao tác này sẽ đưa ra một hộp thả xuống để chọn biểu mẫu dòng đơn mà bạn đã tạo trước đó.


Khi bạn chọn biểu mẫu của mình, plugin sẽ tải bản xem trước biểu mẫu của bạn bên trong trình chỉnh sửa nội dung. Sau đó, nhấp vào nút 'Update' hoặc 'Publish' để làm cho biểu mẫu mới của bạn hoạt động.

Bây giờ, bạn có thể truy cập trang web của mình để xem biểu mẫu mới của bạn đang hoạt động.


Mình hy vọng bài viết này đã giúp bạn tìm hiểu cách hiển thị biểu mẫu của mình trong một dòng duy nhất trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của mình về cách có tên miền email miễn phí và chuyên gia chọn các ứng dụng số điện thoại doanh nghiệp ảo tốt nhất với các tùy chọn miễn phí.