Cách thiết kế giao diện form biểu mẫu hiển thị trên MePuzz

You are here:
← All Topics
Table of Contents

Trong hướng dẫn lần này, MePuzz hướng dẫn bạn cách thiết kế một Form biểu mẫu tư vấn được hiển thị theo hành vi trên MePuzz.

Trước khi bắt đầu vào các bước thiết kế form tư vấn biểu mẫu, MePuzz giới thiệu đến các bạn các loại giao diện form tư vấn có trên MePuzz.

  1. Bố cục Form tư vấn

Trên hệ thống MePuzz, Form biểu mẫu tư vấn có các mẫu giao diện sau:

Giao diện ảnh ở phía trên, trường form tư vấn ở dưới

Giao diện ảnh ở phía dưới, trường form tư vấn ở trên

Giao diện ảnh ở bên trái, trường form tư vấn ở bên phải

Giao diện ảnh ở bên phải, trường form tư vấn ở bên trái

Giao diện ảnh làm nền backround, trường form nằm trên nền ảnh

Với những giao diện khác nhau, bố cục ảnh và form tư vấn sẽ khác nhau. Chúng ta cùng tìm hiểu chi tiết thiết kế cho từng form bạn nhé.

  1. Lựa chọn bố cục form tư vấn

Giao diện ảnh ở phía trên, trường form tư vấn ở dưới hoặc ảnh dưới, trường tư vấn ở trên

Với mẫu giao diện dạng ảnh ở trên hoặc dưới form tư vấn. Bạn nên chọn kích thước form tư vấn có tỷ lệ 3×2, 1×1 như: 600×400, 500×500 là đẹp nhất.

Sau khi lựa chọn kích thước form tư vấn, tùy vào kích thước form bạn sẽ lựa chọn ảnh có kích thước phù hợp. Với kiểu giao diện này, bạn có thể lựa chọn ảnh nằm ngang có kích thước ảnh có tỷ lệ 2×1 hoặc 3×1: 400x200px, 450x150px, 500x250px, 600x300x, 600x200px.

Giao diện ảnh ở bên trái form tư vấn bên phải, ảnh bên phải, form tư vấn bên trái

Với mẫu giao diện dạng ảnh ở bên trái hoặc bên phải form tư vấn. Bạn nên chọn kích thước form tư vấn có tỷ lệ 2×3, 1×1 như: 400×600, 500×500, 400×500 là đẹp nhất.

Sau khi lựa chọn kích thước form tư vấn, tùy vào kích thước form bạn sẽ lựa chọn ảnh có kích thước phù hợp. Với kiểu giao diện này, bạn có thể lựa chọn ảnh nằm dọc có kích thước ảnh có tỷ lệ 1×2 hoặc 1×3: 200x400px, 150x450px, 250x500px, 300x600x, 200x600px.

Ảnh làm nền background, form tư vấn trên nền ảnh

Với mẫu giao diện này, bạn nên có thể chọn bất kỳ kích thước form tư vấn nào bạn muốn. Bạn có thể lựa chọn tỷ lệ 3×2, 1×1 như: 600×400, 500×500 hoặc kích thước theo thẩm mỹ của bạn.

  1. Thiết kế các trường trong form tư vấn

Sau khi hoàn tất lựa chọn bố cục form tư vấn, bạn sẽ bắt đầu thiết kế trường hiển thị trên form tư vấn. Với form tư vấn, bạn tùy chỉnh thiết kế theo mong muốn của bạn

Tiêu đề, mô tả form: Nhập text nội dung, bạn có thể căn chỉnh giữa, phải, trái. Chọn màu text phù hợp

Các trường nhập nội dung liên hệ: Các trường nội dung sẽ tự động căn chỉnh theo bố cục form tư vấn

Chọn màu cho backgroun form: Bạn có thể lựa chọn màu cho phù hợp với ảnh trên form tư vấn

Màu text hiển thị: Chọn màu text nội dung hiển thị phù hợp với màu nền bạn lựa chọn

Button Call to action: Bạn nhập nội dung button kêu gọi hành động, nhập màu tương ứng

  1. Hoàn tất thiết kế form tư vấn

Sau khi lựa chọn xong trường thiết kế và bố cục bạn xem lại bố cục hiển thị trong admin và cho hiển thị trong 1 đối tượng nhất định muốn hiển thị.

Kiểm tra lại hiển thị thực tế trên trang và hoàn tất cài đặt.