Bài thực hành joomla 4.1: Tạo trang form liên hệ trên website joomla

  • XiroWeb
  • 09 Tháng 7 2020

Bài hướng dẫn này hướng dẫn thực hiện:

  • Tạo các thông số cho trang liên hệ
  • Tạo menu item form liên hệ
  • Các thiết lập để hệ thống gửi nội dung từ form đến email của bạn

Hầu hết trên các website đều có trang liên hệ với các thông tin cần thiết để khách truy cập có thể liên hệ ngay với chủ thể của website khi cần.  Chúng ta đang thực hành làm web với joomla, nếu bạn chưa biết joomla là gì, hãy xem lại trong các bài trước.

Một trang liên hệ thường bao gồm:

  • Phần giới thiệu thông tin liên hệ: Tên công ty, địa chỉ, email, số điện thoại, và các số hotline
  • Phần form contact: bao gồm các field tên họ, số điện thoại, địa chỉ email, và phần nội dung liên hệ

Trang contact hoàn thiện

Phương hướng thực hiện tạo trang contact form liên hệ 

 Chúng ta sẽ tận dụng con_contact để làm điều này.

Tạo một contact mới

  Vào Administrator Menu Top >> Components >> Contacts

Đi đến trang contact admin

Tạo contact mới

Tại tab New Contact

Ngoài name là tên chủ thể, thì bạn cần điền đúng email của bạn để hệ thống gửi email đến cho bạn.

Nhập thông tin liên hệ tại tab new contact

 

Tab Miscellaneous Infomation

Là phần giới thiệu đơn vị của bạn

Thêm thông tin về đơn vị của bạn

Lưu lại thông tin liên hệ

 

Tạo Menu Item nối đến Contact vừa tạo

Bên ngoài trang frontend cho khách xem thì vẫn chưa có trang liên hệ nào cả. Và giờ chúng ta sẽ tạo trang liên hệ đó bằng cách tạo Menu Item nối đến contact chúng ta vừa tạo bên trên.

Tạo menu item mới

Bấm vào nút new để tạo menu item

Bấm vào nút select của menu item

Chọn single contact

Bấm vào nút select

Chọn contact bạn đã tạo

Tại tab Contact Display Options

Field Display Format: chọn Plain . Chọn option này là các thành phần hiển thị rõ ràng từ trên xuống dưới. 

Bạn có thể chọ option Tabs, hoặc Sliders để thấy các giao diện hiển thị khác

Thêm tiêu đề và chọn option bổ sung

 

Lưu thông tin

 

Kết quả hiển thị ngoài trang frontend

Kết quả trang liên hẹ

 

Thiết lập cấu hình email để joomla gửi email về email của bạn

 

Chúng ta sẽ thiết lập để gửi nhận email qua gmail, là email được sửu dụng phổ biến nhất hiện nay cho cá nhân.

Thiết lập cho phép gửi nhận mail qua gmail

Mặc định thì google không cho phép bạn kết nối email đến hệ thống thứ ba. Bạn cần cho phép bằng cách thực hiện như sau. 

Vào link https://myaccount.google.com/u/6/lesssecureapps?pageId=none

Thiết lập cho phép gmail gửi email

 Thiết lập email trên joomla

Đi đến trang Menu top >> System >> Global Configuration

Cấu hình email trang amdin

Nơi cấu hình email joomla

 

Các thông số cấu hình cho email dùng của gmail

  • Mailer: SMTP
  • SMTP Host: smtp.gmail.com
  • SMTP Port 465
  • SMTP Security: SSL/TLS
  • SMTP Authentication: Yes
  • Set the next two lines with your information. You need to use an app specific password (ASP), described below.
  • SMTP Username: your gmail username
  • SMTP Password: your gmail password

Các thông số thiết lập email kết nối

 

Sau khi bạn thiết lập xong, hãy save lại.

Kiểm tra thử kết nối cấu hình đã ổn chưa

 

Bấm vào nút send text mail

Hiện ra màu xanh thông báo như bên dưới là đã cài đặt thành công. 

Kết quả test email

 

 Và giờ hãy kiểm tra gửi nhận dữ liệu từ trang liên hệ của bạn. Bạn sẽ thấy nội dung thông tin được gửi đến email của bạn. Thật tuyệt phải không. Nếu có vấn đề, hãy liên hệ và để lại lời nhắn trên XiroWeb để được hỗ trợ.

 

Tác giả

Nguyễn Tiến Dũng