Sử dụng Plugin Contact Form 7 cơ bản

By Thế Khương | Wordpress

Feb 29

Sử dụng Plugin Contact Form 7 cơ bản

Trong một website luôn có mục liên hệ, bạn có thể cung cấp email, skype hay thông tin Facebook cá nhân cho độc giả có thể liên hệ với bạn một cách thủ công. Tuy nhiên nếu bạn muốn tạo 1 form liên hệ để cho khách hàng có thể điền thông tin liên hệ với 1 cách nhanh chóng cũng không quá khó khăn. Dưới đây mình sẽ hướng dẫn cho các bạn 1 số cách để tạo 1 contact form như vậy.

su-dung-contact-form-7-co-ban

Hãy chắc chắn bạn đã biết cách cài WordPress Plugins trước khi đọc bài hướng dẫn này.

1. Tạo contact form đơn giản với Contact Form 7 Plugin

Đối với một người mới làm website thì chỉ cần xây dựng 1 form liên hệ đơn giản là đủ, và contact form 7 sẽ đáp ứng tốt điều này. Sau khi cài đặt xong plugin contact form 7 bạn vào Contact => Add New để tạo 1 form mới :

contact-form7

Bạn điền tiêu đề cho form sau đó nhìn xuống dưới sẽ thấy dưới mục form đã có những dòng lệnh mặc định, nếu để y nguyên form như này và lưu lại, bạn sẽ có 1 contact form như sau :

contact-form-7-co-ban

Bạn hoàn toàn có thể so sánh và thấy được có 5 phần tương ứng với 5 mục của contact form : Tên, email, tiêu đề, thông điệp  nút gửi.

Để chèn form vào bài viết hay page bất kỳ, lúc thêm form hay chỉnh sửa, bạn save lại sẽ thấy 1 đoạnshortcode tương tự như sau :

contact-form-shortcode

Bạn copy đoạn code này chèn vào bất cứ bài viết nào hoặc page nào, tốt nhất là bạn nên tạo 1 page “LIÊN HỆ” và chèn đoạn code này vào.

chen-contact-form

Bạn có thể ghi thêm câu chữ hoặc hình ảnh nếu muốn, xong rồi Publish. Bạn sẽ được 1 page contact. Nhấn vào link dưới đây để xem Demo :

Demo : http://teambuildvn.tech/contact-sample/

2. Thêm các mục khác cho Contact Form 7

Để thêm các mục khác hoc Contact Form 7 cũng không hề khó, như bạn thấy lúc đầu, mặc định contact form 7 sẽ tạo cho bạn những dòng lệnh cơ bản để tạo ra 1 form đơn giản. Và ở trên thanh công cụ, sẽ có rất nhiều các field khác để cho các bạn tự chọn :

contact-form-7-field

Cụ thể là các Field sau :

  • Text :Dùng để khách nhập các đoạn chữ ngắn, thường là Họ, tên, họ & tên, tiêu đề,…
  • Email:Dùng để khách nhập email của họ vào.
  • URL: Dùng để khách nhập đường link, liên kết, trang web của họ.
  • Tel : Dùng để khách nhập nhập số điện thoại.
  • Number (spinbox hoặc slider):Dùng cho khách nhập số có thêm tính năng tăng giảm bằng cách chọn dấu + và – (spinbox) hoặc kéo qua trái, phải (slider)
  • Date: Dùng cho khách nhập ngày tháng năm
  • Text area: Dùng cho khách nhập nội dung văn bản dài
  • Dropdown menu: Dùng cho khách chọn những mục mà bạn đã mặc định sẵn (Chọn được nhiều hoặc một)
  • Checkboxes: Dùng cho khách chọn những mục mà bạn mặc định sẵn (chọn được một)
  • Radio buttons: Dùng cho khách chọn những mục mà bạn mặc định sẵn (chọn được nhiều)
  • Quiz: Dùng để cho khách chọn trắc nghiệm
  • reCAPTCHA: Dùng để khách nhập CAPCHA, nhập đúng mới có thể gửi form, chống spam, phải kết nối với reCAPCHA thông qua API
  • File upload: Dùng cho khách upload file, ko nên dùng field này
  • Submit button: Chèn nút gửi form (SEND) để khách có thể hoàn thành.

Với hơn 10 fields này, bạn có thể tùy chỉnh, thêm bớt để tạo ra 1 cái form chuyên nghiệp. Khi nhấn vào mỗi field, bạn có thể thấy sẽ có các thiết lập riêng cho mỗi field. Ví dụ khi nhấn vào URL nó sẽ ra như thế này :

cai-dat-url-contact-form

Bạn có thể tùy chỉnh ý bạn như có bắt buộc phải điền thông tin này hay không (Field Type), tên của field theo ý muốn (Name), giá trị mặc định khi hiển thị form (Default Value),…..

