Thiết Kế Trang Liên Hệ Và Giới Thiệu – Làm WEb Tại Nhà: Bài 29

Bài trước, chúng ta đã hoàn thành trang chủ của website và biết cách sử dụng các plugin kéo thả quan trọng. Hôm nay chúng ta sẽ tiếp tục thiết kế trang liên hệ và trang giới thiệu của website. 2 trang này cách thiết kế hoàn toàn giống như trang chủ và các trang khác.

Thiết kế trang liên hệ và trang giới thiệu

Chỉnh sửa trang liên hệ của website

Thiết kế trang contact này cũng có 2 cách tương tự như trang chủ. Cách phổ biến nhất là thiết kế nội dung trang bằng các plugin dựng trang kéo thả như ở bài 28 chúng ta tìm hiểu. Tùy vào từng giao diện mà có cách thiết kế thứ 2 phần nội dung nằm trực tiếp trong page option. Vậy bài này mình sẽ hướng dẫn bạn sử dụng page option để thiết lập thay vì plugin kéo thả như bài trước. Nhầm tạo sự đa dạng trong cách thiết kế và làm quen với nhiều phong cách chỉnh sửa khác nhau.

Thiết kế trang liên hệ

Cách thiết kế trang liên hệ bằng page option (Click xem ảnh lớn)

Hình bên trên là cách thiết kế trang liên hệ trong page option của giao diện Tokoo. Để giao diện chỉnh sửa trong page option xuất hiện, bạn cần chọn giao diện contact trong thuộc tính giao diện ở cột bên trái.

Hướng dẫn các plugin tạo form liên hệ

Trong trang liên hệ, phần khó nhất vẫn là tạo form liên hệ, thường thấy nhất là plugin contact form 7 đi kèm giao diện. Cũng có một số giao diện sử dụng các plugin trực quan hơn như wpforms, Ninja form,…. chỉ cần vào plugin > Cài mới là có hàng chục plugin hỗ trợ bạn. Các plugin kéo thả như vậy khá dễ sử dụng và trong video mình cũng hướng dẫn wpform sơ qua. Nên dưới đây mình sẽ giới thiệu cách sử dụng contact form 7 vừa phổ biến vừa dùng code khó hơn để các bạn có cách dùng linh hoạt.

Thiết kế trang liên hệ

Từ trang quản trị > Form liên hệ > Danh sách form (Click xem ảnh lớn)

thiết kế trang giới thiệu

Khu vực tạo nội dung form (Click xem ảnh lớn)

Nếu bạn tạo trang mới hãy nhập code dưới đây vào và chỉnh sửa các phần tiếng Việt (màu vàng) trong ngoặc kép.

<div class="contact-input">[text* first-name placeholder "Tên Của Quý Khách *"][text* last-name placeholder "Họ Của Quý Khách *"] [email* your-email placeholder "Email *"] [text* your-subject placeholder "Tiêu Đề *"]</div>

<div class="contact-message">
[textarea* your-message placeholder "Nội Dung Liên Hệ *"]
</div>

<div class="contact-submit">
[submit class:button "Gửi Liên Hệ"]
</div>

thiết kế trang giới thiệu

Cấu hình email khi có khách liên hệ sẽ gửi qua email (Click xem ảnh lớn) 

Chú ý: Phần mail gửi không thay đổi đoạn Email trong dấu ngoặc < > có dạng thế này: <wordpress@domaincuaban.com>

Phần nội dung email, có thể copy paste đoạn văn sau và dán vào sau đó chỉnh sửa lại thành nội dung của riêng bạn:

Gửi đến từ: [your-name] <[your-email]>
Tiêu đề: [your-subject]

Nội dung thông điệp:
[your-message]



Email này được gửi đến từ form liên hệ của website Thiết Bị Điện Công Nghiệp (https://quangminhelectric.net)

Lưu ý: Phần có màu vàng trong đoạn trên phải trùng khớp với các đoạn shortcode gợi ý phía trên đầu form thì mới tự động thêm nội dung được.

thiết kế trang giới thiệu

Việt hóa thông báo gửi thư (Click xem ảnh lớn)

Thiết kế trang giới thiệu của website

Đến đây chính là lúc bạn nên tự mình thử thiết kế 1 trang giới thiệu mà không cần nhìn bài hướng dẫn. Vì đây là wordpress, nên mọi thứ đều trực quan khá dể sử dụng. Qua cách chỉnh sử kéo thả như trang chủ, page option như thiết kế trang liên hệ, bạn hãy tự mình thực hành bài tập thiết kế trang giới thiệu nhé.

thiết kế trang giới thiệu

Một mẫu trang giới thiệu cho bạn tham khảo (click xem ảnh lớn)

Mình có giợi ý nhỏ cho bạn là trong lúc lên ý tưởng thiết kế bạn có thể tìm nhiều website khác tham khảo trang liên hệ của họ. Trang này chủ yếu là bạn phải có cách hành văn giới thiệu về bạn, về thương hiệu của bạn và sản phẩm của bạn.

Tại sao phải thiết kế trang giới thiệu và contact

Khi một khách hàng truy cập vào website bạn họ sẽ có những nhu cầu nhất định như: Bạn là ai, bạn làm gì, bạn ở đâu? Trang giới thiệu chính là nơi để khách hàng tìm hiểu về bạn, ra quyết định hợp tác, giao dịch với bạn. Còn trang liên hệ thì tùy website, thông thường thông tin liên hệ sẽ được tìm thấy ngay bên trong footer website. Trang này thường phù hợp với những website hướng về phương tây hơn.

Tổng kết cách chỉnh sửa trang liên hệ

Khi bạn đã quen thuộc với các plugin kéo thả sửa trang như bài 28 và cách thiết lập trang ở những vị trí cài đặt kèm theo như page option thì bạn có thể thiết kế trang liên hệ và bất kỳ trang nào mà bạn muốn. Tuy nhiên để hoàn hảo hơn, bạn cũng cần sử dụng CSS để chỉnh sửa thêm cho giao diện.

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