Tạo form liên hệ với plugin Contact Form 7

Ngày đăng: 13 - 03 - 2020 Lượt xem: 1295 lượt

Xin chào các bạn!

Trang Liên hệ là một trang rất cần thiết với mỗi website. Là nơi giúp cho khách hàng có thể tìm thấy các thông tin liên hệ cũng như để lại ý kiến, câu hỏi cho những người quản lý website. Để khách hàng có thể để lại thông tin bạn cần tới một form liên hệ, gồm các ô thông tin như Tên, số điện thoại, địa chỉ, nội dung liên hệ,… Việc tạo form liên hệ trong wordpress trở nên đơn giản hơn với việc cài đặt plugin Contact form 7 cùng chức năng tạo trang để tạo trang liên hệ. Sau đây mình sẽ hướng dẫn các bạn cài đặt plugin và tạo trang liên hệ.

Cài plugin Contact Form 7

Contact Form 7 là một plugin tạo form liên hệ đơn giản, dễ dùng khá nổi tiếng với hơn 5 triệu lượt kích hoạt cùng đánh giá 5 sao trên kho plugin wordpress.

Bước 1: Cài đặt Plugin

Để cài đặt plugin này, bạn hãy vào menu Plugin Cài mới. Sau đó, tìm kiếm plugin với từ khoá “contact form 7”, bạn sẽ thấy plugin này hiện ra. Hãy nhấn nút cài đặt và kích hoạt nó để sử dụng nhé.

 plugin Contact Form 7

Plugin Contact Form 7 – Hướng dẫn tạo Form liên hệ

Bước 2: kích hoạt Plugin

Sau khi cài đặt và kích hoạt thành công plugin CF7, bạn sẽ thấy xuất hiện thêm một menu có tên Form liên hệ, hãy nhấn chuột vào nó nhé, sau đó nhấn Tạo form mới.

 plugin Contact Form 7

Bước 3: Thêm form mới

Để thêm form mới, bạn điền tên cho form, và tiến hành thêm nội dung cho form. Bạn muốn thêm thành phần nào, có thể nhấn vào các nút danh sách để thêm nó, như là văn bản ngắn, email, URL, số điện thoại,…

Tạo form liên hệ với plugin Contact Form 7

Bước 4: Cấu hình thuộc tính

Ở đây, mình ví dụ thêm số điện thoại, bạn phải hoàn thành các thông tin sau:

  • Kiểu: nếu chọn mục bắt buộc, thì khi sử dụng bắt buộc phải điền vào ô này.
  • Tên: tên của ô nhập để phân biệt, không có khoảng trắng, và phải duy nhất
  • Giá trị mặc định: nếu bạn điền vào nó sẽ hiện ra bên ngoài, tại ô nhập
  • Tich chọn Sử dụng dòng này làm chữ chìm… thì giá trị mặc định trên sẽ bị mờ, và khi người dùng nhập nó sẽ tự mất đi
  • Thuộc tính ID: để sử dụng trong css
  • Thuộc tính class: sử dụng trong css để trang trí cho ô

Bước 5: Chèn form

Sau đó bạn nhấn nút chèn vào form.

Tạo form liên hệ với plugin Contact Form 7

Bước 6: Cấu hình văn bản

Tương tự bạn có thể thêm văn bản ngắn để khách hàng điền tên, emailvăn bản dài để điền nội dung,… gửi để thêm nút submit cho form. Ngoài ra, để dán nhãn trước mỗi ô nhập, bạn có thể chèn ô nằm giữa cặp label với cấu trúc<label> Tên ô nhập [text* your-name] </label>. Trong đó, phần in đậm là đoạn code của ô nhập.

cấu hình trang liên hệ với plugin Contact Form 7

Giao diện cấu hình tạo form liên hệ với plugin Contact Form 7

Bước 7: Cấu hình mail

Sau đó, bạn qua phần cấu hình mail, để cung cấp thông tin người nhận mail khi khách hàng liên hệ qua form này.

  • Mail nhận: là mail sẽ nhận thông tin liên hệ từ form này
  • Mail gửi: thông tin mail gửi đi, bạn cứ để mặc định nhé!
  • Tiêu đề: tiêu đề cho email
  • Additional headers: thông tin thêm cho email, chẳng hạn thông báo Reply-to
  • Message body: Nội dung email

