Cách thêm nội dung HTML tùy chỉnh vào biểu mẫu WordPress

Biểu mẫu không chỉ đơn thuần là các trường nhập liệu. Đôi khi bạn cần giải thích điều gì đó, phân chia các phần, hiển thị hình ảnh hoặc thêm ngữ cảnh giữa các câu hỏi. Nội dung HTML tùy chỉnh biến các biểu mẫu tĩnh thành trải nghiệm có hướng dẫn. Dưới đây là cách thêm nội dung phong phú vào biểu mẫu WordPress của bạn.

Khối HTML là gì?

Định nghĩa

Khối HTML là một phần tử biểu mẫu đặc biệt hiển thị nội dung mà không cần thu thập dữ liệu đầu vào. Nó tạo ra mã HTML giữa các trường biểu mẫu của bạn, cho phép bạn thêm văn bản, hình ảnh, video, đường phân cách và nhiều hơn nữa.

Khối HTML so với các trường thông thường

Tại sao nên sử dụng khối HTML?

1. Hướng dẫn và chỉ dẫn

Giúp người dùng hiểu rõ những việc cần làm:

• Giải thích các câu hỏi phức tạp
• Cung cấp ngữ cảnh
• Liệt kê các yêu cầu
• Hướng dẫn qua các phần

2. Tổ chức trực quan

Chia nhỏ các câu dài:

• Đề mục
• Vách ngăn ngang
• Các yếu tố phân tách trực quan
• Nội dung được nhóm

3. Đa phương tiện phong phú

Thêm các yếu tố trực quan:

• Hình ảnh và biểu tượng
• Video được nhúng
• infographics
• Sơ đồ

4. Pháp lý và tuân thủ

Hiển thị thông tin quan trọng:

• Văn bản điều khoản và điều kiện
• Thông báo về quyền riêng tư
• Phủ nhận
• Tiết lộ bắt buộc

XUẤT KHẨU Xây dựng thương hiệu

Tăng cường thương hiệu của bạn:

• logo
• Màu sắc thương hiệu
• Kiểu dáng tùy chỉnh
• Cái nhìn nhất quán

Thêm khối HTML

Bước 1: Thêm trường

1. Mở biểu mẫu của bạn trong A.F.B.
2. Tìm kiếm Khối HTML trong danh sách trường
3. Kéo nó đến vị trí mong muốn trong biểu mẫu của bạn.

Bước 2: Thêm nội dung của bạn

1. Nhấp vào Khối HTML để chọn nó.
2. Mở bảng cài đặt
3. Nhập nội dung HTML của bạn
4. Xem trước để kiểm tra hình thức.

Bước 3: Vị trí và kiểu dáng

1. Kéo để sắp xếp lại nếu cần.
2. Thêm kiểu dáng hoặc lớp nội tuyến
3. Kiểm thử trên giao diện người dùng

Các cách sử dụng phổ biến của khối HTML

1. Tiêu đề các phần

Thông tin cá nhân Vui lòng cung cấp thông tin liên hệ của bạn bên dưới.

Kết quả:

Thông tin cá nhân
Vui lòng cung cấp thông tin liên lạc của bạn bên dưới.

2. Vách ngăn ngang

Kết quả: Một đường kẻ rõ ràng phân chia các khu vực.

3. Hộp hướng dẫn

 Quan trọng: Vui lòng chuẩn bị sẵn số đơn hàng trước khi tiếp tục.

4. Hướng dẫn dạng gạch đầu dòng

Trước khi gửi, vui lòng đảm bảo: Tất cả các trường bắt buộc đã được điền đầy đủ. Địa chỉ email của bạn chính xác. Bạn đã xem xét các điều khoản dưới đây.

5. Hình ảnh

6. Video nhúng

7. Hộp cảnh báo/thông báo

 ⚠️ Cảnh báo: Bài dự thi không thể chỉnh sửa sau khi đã gửi.

8. Hộp thông tin/Thành công

 ✓ Tiến trình của bạn được tự động lưu lại.

9. Thông báo về quyền riêng tư

Thông tin của bạn được bảo vệ theo Chính sách Bảo mật của chúng tôi. Chúng tôi sẽ không bao giờ chia sẻ dữ liệu của bạn với bên thứ ba.