Đây là một demo khá đẩy đủ các field của contact form : http://teambuildvn.tech/contact/

3. Tùy chình email ở Contact Form 7

Bạn có thể tùy chỉnh sao cho khi khách hàng điền form và nhấn SEND, thì nội dung sẽ được chuyển đến email nào, và nội dung email là gì tại mục Mail.

tuy-chinh-email-contact-form

Ở mục này bạn có thể tùy chỉnh tất cả từ email của bạn (nhận nội dung) cho đến tiêu đề, nội dung email,…bạn có thể điền các thẻ tag, các thẻ này sẽ tự động biến thành nội dung của khách hàng khi email đến bạn. Các thẻ tag này lúc tạo form bạn có thể tùy chỉnh

Ví dụ với cài đặt của mình bên trên, thẻ tag là [your-name] sẽ tự động biến thành tên khách hàng, thẻ [your-phone] sẽ tự động biến thành số điện thoại khách hàng. Như vậy mình sẽ nhận được 1 email tương tự như sau :

email-contact-form-7

Bạn có thể tùy chỉnh sao cho hợp với cách nhìn, làm việc của bạn. Nếu bạn không nhận được email, hãy check thư mục spam và chắc chắn rằng ở phần cài đặt này, mục To là điền email của bạn.

4. Tùy chỉnh thông báo cho khách hàng

Bạn có thể tùy chỉnh ngôn ngữ thông báo khi hiển thị cho khách hàng tại mục Messages :

tuy-chinh-ngon-ngu-contact-form

Ví dụ nếu bạn làm ngôn ngữ tiếng Việt có thể tự dịch các câu này ra tiếng Việt và thay thế các câu cũ. Hoặc bạn có thể viết theo phong cách của bạn.

5. Kết luận

Trong bài viết này, mình đã hướng dẫn cho bạn cách sử dụng plugin Contact Form 7 để tạo 1 form liên hệ rất cơ bản và dễ sử dụng. Plugin này là plugin miễn phí và được sử dụng phổ biến nhất ở thời điểm hiện tại ví tính đơn giản của nó. Nếu như bạn muốn thêm các chức năng nâng cao, tạo 1 form chuyên nghiệp hơn theo ý của bạn, mình sẽ hướng dẫn ở phần kế tiếp.

Chúc bạn sử dụng thành công.

Đôi chút về Thế Khương

Kiếm tiền với affiliate từ 2013 // Thế mạnh : Inbound marketing, UI // Thích đọc bài trên Quora & lướt Reddit. Thích chia sẻ về MMO, marketing trên blog & xây dựng cộng đồng.

Theo dõi mình trên Facebook
Xem tất cả bài viết

Ưu đãi Special có thể mang lại cho bạn nhiều kiến thức cốt lõi hơn, tăng tỉ lệ thành công của bạn với kiếm tiền online/kinh doanh online trong 2018 này. 7000+ độc giả Kiemtiencenter đã nhận thành công.

24
bình luận. Để lại câu hỏi và mình sẽ hồi âm trong 24 giờ.

avatar
mới nhất cũ nhất vote nhiều nhất
tri
tri

Sao mình nhận mail được 1 lần và k nhận được nữa bạn oi

Bien
Bien

Hướng dẫn giúp mình, đã tạo form theo CF7 nhưng email không đến địa chỉ nhận. Làm thế nào để khắc phục.
Cảm ơn.

Lê Ngọc Việt
Lê Ngọc Việt

Mình test thử thì trên web báo đã đc gửi thành công nhưng mình lại không nhận đc mail. Cho mình hỏi có cần sử dụng dịch vụ gửi email như Mailchimp, Getrespone thì mới sử dụng đc hay sao ?

ngọc văn
ngọc văn

contact form của mình hơi dài, làm thế nào để tùy chỉnh cho ngắn lại đây. Cảm ơn Thế Khương nhé

Hiếu
Hiếu

Cho minhd hỏi nó bị lỗi, không hiện lỗi nhưng không gửi đc vào mail là sao nhỉ. Mới bị, trước đó vẫn ngon lành

Dũng Nguyễn
Dũng Nguyễn

Cho mình hỏi: lảm sao để tạo contact form với ngôn ngữ là tiếng việt.

Khương Thắng
Khương Thắng

mình muốn contact gửi vào trong trang admin của website được không admin

Diễm
Diễm

sao e làm y như vậy sau khi gửi thì nó thông báo gửi thành công nhưng mầ k nhận đc mail @@

Đạt
Đạt

Mình Test : sau khi điền hết thông tin, ấn gửi thì bị hiện lên dòng chữ:
There was an error trying to send your message. Please try again later.
ko gửi được bạn ạ. ad hỗ trợ mình với. thanks

cường
cường

em bị vấn đề này:There was an error trying to send your message. Please try again later.
mong các anh chị giúp ạ