Hướng dẫn thiết lập form liên hệ

Để bắt đầu thức hiện thì việc đầu tiên bạn cần đăng nhập vào website. Nếu bạn đã đăng nhập rồi thì truy cập vào quản trị website của bạn bằng cách đến trang sitemeta.net > tài khoản > website của tôi. Bạn có thể xem hướng dẫn đăng nhập vào trang quản trị website tại đây.

Hoặc truy cập nhanh bằng cách gõ tên miền miễn phí hoặc tên miền tuy chỉnh và thêm /wp-admin.

Ví dụ:

• Tên miền miễn phí của website tôi là webdemo.sitemeta.net thì tôi sẽ gõ webdemo.sitemeta.net/wp-admin lên thanh địa chỉ website của trình duyệt. Sau đó ấn Enter.
• Tên miền tùy chỉnh của website tôi là webdemo.com thì tôi sẽ gõ webdemo.com/wp-admin lên thanh địa chỉ website của trình duyệt. Sau đó ấn Enter.

---

Trường hợp bạn không muốn xem video thì có thể xem bài hướng dẫn dưới đây

Chi tiết hướng dẫn thiết lập form liên hệ bằng văn bản và hình ảnh

Bạn truy cập trang cần tạo form liên hệ, sau đó chọn SiteMeta Builder.

Tiếp theo bạn tìm kiếm từ khóa “Form” tại tab Module, sau đó kéo module SM Form Pro đến vị trí bạn muốn hiển thị.

Tại phần thiết lập của SM Form Pro sẽ có 4 tab quan trọng lần lượt là Fields, Button, Style, Setting.

Tab Fields

Tại tab Fields, bạn có thể tạo ra các trường thông tin yêu cầu khách hàng nhập vào. Để tạo ra thông tin bất kỳ, bạn click vào Thêm List Item

Sau đó click vào Sửa List Item, xuất hiện hộp thoại mới có tên là Add Field Item.

Tại đây, bạn sẽ thấy mục đầu tiên là Type. Với Type bạn có thể chọn thông tin phù hợp với nhu cầu của bạn. Ví dụ mình muốn khách hàng nhập số điện thoại của họ vào thì ở Type, mình sẽ chọn Tel

Xuất hiện các thông tin thiết lập cho trường Tel lần lượt là:

• Nhãn: Hiển thị tên của trường
• Label in Email: Hiển thị tên thông tin khi bạn nhận email
• Placeholder: Hiển thị gợi ý nhập liệu
• Required / Optional: Bắt buộc nhập / Không bắt buộc
• ID: tạo ID cho thông tin (dành cho lập trình)
• Rộng: Chiều rộng của trường
• Input color: Màu sắc chữ khi được nhập vào
• Placeholder color: Màu sắc chữ gợi ý nhập liệu
• Background input color: Màu sắc trường thông tin.

Chú thích cơ bản

Thiết lập xong 1 trường, bạn nhấn Lưu. Bạn có thể tạo thêm các trường khác bằng cách click Thêm List Item.

Kết quả sau khi tạo 3 trường thông tin: Họ tên (Text), Email (Email), Số điện thoại (Tel)

Như vậy bạn đã tạo xong các trường thông tin, tiếp theo chúng ta sẽ đi đến thiết lập Style nút gửi

Tab Button

Tại Tab Button bạn sẽ thấy các mục lần lượt là:

• Nhãn: Tên hiển thị của nút
• Button Align: Căn chỉnh cho nút
• Padding: Độ rộng của nút từ 4 phía trên, dưới, trái, phải
• Text color: Màu chữ của nút
• Text hover: Màu chữ của nút khi di chuột vào
• Background color: Màu nền của nút
• Background hover: Màu nền của nút khi di chuột vào
• Button border: Thiết lập viền cho nút như kiểu viền, độ dày, bo góc

Tab Style

Đối với tab Style cũng tương tự với tab Button, bạn có thể thiết lập phong cách hiển thị của các trường thay vì nút. Nhưng ở Tab Style có thêm mục kiểu hiển thị của biểu mẫu theo chiều ngang hoặc dọc (Form display style), và màu sắc cho các trường lựa chọn dạng radio button và checkbox.

Tab Setting

Tab Setting giúp bạn thiết lập các thông tin dùng để nhận data khi khách hàng gửi form thành công. Trong mục này có các nhóm thiết lập như:

Where to send information?

Gửi dữ liệu qua đâu?

Ở mục này SM Form Pro cung cấp chức năng gửi dữ liệu khách hàng qua email và Google Sheet, trong bài viết này SiteMeta team sẽ hướng dẫn bạn cách gửi dữ liệu qua Email.

Trường hợp bạn muốn gửi dữ liệu qua Google Sheet, bạn vui lòng truy cập bài viết Hướng dẫn gửi thông tin đến Google Sheet từ Module SM Form Pro

Kết quả sau khi gửi?

Tại đây, bạn có thể hiển thị thông báo cho khách hàng biết sau khi gửi form hoặc có thể vừa hiển thị thông báo vừa chuyển khách hàng đến một trang khác (trang cảm ơn chẳng hạn).

Email sending settings

Ở nhóm này bạn sẽ thấy các mục lần lượt là:

• Email receive data: Email dùng để nhận data khách gửi từ form
• BCC: Tương tự với Email receive data, BCC là email thứ 2 dùng để nhận data khách hàng
• Tiêu đề: Tiêu đề email bạn sẽ nhận được
• Header: Dòng đầu tiên trong nội dung email
• Footer: Dòng cuối cùng trong nội dung email

Messages settings

Tại nhóm này, bạn sẽ thiết lập các thông báo mà khách hàng sau khi gửi form.

• Thông báo gửi thành công: Khi form được gửi thành công thì sẽ xuất hiện thông báo này
• Thông báo lỗi: Khi có một lỗi nào đó xảy ra do thiết lập hoặc lỗi về lập trình thì sẽ hiển thị thông báo này
• Thông báo bắt buộc nhập: Khi khách hàng chưa nhập 1 thông tin nào đó mà thông tin đó được thiết lập là bắt buộc nhập thì sẽ hiển thị thông báo này
• Thông báo sai định dạng email: Khi khách hàng nhập sai hoặc thiếu định dạng email thì sẽ hiển thị thông báo này

Đó là tất cả các thiết lập cơ bản mà một form cần có, sau khi thiết lập xong bạn chỉ cần click nút Lưu và đăng trang là đã có thể sử dụng được.

Chúc các bạn thành công!