Kiểu dáng biểu mẫu
Auto Form Builder cho phép bạn kiểm soát hoàn toàn việc tạo kiểu cho biểu mẫu. Phối màu theo thương hiệu, sử dụng phông chữ riêng, điều chỉnh khoảng cách và thiết kế các biểu mẫu sao cho trông tự nhiên và phù hợp với trang web của bạn.
Tại sao kiểu dáng lại quan trọng?
Trang web của bạn có thương hiệu riêng. Các biểu mẫu của bạn cũng cần phản ánh thương hiệu đó.
Khi các biểu mẫu trông khác biệt so với phần còn lại của trang web, khách truy cập sẽ do dự. Họ tự hỏi liệu họ có còn đang ở trên cùng một trang web hay không. Sự do dự đó làm giảm tỷ lệ chuyển đổi.
Các biểu mẫu được thiết kế đẹp mắt cũng thể hiện tính chuyên nghiệp. Một biểu mẫu hoàn chỉnh cho khách truy cập thấy bạn quan tâm đến từng chi tiết—và nếu bạn quan tâm đến thiết kế biểu mẫu, có lẽ bạn cũng quan tâm đến dữ liệu của họ.
Cách thức hoạt động của việc tạo kiểu biểu mẫu
Auto Form Builder tích hợp trình chỉnh sửa kiểu trực quan vào giao diện tạo biểu mẫu.
- Chọn kiểu dáng bạn muốn tạoChọn từ các thành phần như vùng chứa biểu mẫu, nhãn trường, trường nhập liệu, nút bấm hoặc thông báo lỗi.
- Điều chỉnh cài đặtSử dụng công cụ chọn màu, thanh trượt và menu thả xuống để thay đổi giá trị. Không cần học hay nhớ cú pháp CSS.
- Xem trước ngay lập tứcMọi thay đổi đều hiển thị ngay lập tức trong bản xem trước trực tiếp. Xem chính xác biểu mẫu của bạn sẽ trông như thế nào trước khi xuất bản.
- Lưu làm mặc địnhÁp dụng kiểu dáng của bạn cho các biểu mẫu mới một cách tự động. Tạo một lần, sử dụng lại ở mọi nơi.
Những gì bạn có thể tùy chỉnh
Màu sắc
Kiểm soát mọi màu sắc trong biểu mẫu của bạn. Màu nền cho vùng chứa biểu mẫu và các trường riêng lẻ. Màu chữ cho nhãn, văn bản giữ chỗ và văn bản nhập liệu. Màu viền cho trạng thái mặc định, trạng thái được chọn và trạng thái lỗi. Màu nút cho nền, văn bản và hiệu ứng di chuột.
Phép in bản thạch
Chọn phông chữ cho nhãn và trường nhập liệu. Điều chỉnh kích thước phông chữ độc lập — nhãn lớn hơn để nhấn mạnh, văn bản hỗ trợ nhỏ hơn cho thông tin phụ. Kiểm soát độ đậm của phông chữ cho nhãn in đậm hoặc văn bản nhập liệu nhạt hơn.
Khoảng cách và bố cục
Đặt khoảng cách giữa các trường để tạo không gian thoáng. Điều chỉnh khoảng đệm bên trong các trường để nhập văn bản thoải mái. Kiểm soát lề xung quanh toàn bộ biểu mẫu để định vị nó hoàn hảo trong bố cục trang của bạn.
Đường viền và góc
Xác định độ rộng, kiểu dáng và màu sắc của đường viền. Làm tròn các góc để có vẻ ngoài hiện đại hoặc giữ nguyên các góc sắc nét cho thiết kế tối giản. Áp dụng các kiểu đường viền khác nhau cho các trạng thái khác nhau của biểu mẫu — đường viền mờ theo mặc định, đường viền nổi bật khi được chọn.
Buttons
Thiết kế các nút gửi phù hợp với thương hiệu của bạn. Màu nền, màu chữ, bán kính viền, khoảng cách lề, cỡ chữ và độ đậm chữ. Tùy chỉnh trạng thái khi rê chuột và khi nhấp chuột để các nút có cảm giác phản hồi nhanh và dễ nhấp.
Biểu mẫuContainer
Tùy chỉnh kiểu dáng cho toàn bộ khung bao bọc biểu mẫu. Thêm màu nền hoặc giữ nguyên màu trong suốt. Áp dụng đổ bóng để tạo chiều sâu. Đặt bán kính đường viền cho các khung bao bọc biểu mẫu có bo tròn. Kiểm soát chiều rộng tối đa để tránh biểu mẫu bị kéo giãn quá rộng.
Các trường hợp định dạng biểu mẫu phổ biến
Hướng dẫn phù hợp với thương hiệu
Công ty của bạn có các màu sắc riêng biệt—#0F2D5F cho màu chính, #F59E0B cho màu nhấn. Hãy nhập các giá trị này vào trình chỉnh sửa kiểu. Nút trên biểu mẫu sẽ sử dụng màu nhấn của bạn. Nhãn trên biểu mẫu sẽ sử dụng màu chính của bạn. Đảm bảo tính nhất quán thương hiệu hoàn hảo.
Tạo các hình dạng có độ tương phản cao
Trang web có nền tối? Hãy tạo các hình dạng nổi bật với màu sáng. Nền sáng? Sử dụng các hình dạng có viền và bóng mờ nhẹ để xác định khu vực hình dạng mà không gây cạnh tranh về mặt thị giác.
Thiết kế các hình thức tối giản
Loại bỏ viền, giảm khoảng cách, sử dụng nền trong suốt. Tạo các biểu mẫu sao cho chúng hòa hợp với trang chứ không phải nằm riêng trong một khung.
Xây dựng các biểu mẫu kêu gọi hành động nổi bật
Nút bấm lớn, màu sắc nổi bật, khoảng cách lề rộng rãi. Hãy tạo những biểu mẫu thu hút sự chú ý cho các trang tạo khách hàng tiềm năng quan trọng nhất của bạn.
Các mẫu biểu phù hợp với mọi chủ đề
Auto Form Builder hoạt động với mọi giao diện WordPress. Các biểu mẫu được định dạng của bạn sẽ tự động thích ứng với mọi bối cảnh thiết kế.
Bạn đang sử dụng Woodmart, Astra, GeneratePress, Divi, hay bất kỳ giao diện nào khác? Biểu mẫu của bạn sẽ trông như được tạo tự nhiên. Trình chỉnh sửa kiểu dáng cung cấp cho bạn đủ quyền kiểm soát để phù hợp với bất kỳ hệ thống thiết kế nào.
Không có xung đột chủ đề. Không có vấn đề kế thừa kiểu dáng. Chỉ có các biểu mẫu trông đúng như bạn muốn.
Không cần CSS
Bạn không cần phải tự viết CSS để tạo kiểu cho biểu mẫu của mình. Trình chỉnh sửa trực quan sẽ xử lý mọi thứ.
Nhưng nếu bạn muốn kiểm soát bằng CSS, Auto Form Builder hỗ trợ CSS tùy chỉnh cho từng biểu mẫu. Thêm các thiết lập ghi đè cho các trường hợp đặc biệt hoặc áp dụng kiểu dáng nâng cao không có trong trình chỉnh sửa trực quan. Người dùng nâng cao sẽ có được sự linh hoạt cần thiết.