10. Tóm tắt Điều khoản và Điều kiện

 Điều khoản dịch vụ Bằng cách gửi biểu mẫu này, bạn đồng ý với...

Ví dụ về bố cục biểu mẫu

Biểu mẫu nhiều phần

[Khối HTML: Phần 1 - Tiêu đề Thông tin Cá nhân] Trường Tên Trường Email Trường Số điện thoại [Khối HTML: Đường phân cách] [Khối HTML: Phần 2 - Tiêu đề Chi tiết Dự án] Menu thả xuống Loại dự án Ô nhập liệu Mô tả Trường Ngân sách [Khối HTML: Đường phân cách] [Khối HTML: Phần 3 - Tiêu đề Các bước cuối cùng] Tải lên tập tin Hộp kiểm Điều khoản Nút Gửi

Mẫu hướng dẫn

[Khối HTML: Lời chào mừng và hướng dẫn] [Khối HTML: Chỉ báo Bước 1] Câu hỏi 1 Câu hỏi 2 [Khối HTML: Chỉ báo Bước 2] Câu hỏi 3 Câu hỏi 4 [Khối HTML: Nhắc nhở ôn tập] Nút Gửi

Đăng ký hồ sơ

[Khối HTML: Logo công ty] [Khối HTML: Chức danh và mô tả vị trí] Trường Tên Trường Email [Khối HTML: Hướng dẫn "Tải lên sơ yếu lý lịch của bạn" với các yêu cầu định dạng] Trường tải lên tệp [Khối HTML: Tuyên bố về cơ hội bình đẳng] Nút Gửi

Định kiểu các khối HTML

Kiểu nội tuyến

Thêm kiểu trực tiếp vào các phần tử:

Nội dung được định dạng của bạn ở đây.

Thuộc tính kiểu phổ biến

Nền: background: #f5f5f5; Khoảng cách lề: padding: 15px; Lề: margin: 20px 0; Viền: border: 1px solid #ddd; Bán kính viền: border-radius: 5px; Kích thước phông chữ: font-size: 14px; Màu sắc: color: #333; Căn chỉnh văn bản: text-align: center;

Tạo hộp có kiểu

Hộp thông tin (Màu xanh):

 ℹ️ Thông báo thông tin ở đây

Hộp Thành Công (Màu Xanh Lá):

 ✓ Thông báo thành công ở đây

Hộp cảnh báo (màu vàng):

 ⚠️ Cảnh báo tại đây

Hộp báo lỗi (màu đỏ):

 ✕ Thông báo lỗi hoặc cảnh báo quan trọng tại đây

Mẹo thiết kế đáp ứng

Hình ảnh

Luôn sử dụng max-width cho hình ảnh có khả năng thích ứng:

Videos

Sử dụng trình bao bọc đáp ứng cho video nhúng:

Khả năng đọc văn bản

• Sử dụng cỡ chữ tương đối (em, rem)
• Giữ độ dài dòng dễ đọc
• Đệm đủ dày trên thiết bị di động

Thực tiễn tốt nhất

1. Giữ nó ngắn gọn

• Văn bản ngắn, dễ đọc lướt
• Gạch đầu dòng phía trên đoạn văn
• Chỉ những thông tin cần thiết

2. Phân cấp trực quan

• Tiêu đề rõ ràng
• Phong cách nhất quán
• Dòng chảy tự nhiên

3. Khả năng tiếp cận

• Văn bản thay thế cho hình ảnh
• Độ tương phản màu sắc đủ
• HTML ngữ nghĩa (h2, h3, p, ul)
• Đừng chỉ dựa vào màu sắc để hiểu ý nghĩa.

4. Đừng lạm dụng nó

• Quá nhiều nội dung sẽ gây choáng ngợp.
• Cân bằng nội dung với các trường nhập liệu
• Mục đích của mỗi khối HTML

5. Kiểm tra kỹ lưỡng

• Xem trước trên máy tính và thiết bị di động
• Kiểm tra xem tất cả các liên kết có hoạt động không.
• Kiểm tra xem hình ảnh đã tải xong chưa.
• Kiểm tra trên các trình duyệt khác nhau

Ý tưởng khối HTML nâng cao

Chỉ báo tiến độ

