Skip to content
  1. Home
  2. Docs
  3. Cài đặt nâng cao
  4. Sử dụng Contact Form 7 thay cho form mặc định

Sử dụng Contact Form 7 thay cho form mặc định

Kích hoạt plugin Contact Form 7

Để có thể thiết lập form Contact Form 7, chúng ta sẽ cần sự trợ giúp của plugin Contact Form 7.

Vậy nên, việc đầu tiên chúng ta cần kích hoạt plugin Contact Form 7. Truy cập quản trị website > chọn Plugin

Kích hoạt Contact Form 7

Tạo mới form trong Contact Form 7

Sau khi kích hoạt plugin Contact Form 7 thành công, truy cập menu Form liên hệ

Tại đây bạn sẽ thấy Contact Form 7 đã tạo cho website một form mẫu có tên là Form liên hệ. Chúng ta có thể dùng mẫu này và chỉnh sửa lại cho hợp ý của mình hoặc click vào Tạo form mới để thiết lập mới một form liên hệ.

Ở hướng dẫn này, mình sẽ tạo một form mới hoàn toàn.

Tại đây bạn sẽ thấy có 3 mục hướng dẫn này đã khoanh đỏ.

  1. Tên form : Tạm đặt là “Form liên hệ”.
  2. Các trường thông tin : Các trường được Contact Form 7 cung cấp cho phép tạo ra các loại form khác nhau.
  3. Nơi trình bày form : Được hiển thị bằng cấu trúc của HTML.

Bạn sẽ không cần phải biết HTML là gì, để thêm trường cho form hiển thị tốt thì bạn chỉ cần copy mẫu có sẵn từ <label> cho đến </label> và dán ở dòng bạn mong muốn hiển thị.

Ví dụ: Trong bài hướng dẫn này sẽ bỏ đi 2 thông tin là Tiêu đềYour Message, thêm trường thông tin điện thoại có tên thuộc tính là mobile. Sau đó đổi tên nút gửi từ Submit sang Nhận tư vấn ngay thì sẽ thực hiện như sau:

  1. Xóa 2 nhóm tiêu đề và Your message (optional).
  2. Copy nhóm label của Email xuống nơi được đánh dấu.
  3. Bôi đen và xóa thẻ email đi ( bắt đầu từ dấu [ đến kết thúc dấu ] ).
  4. Vẫn đặt con nháy tại nơi đã xóa thẻ email và chọn trường Số điện thoại trên thanh.
  5. Nhập tên thuộc tính bất kỳ liên quan đến trường số điện thoại. (ở ví dụ này đặt tên là mobile). Sau đó click nút Chèn vào form để kết thúc.

Đổi chữ Submit thành Nhận tư vấn ngay

Sau khi hoàn tất các bước trên thì click nút Lưu để hoàn tất biểu mẫu (form).

Cấu hình email

Để form có thể gửi thông tin về email được chỉ định nhận thông tin khách hàng thì click qua tab Cấu hình email

Xóa đi các thẻ chúng ta không dùng đến và thay thẻ [mobile] vào nơi bạn muốn hiển thị trong Message body. Và lưu lại để hoàn tất.

Thêm Contact Form 7 vào trang

Để sử dụng Contact Form 7 thay cho Contact Form mặc định, thì sau khi đã tạo hoàn tất Form trong Contact Form 7 chúng ta vào Propage UI Design của trang cần thay form. Sau đó tìm kiếm từ khóa “CF7” và kéo CF7 Styler vào nơi cần hiển thị Form

Tại Select Form chọn tên Form đã tạo trong Contact Form 7 để hiển thị form lên nơi đã thêm CF7 Styler

Như vậy, chúng ta đã thêm thành công Contact Form 7.

Chỉnh sửa style cho Contact Form 7

Tương tự với các module khác của Propage UI Design, chúng ta sẽ có tab Style, Button, Error.

Tab Style

Tại đây, chúng ta có 4 group lần lượt: Form Style, Input Style, Input Border Style, Radio and Checkbox Style

Form Style

  • Background Type: Giúp thay đổi nền của Form, ví dụ ta có thể thay đổi nền form thành màu sắc nào đó hoặc 1 hình ảnh nền nào đó.
  • Form Padding: Giúp tạo khoảng cách bên ngoài của form
  • Title & Description Alignment: Giúp căn chỉnh form sang trái, giữa hoặc sang phải

Input Style

  • Input Background Color: Giúp đổi màu nền các trường điền thông tin như Họ tên, Email, Điện thoại,… Tại đây chúng ta có thể chọn màu sắc hoặc nền trong suốt cho trường thông tin
  • Text Alignment: Giúp căn chỉnh nội dung điền vào form
  • Height: Độ cao của trường điền thông tin 1 dòng
  • Textarea Height: Độ cao của trường điền thông tin nhiều dòng
  • Input Padding: Khoảng cách giữa thông tin điền vào so với độ rộng và cao của trường thông tin

Input Border Style

  • Border: Thêm viền ngoài cho trường nhập thông tin
  • Radius & Shadow: Tạo viền cong và bóng đổ cho trường nhập thông tin

Radio and Checkbox Style

Nếu form của bạn có có trường chọn kiểu radio hoặc checkbox thì có thể sử dụng chức năng này để làm style cho 2 loại trường thông tin này.

Tab Button

Chỉnh style cho nút gửi của form (ở hướng dẫn này nút gửi có tên là “Nhận tư vấn ngay”) với các chức năng tương tự với Tab Style.

Tab Error

Chỉnh style cho các dòng báo lỗi thông tin nhập vào của các trường với các chức năng tương tự với Tab Style.

Was this article helpful to you? Yes 1 No

How can we help?