Bạn có thể chèn nội dung khách hàng đã nhập vào bằng cách sử dụng tên của ô nhập nằm trong dấu [ ], chẳng hạn như [dien-thoai]

Giao diện cấu hình mail

Giao diện cấu hình mail – Hướng dẫn tạo Form liên hệ

Bước 8: Cấu hình form thông báo

Qua mục Thông báo và Chú ý, bạn có thể sửa các thông báo cho form tuỳ theo ý thích.

cấu hình trang liên hệ

Giao diện cấu hình form liên hệ

Bước 9: Short code liên hệ

Bạn nhấn nút Lưu để lưu form này lại. Sau đó, dưới tên form, bạn sẽ thấy một đoạn short code ngắn, năm trong ô màu xanh. Hãy copy nó lại nhé!

Code cho form liên hệ

Bước 10: Tạo trang mới

Bây giờ bạn hãy tạo một trang mới, có tên là Liên hệ. Ở phần nội dung, hãy dán đoạn short code đã copy ở trên vào. Sau đó nhấn nút Đăng để đăng trang.

trang liên hệ mới

Giao diện cách tạo một trang liên hệ mới

Bây giờ hãy ra ngoài website và truy cập vào trang Liên hệ vừa tạo, bạn sẽ thấy một form điền thông tin như bên dưới. Hãy thử điền thông tin và nhấn nút Gửi đi nhé!

Form điền thông tin liên hệ

Form điền thông tin liên hệ

Nếu thấy xuất hiện thông báo Xin cảm ơn là đã gởi thành công. Bây giờ hãy check mail mà bạn đã cấu hình làm mail nhận khi tạo form, nếu nhận được mail là thành công nhé!

trang liên hệ

Form thông báo Xin cảm ơn

Tổng kết

Như vậy là bạn đã biết cách tạo một form liên hệ khá đơn giản với plugin Contact form 7 rồi phải không nào? Tuy nhiên form của mình khá là đơn sơ, bạn có thể chèn thêm thông tin liên hệ, logo, hình ảnh doanh nghiệp vào trang liên hệ để nhìn bắt mắt hơn nhé! Ngoài ra, còn có thể sử dụng css để form của mình nhìn đẹp hơn, chuyên nghiệp hơn, giống như hình dưới nhé! Mình sẽ hướng dẫn các bạn sau.

trang liên hệ

Hình ảnh doanh nghiệp vào trang liên hệ – Hướng dẫn tạo form liên hệ

3.7 3 votes
Đánh giá bài viết

Nhận thông báo
Nhận thông báo cho
guest

0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Hướng dẫn chống copy trên WordPress đơn giản, hiệu quả

Hướng dẫn chống copy trên WordPress đơn giản, hiệu quả

13 - 10 - 2022

Chống copy trên Wordpress là điều mà chúng ta cần phải quan tâm nếu không muốn sự sáng tạo...

2 cách kiểm tra dung lượng hosting đơn giản dễ thực hiện nhất

2 cách kiểm tra dung lượng hosting đơn giản dễ thực hiện nhất

01 - 10 - 2022

Kiểm tra dung lượng hosting là điều cần phải làm khi bạn quản trị một website. Nếu dung lượng...

Genesis Framework là gì? Top 6 Genesis Framework tốt nhất hiện nay

Genesis Framework là gì? Top 6 Genesis Framework tốt nhất hiện nay

29 - 09 - 2022

Genesis Framework là gì? Đây là một khung Theme Framework được StuidoPress phát triển. Genesis Framework đem lại cho...

Hướng dẫn chỉnh sửa HTML trong WordPress đơn giản nhất

Hướng dẫn chỉnh sửa HTML trong WordPress đơn giản nhất

13 - 09 - 2022

Chỉnh sửa HTML trong WordPress là một cách hữu hiệu để tùy chỉnh giao diện website theo ý mình,...

Hướng dẫn 2 cách trỏ domain về host cPanel đơn giản nhất

Hướng dẫn 2 cách trỏ domain về host cPanel đơn giản nhất

13 - 09 - 2022

Trỏ domain về host cPanel là điều mà các bạn lập trình viên cần phải thực hiện. Bởi vì...

Cách chèn Google Form vào WordPress chi tiết nhất

Cách chèn Google Form vào WordPress chi tiết nhất

12 - 09 - 2022

Google Forms là một công cụ vô cùng tuyệt vời để thu thập thông tin của người dùng thông...

0
Would love your thoughts, please comment.x