1  2  3 Bước 2/3: Chi tiết dự án

Bố cục hai cột

Phương án A Mô tả phương án A... Phương án B Mô tả phương án B...

Phần có thể thu gọn (Chi tiết/Tóm tắt)

Nhấp chuột để xem toàn bộ điều khoản Toàn văn điều khoản và điều kiện được nêu tại đây...

Danh sách biểu tượng

✓ Miễn phí vận chuyển cho đơn hàng trên 50 đô la ✓ Đảm bảo hoàn tiền trong 30 ngày ✓ Hỗ trợ khách hàng 24/7

Đếm ngược/Khẩn cấp

 🔥 Ưu đãi có thời hạn - Gửi bài trước thứ Sáu để đủ điều kiện!

Cân nhắc về Bảo mật

Điều gì là an toàn?

• Các thẻ HTML tiêu chuẩn (p, div, h1-h6, ul, li, v.v.)
• Kiểu nội tuyến
• Hình ảnh từ các nguồn đáng tin cậy
• Video nhúng từ các nền tảng chính

Tránh những gì cần tránh

• JavaScript trong các khối HTML (có thể bị loại bỏ)
• Các tập lệnh bên ngoài
• Nguồn iframe không đáng tin cậy
• Các phần tử biểu mẫu bên trong khối HTML

Lưu ý về các hạn chế của kịch bản

Hầu hết các công cụ tạo biểu mẫu đều lọc HTML để ngăn chặn các cuộc tấn công XSS. JavaScript và một số thẻ nhất định có thể bị xóa tự động vì lý do bảo mật.

Xử lý sự cố

HTML không hiển thị

• Kiểm tra lỗi cú pháp
• Kiểm tra xem các thẻ đã được đóng đúng cách chưa.
• Một số thẻ có thể bị hạn chế.

Không áp dụng kiểu dáng

• Kiểm tra cú pháp kiểu nội tuyến
• CSS của giao diện có thể được ghi đè.
• Hãy sử dụng các kiểu cụ thể hơn hoặc !important

Hình ảnh không hiển thị

• Hãy kiểm tra xem URL hình ảnh có chính xác không.
• Kiểm tra quyền truy cập hình ảnh
• Sử dụng URL đầy đủ (https://…)

Lỗi hiển thị trên thiết bị di động

• Thêm thuộc tính max-width: 100% vào hình ảnh
• Sử dụng bố cục linh hoạt (flexbox)
• Kiểm tra trên thiết bị di động thực tế

Tổng kết

Thêm nội dung HTML tùy chỉnh vào biểu mẫu:

1. Thêm khối HTML – Kéo vào biểu mẫu của bạn
2. Nhập nội dung – HTML trong bảng cài đặt
3. Đặt ở vị trí thích hợp – Giữa các lĩnh vực liên quan
4. Tạo kiểu theo ý muốn – Kiểu hoặc lớp nội tuyến
5. Giữ cho mọi thứ dễ tiếp cận – Văn bản thay thế (alt text), độ tương phản, HTML ngữ nghĩa
6. Kiểm thử phản hồi – Phiên bản máy tính và di động

Kết luận

Các khối HTML biến các biểu mẫu từ những bảng câu hỏi đơn giản thành những trải nghiệm có hướng dẫn. Thêm ngữ cảnh khi người dùng cần, sắp xếp các biểu mẫu dài thành các phần hợp lý và bao gồm đa phương tiện phong phú để thu hút và cung cấp thông tin. Cho dù đó là tiêu đề phần, hộp hướng dẫn hay video nhúng, nội dung HTML tùy chỉnh sẽ làm cho biểu mẫu của bạn hiệu quả hơn và thân thiện hơn với người dùng.

Trình tạo biểu mẫu tự động Bao gồm kiểu trường Khối HTML, cho phép bạn thêm bất kỳ nội dung HTML nào giữa các trường biểu mẫu. Tạo các biểu mẫu chuyên nghiệp, cung cấp thông tin hữu ích, hướng dẫn người dùng hoàn tất quá trình gửi biểu mẫu.

Bạn đã sẵn sàng nâng cấp các biểu mẫu của mình chưa? Tải xuống Auto Form Builder và bắt đầu thêm nội dung tùy chỉnh ngay hôm nay.